- BrainTools - https://www.braintools.ru -

Флешбэки адового 2020 года, который в 2026 уже не кажется таким страшным

Флешбэки адового 2020 года, который в 2026 уже не кажется таким страшным - 1

Спойлер: нет, я не про пандемию

Всем привет! На связи Саша Петрушин, я руковожу группой разработки в центре разработки и машинного обучения [1] компании «Инфосистемы Джет».

Недавно я нашёл старый черновик статьи, которую так и не опубликовал с 2020 года — про фронт личного кабинета крупного портала. Перечитал и вспомнил, насколько это было круто и адово.

Дисклеймер: в этой статье – теория, как проект мог измениться в 2026 году. ИИ-агенты — это другие требования к информационной безопасности. Используйте их разумно.

В марте, в разгар локдауна, я пришёл в команду пятым разработчиком: Angular 1.4 с Backbone, переписывание на React, виджеты, 2400+ сценариев подачи заявлений. Потом мы расширили команду до двадцати фронтендеров.

В общем, поностальгировал по команде и ощущению «мы же это реально сделали».

А после задался двумя вопросами.

Как бы я решал ту же задачу сейчас?

И что вообще изменилось в реальной экономике поставки продукта за последние пять с лишним лет?

— А куда мне отсюда идти? — спросила Алиса.
— А куда ты хочешь попасть? — ответил Кот.
— Мне всё равно, куда…
— Тогда, стало быть, всё равно, куда и идти, — заключил Кот.

Л. Кэрролл, «Приключения Алисы в Стране чудес»

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

История из черновика: что было в 2020

По контракту нужно было сделать редизайн личного кабинета, перевести на новую архитектуру 80+ услуг и добавить новые сценарии вроде совместной подачи заявлений — и уложиться в загрузку ≤ 2 сек при 1 Мбит/с. Само собой, не обошлось без унаследованного кода.

Тогда я, полный энтузиазма, клонировал проект из GitLab. Открыл репозиторий — и:

«На него невозможно было смотреть без содрогания… когда его суставы и мускулы пришли в движение, получилось нечто более страшное, чем все вымыслы Данте»

М. Шелли, «Франкенштейн»

Унаследованный код: два слоя монстра

Слой 1 — оболочка: Angular 1.4, CoffeeScript, Gulp, bower и npm одновременно, karma и protractor. Авторизация, роутинг, часть сервисов вне услуг.

Слой 2 — услуги: ES5, Backbone 0.9.10, без сборщика. Сотни файлов через <script>, порядок подключения критичен — собрать бандл за разумное время не получилось. 80+ услуг описаны JSON в БД: сервер отдаёт модель представления, клиентский движок рисует формы. Документации и тестов нет.

Вся боль [2] в цифрах. На отрисовку одной услуги при обновлении страницы уходило 190+ HTTP-запросов, загрузка занимала около 30 секунд при целевых 2 сек на 1 Мбит/с, а код не был минифицирован.

Но самая большая беда — невозможно оценить объём: при 80+ услугах и 2400+ комбинаций заявителей и предметов стоимость одного виджета в старом коде не выводилась.

Команда владела React. Angular 1.4, и Backbone в прод набирать было некому и незачем. Попытки встроить React в монстра упирались в тот же зоопарк подрядчиков за десять лет.

Что мы сделали в 2020

Сразу поняли: нужна новая архитектура.

Какой стек мы выбрали:

  • React + TypeScript — типы, чтобы не ловить баги в проде из‑за опечатки в поле.

  • Ant Design + свой UI-kit — не рисовали кнопки с нуля. Одинаковые отступы, ошибки [3] в полях, доступность для длинных форм.

  • react-hook-form — одно правило для всех полей: изменил значение -> одно событие onChange с данными, валидностью и именем поля.

  • redux-saga — всё «между кликами»: автосохранение черновика, цепочка шагов перед подписью КЭП.

  • React Router + ленивая подгрузка — страница и тяжёлые виджеты грузятся по частям.

  • Redux «по требованию» — состояние услуги подтягивается только когда пользователь зашёл в сценарий. Иначе тайминг в 2 секунды не удержать.

  • REST с заранее согласованным контрактом — до кодинга договорились про поля и эндпоинты.

  • Storybook — каждый виджет открывается отдельно: QA без полного сценария, аналитики сверяют вёрстку без деплоя.

  • Cypress — на каждый запрос на merge — короткий smoke-тест; полный прогон ~1 ч 40 мин в Jenkins перед релизом.

  • Express-мок по OpenAPI — фронт без живого бэкенда; тот же контракт локально и в CI.

  • GitLab + Jenkins — без зелёного пайплайна ничего в main не вливали.

