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

В большинстве приложений обычно используется разделение на фронтенд и бэкенд. Фронтенд обрабатывает то, что видит пользователь, а бэкенд отвечает за всю логику и обработку. Это естественное разделение задач, которое большинство платформ просто используют, потому что оно хорошо работает.
Однако, когда вы вносите изменения в свое приложение, часто возникает необходимость внести изменения как во фронтенд, так и в бэкенд. Именно здесь на помощь приходят 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
🐦 X / Twitter
Источник: towardsdatascience.com



























