Команда разработчиков обсуждает код за ноутбуками в офисе.

Как эффективно работать с фронтенд- и бэкенд-кодом

Узнайте, как стать эффективным full-stack инженером с помощью Клода Кода.

Делиться

d9b258d973da3e833890fb168e625ba7

В большинстве приложений обычно используется разделение на фронтенд и бэкенд. Фронтенд обрабатывает то, что видит пользователь, а бэкенд отвечает за всю логику и обработку. Это естественное разделение задач, которое большинство платформ просто используют, потому что оно хорошо работает.

Однако, когда вы вносите изменения в свое приложение, часто возникает необходимость внести изменения как во фронтенд, так и в бэкенд. Именно здесь на помощь приходят full-stack инженеры: инженеры, которые работают как с фронтендом, так и с бэкендом.

Однако работа как с фронтендом, так и с бэкендом может быть сложной задачей по ряду причин:

  • Они часто написаны на разных языках: фронтенд — на TypeScript, а бэкенд — на Python.
  • Вам придётся иметь дело с правами доступа и аутентификацией, а также сталкиваться с такими проблемами, как ошибки CORS.
  • Они находятся в разных репозиториях и развертываются отдельно.
Разработка полного стека программного обеспечения с использованием программных агентов.

С появлением агентов для кодирования работа с фронтенд- и бэкенд-кодом одновременно стала проще. В этой статье я расскажу о том, как я ежедневно работаю с фронтенд- и бэкенд-кодом и обеспечиваю бесшовную интеграцию этих двух систем.

Зачем работать одновременно с фронтендом и бэкендом?

Причина, по которой вы работаете одновременно с фронтенд- и бэкенд-кодом, заключается просто в необходимости. Допустим, вы хотите добавить в свое приложение новую функцию, позволяющую пользователю сохранять диалоги с ИИ-чат-ботом и получать к ним доступ позже.

Для реализации этой функции требуются изменения как во фронтенде, так и в бэкенде. Вам нужно обновить фронтенд, чтобы он отображал предыдущие беседы, а бэкенд должен обрабатывать хранение и извлечение этих бесед. Таким образом, у вас нет возможности работать одновременно с кодом фронтенда и бэкенда.

Кроме того, инженеру обычно эффективнее работать как с фронтендом, так и с бэкендом. Представьте, что вам нужно реализовать функцию диалогов в чат-боте с использованием ИИ, а вы работаете только с фронтендом. Тогда вам придётся реализовать фронтенд-часть курса, а затем скоординировать действия с другим бэкенд-разработчиком по поводу хранения диалогов. Вам придётся потратить время на обсуждение:

  • Схема хранения переписок
  • Какие данные следует включить?
  • Как следует назвать конечную точку?

Это невероятно трудоемкий процесс. Если вы когда-либо работали в профессиональной среде разработки программного обеспечения, вы знаете, сколько времени это занимает.

Вместо этого, если вы выполняете работу в одиночку, вам не требуется координация, и вы можете двигаться с гораздо большей скоростью.

Методы эффективной работы с фронтенд- и бэкенд-кодом

В этом разделе я расскажу о некоторых методах, которые я использую для эффективной работы как с фронтенд-, так и с бэкенд-кодом. С появлением сверхэффективного агента для кодирования это стало намного проще, и вам не нужно обладать обширным опытом работы как с фронтенд-, так и с бэкенд-кодом, чтобы быть эффективным.

Используйте рабочие пространства

Рабочие пространства — невероятно мощная функция при работе с несколькими репозиториями. Это можно сделать с помощью Cursor, используя функцию «Добавить рабочее пространство», или с помощью любого инструмента командной строки, просто указав агенту репозитории, с которыми вы хотите работать. Теперь модель будет иметь контекст обоих соответствующих репозиториев и, таким образом, сможет реализовать полнофункциональное решение за один раз.

Рабочие пространства — это невероятно. До того, как я их открыл для себя, я работал с двумя отдельными вкладками курсора: одна с кодом фронтенда, другая — с кодом бэкенда. Я вносил одно изменение во фронтенд, а затем вручную обновлял бэкенд, чтобы он принял это новое изменение.

Неудивительно, что мне потребовалось целая вечность, чтобы внедрить новые функции. Теперь я просто прошу своего агента обновить фронтенд в соответствии с инструкциями, и он автоматически обновляет бэкенд соответствующим кодом, чтобы принять изменения во фронтенде. Конечно, это работает и в обратную сторону.

Монорепоз

Монорепозитории также обладают огромным потенциалом. Противоположностью монорепозитория является распределение всего кода по разным репозиториям (обычно называемым микросервисами). По моему опыту, это работает не очень хорошо, поскольку просто усложняет вам и вашим кодерам отслеживание местоположения всего кода.

Вместо этого я настоятельно рекомендую перенести весь код в монорепозиторий, где он будет находиться в одной кодовой базе. Теперь вы сможете легко создавать правила, например, прекоммитные хуки, которые будут применяться ко всему вашему коду, и вам не придётся дублировать их в нескольких репозиториях. Кроме того, вы сможете легко создавать файлы AGENTS.md, описывающие и объясняющие структуру всего репозитория, чтобы агенты могли легко отслеживать местоположение всего кода.

Если весь ваш код находится в монорепозитории, вам также не понадобятся рабочие пространства, как я описывал в предыдущем разделе. Однако довольно часто для кода фронтенда/API используется монорепозиторий, а для более сложных операций, таких как запуск агентов или обработка документов, — отдельный репозиторий. Таким образом, вам часто все равно придется использовать рабочие пространства.