Вместо «JSON-движка, который всё рисует сам» сделали три слоя:

  1. Виджет — кирпичик формы. Иногда целый блок, иногда одно поле. Сам знает, когда «пикнуть наверх»: данные, валидность, имя в форме. Внутри — поля Ant Design, обёрнутые единообразно.

  2. Менеджер виджетов — раскладка: шаги, панели, аккордеоны, галочка «раздел заполнен правильно». Не знает про XML — только отображение.

  3. Менеджер сервисов — дирижёр сценария: черновик, сохранение после каждого корректного виджета, предпросмотр, подписание усиленной квалифицированной ЭП (КЭП), упаковка в формат бэкенда, несколько заявителей.

Работа над услугой — комбинация виджетов из каталога, новый виджет при необходимости и конвертер в DTO бэкенда.

Примерно на четыре месяца у команды из пяти человек была задача сделать 2400+ сценариев. Конечно, это не 2400 уникальных экранов, но:

— Становится всё любопытнее и любопытнее! — подумала про себя Алиса.

Л. Кэрролл, «Приключения Алисы в Стране чудес»

В итоге команду мы расширили до 20 фронтендеров: к пяти стартовым добавилось еще пять из штата и десять подрядчиков на короткий срок (в основном на простые сервисы вокруг личного кабинета).

Тогда мы провели около 40 собеседований, и это было одной из самых тяжёлых и нудных частей всего проекта.

— Если бы каждый занимался своим делом, — сердито проворчала Герцогиня, — то Земля завертелась бы гораздо быстрее, чем вертится теперь.

Л. Кэрролл, «Приключения Алисы в Стране чудес»

Нанимали в том числе для того, чтобы успеть по срокам. Ядро личного кабинета – ещё не всё: были остальные услуги и регресс при довольно жёстких дедлайнах.

Простые сервисы — таблица и один-три эндпоинта — шли отдельным потоком. Спасали те же smoke-тесты на merge: без зелёного CI merge не обсуждали. Ревью свелось к типам против контракта, стилю и наличию теста.

Стек 2026: как бы я решал задачу сейчас

Критерий для крупного проекта с долгой поддержкой: инструмент распространён, у major-версий предсказуемая дорожная карта, людей найти несложно.

Слой

2020 (факт)

2026 (что бы я сделал)

Почему

UI и дизайн-система

React 16/17 + Ant Design UI-kit

React 18 + Ant Design 5 + UI-kit

Тот же визуальный язык, темизация через токены

Язык, формы, состояние

TypeScript, react-hook-form, redux-saga, Redux (ручные reducers/actions)

TS 5 strict, react-hook-form + Zod, TanStack Query, Redux Toolkit

Одна схема в виджете и API, меньше шаблонного кода

Сборка и монорепозиторий

webpack, Lerna

Vite, pnpm + Turborepo

Быстрее dev, HMR и кэш CI

Контракт и заглушки

OpenAPI (ручные типы), Express

OpenAPI 3 + openapi-typescript, MSW 2

Один клиент для агента и разработчика, одни заглушки для dev, Storybook и Playwright

Тестирование

Jest, Cypress

Vitest, Playwright, Schemathesis

Параллельный CI; контрактные тесты до dev-стенда

CI и документация UI

Jenkins + GitLab MR, Storybook 6

GitLab CI, Storybook 8

Тот же пайплайн lint -> unit -> e2e; stories — часть критериев готовности виджета

Ant Design сознательно не меняю. В 2020 UI-kit снял спор «как выглядит поле в форме». В 2026 Ant Design 5 с токенами даёт редизайн без смены архитектуры виджетов.

Что не беру: экзотические менеджеры состояния, чужой CSS-in-JS поверх дизайн-системы, микрофронты «на каждый виджет» — лишняя сложность поддержки без выигрыша на нашей гранулярности.

Процесс тот же, детали глубже

