Мультирегиональная госплатформа

Frontend Architect · Lean Solutions · 2022 — н. в.

Новые фичи: копипаст в репозиторий каждого региона → пишутся один раз и выходят во всех регионах

Angular 22
Nx
TypeScript
Tailwind v4
Elf
Transloco
GitLab CI

регионов: портал и админка у каждого: 17
библиотек: 49
моих коммитов: 1 164
моих смёрженных MR: 436
версии Angular: 6 → 22

Задача

Каждый регион был отдельным Angular-проектом, скопированным с предыдущего. Фичу, сделанную для одного региона, приходилось вручную копировать во все остальные. CI/CD не было.

Что я сделал

Перевёл региональные приложения в единый Nx-монорепозиторий: 10+ публичных порталов и админ-панелей на общих библиотеках (ui, ui-widgets, data-access, feature-*) с контролем границ зависимостей
Создал внутреннюю UI-библиотеку и дизайн-систему на токенах Tailwind CSS v4
Настроил GitLab CI с нуля: один пайплайн линтит, тестирует, собирает и деплоит все staging-приложения
Обновил стек с Angular 6 до 22 (signals, standalone-компоненты, новый control flow)

Результаты

кода — в общих библиотеках; каждое региональное приложение — тонкая оболочка (~18 тыс. из ~200 тыс. строк): ~90%
на запуск нового региона: новая оболочка приложения со своими текстами, логотипом и favicon: ~5 мин
автоматический деплой на все staging-приложения; раньше пайплайна не было: ~7 мин

Где живёт кодвсего ~200 тыс. строк

Общие библиотеки: ~90% 10+ оболочек приложений: ~18 тыс. строк

До → после

	До	После
Новая фича	До: копипаст в каждый региональный репозиторий	После: пишется один раз, выходит во всех регионах
Новый регион	До: копия предыдущего проекта	После: ~5 минут: новая оболочка приложения
Деплой на staging	До: пайплайна не было	После: ~7 минут, полностью автоматически
Angular	До: 6	После: 22

Медиа

Приложения собраны из общих библиотек; границы зависимостей контролирует Nx.

Выберите библиотеку ниже

Изменить библиотеку:

Упрощённая схема, не настоящий граф проекта: выберите библиотеку и посмотрите, какие проекты от неё зависят. Изменение в ui или ui-widgets доходит до каждого приложения, поэтому чаще всего пайплайн собирает их все.

Подробнее в блоге

Связаться