Веб-разработка
Архитектура крупных веб-приложений
Google держит весь код в одном репозитории. Amazon делает 10 000 A/B тестов в год. Facebook переключает фичи для миллиарда пользователей без деплоя. Это архитектурные решения, которые масштабируют команду, не только код.
- **Vercel + Turborepo:** Next.js, Turbopack, SWC, create-next-app - все в одном монорепо. Изменение в shared пакете автоматически триггерит тесты всех зависимых приложений. Remote Cache шарится между всеми разработчиками.
- **Shopify Polaris:** Design System для всей платформы Shopify. 100+ компонентов в монорепо, Storybook + Chromatic для visual regression. Каждый PR проходит визуальный review перед мерджем.
- **Amazon:** Feature flags + A/B тесты как стандарт разработки. Новая функция Amazon Prime сначала показывается 1% пользователей, затем постепенно расширяется. Kill switch позволяет отключить в течение секунд при проблеме.
Mono Repo
Монорепозиторий - единый git-репозиторий для нескольких проектов (приложения, библиотеки, инструменты). Google хранит весь код в одном монорепо (2 миллиарда строк). Meta использует монорепо для React, Jest, Flow. Vercel, Turborepo, Nx - инструменты для управления JS/TS монорепо. Главное преимущество: атомарные изменения через несколько пакетов и shared tooling.
Turborepo (Vercel) и Nx - два основных инструмента для JS монорепо. Turborepo фокусируется на кешировании task pipeline (build, test, lint). Nx добавляет генераторы кода, граф зависимостей и distributed task execution. pnpm workspaces - стандартный package manager для монорепо.
Главное техническое преимущество Turborepo перед простым pnpm workspaces:
Design System
Design System - коллекция переиспользуемых компонентов, токенов и руководств, обеспечивающих консистентность продукта. Shopify Polaris, IBM Carbon, Atlassian Design System, Material UI - известные примеры. Монорепо - идеальное место для design system: `packages/ui` с компонентами, `packages/tokens` с дизайн-токенами, несколько приложений-потребителей.
Storybook - стандарт для разработки и документации design system компонентов в изоляции. Chromatic (cloud Storybook) добавляет visual regression testing: PR не может смерджиться пока не одобрены все визуальные изменения.
Для чего используется Chromatic в контексте design system?
Feature Flags
Feature flags (feature toggles) - механизм включения/выключения функциональности без деплоя кода. Позволяют делать trunk-based development: весь код мерджится в main, новые фичи скрыты за флагами. Netflix, Facebook, Amazon используют тысячи feature flags одновременно. LaunchDarkly, Unleash, GrowthBook, Flagsmith - популярные решения.
Feature flags решают несколько задач: постепенный rollout (10% -> 50% -> 100% пользователей), kill switch при инциденте (мгновенное отключение без деплоя), canary releases для отдельных регионов/сегментов, trunk-based development без долгоживущих веток.
Trunk-based development с feature flags решает какую проблему?
Ab Testing
A/B тестирование - контролируемый эксперимент: случайная выборка пользователей видит вариант B, остальные - контрольный A. Решения принимаются на основе статистической значимости, не интуиции. Amazon проводит 10 000+ экспериментов в год. Booking.com - 1000+ параллельных тестов. GrowthBook, Optimizely, Statsig - популярные платформы.
Ключевые концепции: Statistical significance (p-value < 0.05), Sample size calculator (минимальный размер выборки для нужного effect size), Novelty effect (временный всплеск после изменения), Interaction effects (два одновременных теста влияют друг на друга). Без понимания статистики A/B тесты приводят к ложным выводам.
Почему ключ рандомизации в A/B тесте должен быть стабильным (например, user.id)?
Ключевые идеи
- **Монорепо + Turborepo:** единый репозиторий для всех проектов с кешированием задач. Атомарные изменения, общий tooling, Remote Cache для команды. pnpm workspaces + Turborepo = стандартный JS стек.
- **Design System в монорепо:** `packages/ui` с компонентами на CVA + Tailwind, `packages/tokens` с дизайн-токенами. Storybook для разработки в изоляции, Chromatic для visual regression testing.
- **Feature flags + A/B тесты:** trunk-based development без долгоживущих веток, постепенный rollout, kill switch. A/B тесты требуют статистической строгости: sample size, p-value, novelty effect.
Связанные темы
Архитектура крупных приложений пересекается с DevOps и фронтенд инструментарием:
- Микрофронтенды — Монорепо с несколькими приложениями - альтернатива микрофронтендам; Module Federation позволяет шарить компоненты design system между независимыми деплоями
- CI/CD пайплайны — Turborepo affected команды (только изменённые пакеты) сокращают время CI; Remote Cache устраняет повторное выполнение уже кешированных задач
- Аналитика и метрики — A/B тесты требуют надёжного event tracking; выбор метрики (primary metric, guardrail metrics) определяет решение об успехе эксперимента
Вопросы для размышления
- При каком размере команды и количестве приложений переход на монорепо начинает окупаться, а при каком polyrepo лучше?
- Как организовать design system токены для поддержки нескольких брендов (white-label) или тёмной темы с минимальным дублированием?
- Какую метрику выбрать primary для A/B теста редизайна страницы оформления заказа: конверсия, средний чек или выручка?