Спецификация с аналитикой — каталог виджетов в YAML: поля, валидаторы, справочники, матрица обязательности по типам заявителей. Gherkin — на классы поведения [4] (@smoke, @regression), а не на каждую комбинацию из 2400. Связка: id виджета -> story -> тег Playwright.

Контроль на merge — как в 2020: линтер и типы -> unit -> smoke Playwright 3–7 минут -> полный регресс по расписанию (ночью, 15–25 минут с шардированием). Сменился контракт OpenAPI — упали генерация клиента и контрактные тесты (Schemathesis). Один источник правды.

Релизы — еженедельно. Услугу включаем флагом. Если бэкенд не готов — поезд не останавливаем.

Что в экономике проекта меняется кардинально: рой агентов вместо рук

Ну а теперь самое интересное. В 2026 году на всех повторяемых задачах исполнитель — не команда разработчиков, а ИИ-агенты, которые отлично вписываются в конвейер.

Флешбэки адового 2020 года, который в 2026 уже не кажется таким страшным - 2

Разбор унаследованного кода

Рой агентов с доступом к коду только на чтение; каждый складывает отчёт в свою ветку: граф зависимостей старого <script>, хуки JSON-движка, самые тяжёлые запросы при загрузке, черновик ADR «rewrite / strangler». Те же ripgrep, git и статический анализ — только параллельно. Архитектор подписывает ADR.

Спецификации

