Нововведения_фронтенд_Чесноков

1.

Нововведения
во фронтендразработке
Чесноков Анатолий | Фронтенд Техлид

2.

Повестка
UI Kit
Единая дизайн-система и библиотека компонентов
CLI
Scaffold проектов и кодогенерация
Результаты
Унификация и ускорение разработки
2

3.

Проблемы сегодня
• Разрозненные стили
• Разнородный стек
• Каждый проект выглядит поразному, нет единого визуального
языка
• Проекты на разных версиях
библиотек и подходах
• Дублирование кода
• Одни и те же компоненты пишутся
заново в каждом проекте
• Ручная настройка
• Новый проект = часы на настройку
сборки, линтеров, CI/CD
• Отсутствие стандартов
• Нет единых правил по архитектуре
и структуре
• Сложный onboarding
• Новым разработчикам трудно
включиться в работу

4.

UI Kit
4

5.

UI Kit — Что это
• Библиотека React-компонентов — обёртки над MUI с фирменной стилизацией, типизацией и единым
API. Проектируется на базе дизайн-системы из Figma.
• Распространение: NPM-пакет, подключается как зависимость в любой проект. Версионирование по
semver.
• Связь с дизайном: токены, цвета, типографика и отступы синхронизированы с Figma. Дизайнеры и
разработчики работают в едином поле.
5

6. Заголовок

UI Kit — Компоненты
• Button / IconButton
• Sidebar / AppBar / Breadcrumbs
• TextField / Select / Autocomplete
• Snackbar / Alert / Toast
• DataGrid / Table
• FileUpload / Dropzone
• Dialog / Drawer / Modal
• Chip / Badge / Avatar
• Tabs / Stepper / Accordion
• Skeleton / Loader / Progress
• DatePicker / TimePicker
• Theme / Tokens / Typography

7. Заголовок

CLI
7

8. Заголовок

CLI — Возможности
• Командный инструмент для быстрого создания новых приложений с преднастроенным стеком и
кодогенерацией API-клиентов из OpenAPI/Swagger спецификаций.
• Scaffold проекта
• Кодогенерация API
• React + TypeScript + Vite
• Вход: OpenAPI/Swagger спека
• TanStack (Query, Table, Router)
• Выход: типизированный TS-клиент
• MUI + UI Kit из коробки
• Хуки TanStack Query из коробки
• ESLint, Prettier, Husky
• Автоматическая синхронизация
• CI/CD конфигурация
• Нулевой ручной код
8

9. Заголовок

Что это даёт
• Унификация — все проекты на едином
стеке, с общими компонентами и
архитектурой.
• Скорость старта — новый проект за
минуты, не часы. Всё преднастроено.
• Меньше ошибок — типизированный APIклиент исключает ручные ошибки при
интеграции.
• Простой onboarding — новый разработчик
сразу в знакомой среде на любом проекте.
9

10. Заголовок

Спасибо за внимание!
Вопросы и ответы
10