AGENTS.md как контекст

Ещё один очень важный совет — активно используйте и обновляйте файл AGENTS.md. Существует множество альтернатив AGENTS.MD, таких как CLAUDE.md, WARP.md или .cursorrules. Однако, по моему опыту, AGENTS.MD читается всеми агентами программирования, независимо от того, какой из них вы используете.

Поэтому я рекомендую использовать AGENTS.md, потому что если в будущем вы смените агента или ваши коллеги будут использовать других агентов, вы все получите одинаковую выгоду.

В корневом каталоге репозитория можно разместить файл AGENTS.md, который будет содержать общий обзор репозитория, своего рода README. Это позволит агенту понять, какие папки содержат какую логику, упрощая навигацию по коду.

Кроме того, файл AGENT.md может находиться во всех подпапках. Например, если у вас есть служба в одной папке, вы можете разместить там файл AGENTS.md, объясняющий, как работает служба, или любые особенности, о которых следует знать.

Также хочу добавить, что всякий раз, когда вы вносите изменения в свой код, обязательно обновляйте файл AGENTS.md. Например, вы можете попросить своего агента по программированию обновить соответствующие файлы AGENTS.md, учитывая информацию, полученную им в ходе последней сессии, и он автоматически добавит важные примечания. Конечно, не забудьте также отправить эти изменения на GitHub, чтобы ваши коллеги могли воспользоваться полученными вами знаниями.

Заключение

В этой статье я рассказал о том, как эффективно работать как с фронтенд-, так и с бэкенд-кодом. Начну с объяснения того, почему важно уметь работать и с фронтендом, и с бэкендом, подчеркнув, что это обычно более эффективный способ выполнения задач. Далее я подробно описал некоторые методы, которые я использую для эффективной работы с фронтендом и бэкендом, включая использование рабочих пространств (Workspaces), монорепозиториев (monorepos) и файла AGENTS.md. Я считаю, что в будущем мы все будем full-stack инженерами, учитывая эффективность кодирования агентов. Работа инженера-человека будет заключаться просто в координации всех ваших агентов наиболее эффективным способом для решения наиболее важных задач наилучшим и эффективным образом.

👉 Моя бесплатная электронная книга и вебинар:

🚀 Десять раз повысьте свой инженерный уровень с помощью магистратуры (бесплатный 3-дневный курс по электронной почте)

📚 Получите мою бесплатную электронную книгу «Модели визуального языка».

💻 Мой вебинар по языковым моделям зрения

👉 Найдите меня в социальных сетях:

💌 Substack

🔗 LinkedIn

🐦 X / Twitter

Источник: towardsdatascience.com

✅ Найденные теги: Бэкенд, Как, Код, новости, Фронтенд, Эффективность

ОСТАВЬТЕ СВОЙ КОММЕНТАРИЙ

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Каталог бесплатных опенсорс-решений, которые можно развернуть локально и забыть о подписках

галерея

Фото сгенерированных лиц: исследование показывает, что люди не могут отличить настоящие лица от сгенерированных
Нейросети построили капитализм за трое суток: 100 агентов Claude заперли…
Скетч: цифровой осьминог и виртуальный мир внутри компьютера с человечком.
Сцена с жестами пальцами, где один жест символизирует "VPN", а другой "KHP".
‼️Paramount купила Warner Bros. Discovery — сумма сделки составила безумные…
Скриншот репозитория GitHub "Claude Scientific Skills" AI для научных исследований.
Структура эффективного запроса Claude с элементами задачи, контекста и референса.
Эскиз и готовая веб-страница платформы для AI-дизайна в современном темном режиме.
ideipro logotyp
Image Not Found
Звёздное небо с галактиками и туманностями, космос, Вселенная, астрофотография.

Система оповещения обсерватории Рубина отправила 800 000 сигналов в первую ночь наблюдений.

Астрономы будут получать оповещения о небесных явлениях в течение нескольких минут после их обнаружения. Теренс О'Брайен, редактор раздела «Выходные». Публикации этого автора будут добавляться в вашу ежедневную рассылку по электронной почте и в ленту новостей на главной…

Мар 2, 2026
Женщина с длинными тёмными волосами в синем свете, нейтральный фон.

Расследование в отношении 61-фунтовой машины, которая «пожирает» пластик и выплевывает кирпичи.

Обзор компактного пресса для мягкого пластика Clear Drop — и что будет дальше. Шон Холлистер, старший редактор Публикации этого автора будут добавляться в вашу ежедневную рассылку по электронной почте и в ленту новостей на главной странице вашего…

Мар 2, 2026
Черный углеродное волокно с текстурой плетения, отражающий свет.

Материал будущего: как работает «бессмертный» композит

Учёные из Университета штата Северная Каролина представили композит нового поколения, способный самостоятельно восстанавливаться после серьёзных повреждений.  Речь идёт о модифицированном армированном волокном полимере (FRP), который не просто сохраняет прочность при малом весе, но и способен «залечивать» внутренние…

Мар 2, 2026
Круглый экран с изображением замка и горы, рядом электронная плата.

Круглый дисплей Waveshare для креативных проектов

Круглый 7-дюймовый сенсорный дисплей от Waveshare создан для разработчиков и дизайнеров, которым нужен нестандартный экран.  Это IPS-панель с разрешением 1 080×1 080 пикселей, поддержкой 10-точечного ёмкостного сенсора, оптической склейкой и защитным закалённым стеклом, выполненная в круглом форм-факторе.…

Мар 2, 2026

Впишите свой почтовый адрес и мы будем присылать вам на почту самые свежие новости в числе самых первых