Агент делает черновик specs/widgets/*.yaml, опираясь на базу знаний с RAG: нормативные документы, каталог виджетов, ранее согласованные постановки — не на память [5] аналитика и не на поиск по Confluence.

AST-разбор репозитория показывает, какие виджеты и связи уже есть в коде и как старый код мапится на поля. Из этого агент собирает черновик постановки на единицу работ: виджет, UI-kit, валидаторы, граничные случаи.

Аналитик проверяет изменения и подписывает сверку с нормативкой. Агент подсвечивает ломающие правки в типах OpenAPI. 2400 комбинаций — правила в YAML, а не ручной список.

Реализация

Теперь кодом занимаются оркестратор (старший разработчик) и агенты в песочнице. Пример единицы работы:

id: WIDGET-applicant-passport
spec: specs/widgets/applicant-passport.yaml
stack: react-hook-form, zod, ui-kit/PassportFields
DoD:
  - packages/widgets/applicant-passport/*
  - storybook story "default" + "validation-error"
  - vitest: schema + toDto
  - playwright: @smoke applicant-passport.spec.ts
  - bundle: widget chunk < 45kb gzip
autonomy: standard  # MR агента; выборочная проверка человеком
forbidden: crypto, signing, xml-converter-core

autonomy: standard не значит, что код едет в прод без человека. Виджеты из каталога, прошедшие весь CI, человек смотрит выборочно; новый паттерн или красный чек — обязательное ревью. Юридическая ответственность за релиз остаётся на команде.

Агент работает в обвязке с AGENTS.md: структура монорепозитория, импорт только из UI-kit, паттерны Ant Design. В контуре заказчика облачные Cursor/Copilot часто недоступны. В этом случае помогают локальные модели в контуре — они немного дороже и слабее, но схема единиц работы и гейтов та же.

Стандартный виджет — генерация -> тесты -> запрос на merge. Менеджер сервисов, конвертеры, КЭП — проектирует и пишет человек, агент помогает с тестами и шаблоном.

Главный результат: 20-40 параллельных задач в песочнице — как 20 разработчиков на простых задачах, но без 40 душных собеседований.

Качество

Агент генерирует Playwright из Gherkin (@smoke) и Vitest из примеров Zod. Человек дописывает пограничные кейсы: границы дат, пересечение долей, отмена черновика. Шардирование Playwright в GitLab CI: набор, который в 2020 шёл ~1 ч 40 мин в Jenkins, укладывается в 15–25 минут при том же покрытии.

Проверка качества обвязки: 20 репрезентативных услуг + регрессионный diff при смене версии модели — merge блокируется как упавший Jenkins.

Масштабирование простых сервисов

Таблица Ant Design, фильтры, 1–3 эндпоинта — агент по шаблону CRUD в монорепозитории. Раньше это делал подрядчик с нуля; сейчас хватит квоты агентов и одного ревьюера.

Что по-прежнему делает человек

За человеком все равно остаются критичные задачи:

  1. Подписание и криптография — браузерные плагины, соответствие требованиям.

  2. Конвертеры в XML и доменные правила с юридическими последствиями.

  3. Утверждение спецификации в соответствие с нормативными документами.

  4. Подписание релиза в прод.

Основной вывод: агент ускоряет набор кода, но не забирает на себя ответственность.

Для наглядности ниже оставил таблицу с отличиями подхода сегодня и 6 лет назад.

Этап

Практика

2020

2026

UI

Ant Design UI-kit

разработчик

агент + каталог UI-kit

Анализ унаследованного кода

ADR

тимлид

агенты -> архитектор

Виджет

hook-form + ленивая подгрузка

разработчик

агент -> ревью -> merge

Серверное состояние

saga → Query

разработчик

агент по шаблону

Заглушки

Express

разработчик

MSW (черновик агента)

E2E

Cypress smoke

разработчик

Playwright @smoke (агент + краевые случаи)

Масштаб

20 разработчиков

найм

рой агентов + оркестратор

Узкое место

мощность и производительность разработки

спецификация / нормативка

Как ИИ меняет структуру затрат

В 2020 профиль бюджета был примерно таким:

  • Разработка — главная статья расходов: 5 человек × 4 месяца на виджеты и CI, и не забываем [6] про расширение команды до 20 человек на финальный рывок.

  • Аналитика — критичный этап, но разработка часто ждала формализованных постановок.

  • QA — сценарии по релизам, автотесты писали разработчики и не всегда успевали до дедлайна.

В 2026 изменились пропорции:

  • Разработка — дешевеет на однотипных единицах работы, так как нужен только оркестратор и квота агентов вместо десяти подрядчиков на три месяца.

    Но самый приятный эффект – ускорение работы. В 2020 на стандартный виджет уходило 2-4 дня разработки. С ИИ срок сокращается до 1-3 часов ревью плюс токены. Это не точные цифры, но порядок уже виден.

  • Аналитика / спецификация — узкое место, но теперь единственное. RAG-база и AST снимают рутину поиска и «с нуля в Word», а агенты помогают собрать корректную постановку на единицу работ. Сверку с нормативкой человек не делегирует. Но есть и минусы: теперь ошибка в спецификации касается не одного человека, а умножается на N агентов.

— Сначала приговор, — потом разбирательство! — вмешалась Королева.

Л. Кэрролл, «Приключения Алисы в Стране чудес»

  • Обвязка — окупается на N-м виджете, но есть постоянные расходы: токены, поддержка проверок при смене моделей, владелец обвязки. В закрытом контуре — железо под локальные модели.

  • QA — дешевле на генерации smoke, но не дешевле на пограничных доменных случаях и приёмке XML/КЭП.

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

Для руководителя разработки KPI смещаются: не «сколько наняли», а «сколько часов аналитики ушло на виджет» и «сколько merge’й прошло без правок по нормативке».

Заключение

С внедрением агентной разработки меняется экономика поставки: разработка перестаёт быть узким горлышком, и на передний план выходят аналитика и качество спецификации. Эффект от искусственного интеллекта [7] приходит, если правильно настроить процесс — спецификации, критерии готовности, песочницу, каталог, UI-kit.

— Ты ошибаешься, милая! Нет ничего на свете, из чего нельзя было бы сделать вывод. Надо только знать, как взяться за дело.

Л. Кэрролл, «Приключения Алисы в Стране чудес»

Если есть вопросы об агентной разработке, задавайте их в комментариях. А если хотите текстом почитать про спецификации, единицы работы агента, проверки качества, обвязки и устройство команды, велкам [8].

Автор: JetHabr

Источник [9]


Сайт-источник BrainTools: https://www.braintools.ru

Путь до страницы источника: https://www.braintools.ru/article/34376

URLs in this post:

[1] обучения: http://www.braintools.ru/article/5125

[2] боль: http://www.braintools.ru/article/9901

[3] ошибки: http://www.braintools.ru/article/4192

[4] поведения: http://www.braintools.ru/article/9372

[5] память: http://www.braintools.ru/article/4140

[6] забываем: http://www.braintools.ru/article/333

[7] интеллекта: http://www.braintools.ru/article/7605

[8] велкам: https://t.me/elboyarin

[9] Источник: https://habr.com/ru/companies/jetinfosystems/articles/1070188/?utm_source=habrahabr&utm_medium=rss&utm_campaign=1070188

www.BrainTools.ru

Rambler's Top100