Frontend-ASIS-TOBE

1.

FRONTEND STANDARDIZATION
Свой стек: AS-IS → TO-BE
Краткая карта, где мы сейчас и к какому общему контракту сводим frontend, publicfrontend и ui-kit.
Источник: план стандартизации фронтенда

2.

КОНТЕКСТ
Три репозитория, один стек
frontend
public-frontend
ui-kit
Nuxt 3 · личный кабинет
Nuxt 3 · публичный сайт
Vite library · Storybook · Vitest
Pinia · Sentry Vue · Vitest уже есть
ESLint 9 · Prettier 3 · Stylelint ·
Husky
lint смотрит в несуществующий
vue-project
Sentry Vue + Node, analyze
type-check, не typecheck
ESLint 8 / Prettier 2

3.

AS-IS
Сейчас стандарты живут в проектах, не между ними
frontend
public-frontend
ui-kit
Lint / format
ESLint 8, Prettier 2, нет lint-скрипта
ESLint 9, Prettier 3, Stylelint, Husky
сломанный lint, свой Prettier
Observability
Sentry точечно, auth breadcrumbs
Sentry + analytics performance
не применимо
Perf / tests
Vitest есть, budget нет, e2e нет
analyze есть, unit почти нет
stories + specs, нет package budget
State
крупные tour / auth stores
крупные SERP / Checkout stores
без Pinia — так и должно быть
A11y
точечно, есть tabindex="1"
точечные хорошие паттерны
native inputs, нет a11y gates
Docs
нет живой карты доменов
нет общего контракта команд
нет architecture overview

4.

TO-BE
Один контракт, разные пресеты
AS-IS
TO-BE
Одинаковые проблемы решаются по-разному
CI и локальные команды несовместимы
Общий минимум: lint, format, typecheck, test,
budget
Качество держится на памяти команды
Nuxt-пресет для apps, Vite-пресет для ui-kit
Стандарты в DoD: Sentry, state, a11y, tests

5.

01 · LINTERS
Сначала один язык форматирования
AS-IS
TO-BE
Prettier 2 vs 3, разные semi / printWidth
Prettier 3 + общие опции во всех репо
ESLint 8 legacy vs ESLint 9 flat
ESLint 9: Nuxt preset / Vue+Vite preset
Stylelint только в public-frontend
Одинаковые скрипты: lint, lint:fix, format,
typecheck
lint в ui-kit чинит несуществующую папку
Потом shared @ytme/*-config

6.

02 · OBSERVABILITY
Sentry — единственный техканал
AS-IS
TO-BE
Разный профиль Sentry в двух apps
API / perf частично уходят в analytics
Общий sentryLogger: error, message, breadcrumb,
span
console и ручной capture рядом
Одинаковые tags, fingerprints, PII sanitization
Web Vitals и API duration — в Sentry, не в GTM

7.

03 · PERFORMANCE & TESTS
Сначала baseline, потом ворота
AS-IS
TO-BE
frontend: нет analyze и e2e
Apps: route budget + smoke e2e на critical flows
public-frontend: analyze есть, unit почти нет
ui-kit: story/spec discipline + package/CSS budget
ui-kit: stories/specs есть, размера пакета нет
CI блокирует только новые регрессии

8.

04 · STATE
Pinia не для всего
AS-IS
TO-BE
Крупные stores смешивают API, формы, UI, route,
analytics
Таксономия: server / domain / form / route / ui /
persisted
SERP и tour filters: store и URL рассинхрон
Pinia — для shared/domain; ui-kit и локальные
модалки — нет
URL — source of truth для shareable фильтров

9.

05 · ACCESSIBILITY
A11y входит в Definition of Done
AS-IS
TO-BE
Нет axe / Storybook a11y / eslint-a11y
WCAG 2.1 AA как ориентир, native HTML first
Хорошие паттерны точечные, не системные
ui-kit primitives с контрактом: label, focus, Escape
Риск: custom tables, tabindex="1", модалки
Сначала report-only, потом block новых critical

10.

06 · DOCS
Короткий живой документ в каждом репо
AS-IS
TO-BE
Домены и ownership в головах
FRONTEND_ARCHITECTURE.md + карта доменов
Новая фича = поиск по папкам
README у крупных областей: tour, SERP, Checkout
Как добавить страницу / фичу без хаоса

11.

КАК КАТИМ
Один и тот же ритм на каждый топик
1
2
3
Короткий стандарт и PR
checklist
Выровнять интерфейс:
скрипты, wrapper, taxonomy
Baseline → warning в MR →
block только новых
регрессий
Не чиним исторический долг одним PR. Сначала общий язык, потом ворота.

12.

ГОТОВНОСТЬ
Стек стандартизирован, когда
Во всех трёх репо одинаковые команды и понятный пресет
Новые ошибки, стейт, компоненты и зависимости проходят checklist
Sentry-события не дублируются и без PII
Apps имеют unit + smoke e2e; ui-kit — story/spec + package budget
CI не падает из-за старого долга, но ловит новые регрессии