Архитектура фронтенда. Артем Карачев

Рассказываем про формирование общего архитектурного подхода на фронтенде в СМ Лаб. 00:01:00 Проблемы архитектуры фронтенда • Проблемы архитектуры фронтенда • Вопросы идеальной архитектуры фронтенда 00:02:24 Особенности фронтенда • Фронтенд имеет свои особенности, отличающиеся от серверной архитектуры. • Исторически фронтенд считался несерьезным • Вопросы взаимодействия микрофронтендов 00:03:29 Эпохи развития фронтенда • Проводим аналогию с историей искусства, деля этапы развития фронтенда на эпохи. • Первая эпоха - “мрачное средневековье“, когда фронтенд развивался без четких законов и систем. • Вторая эпоха - “ренессанс“, с появлением библиотек для SPA и фреймворков 00:06:04 Современное состояние фронтенда • Современный фронтенд характеризуется высокой сложностью и множеством подходов и фреймворков. 00:07:23 Принципы программирования • Принципы программирования, такие как “не повторяйся“ и “будь проще“ 00:10:50 Применение паттернов к фронтенду • Использование роутеров, вью, шаблонов и стилей. • Традиционный MVC паттерн: контроллер управляет всем, представление не влияет на модель. • MVP паттерн: создание абстракции представления, использование интерфейсов и методов. 00:13:41 MVVM и LAX подходы • Современные тенденции: принципы чистой архитектуры Роберта Мартина. 00:15:38 Принципы чистой архитектуры KISS, SOLID, DRY. 00:16:47 Доменный слой и контракты 00:20:04 Фиче слайс дизайн • Фиче слайс дизайн: передовой подход к разработке фронтенда. 00:21:03 Слои приложения 00:22:02 Домены и слайсы Реализация фичеслайст подхода 00:24:09 Структура папок Пример использования 00:30:40 Улучшение подхода 00:35:14 Бизнес-логика и абстракции • Бизнес-логика в слоях API и компоузаблов. 00:37:11 Тестирование и компоненты 00:39:01 Вопросы и ответы • Обсуждение вопросов и замечаний по докладу. • Проблемы с навигацией по папкам в больших приложениях. • Важность четкой структуры и иерархии в приложении. 00:44:43Сервисы и абстракции • Обсуждение сервисов и их роли в архитектуре. • Различие между сервисами и компоузаблами. • Реализация сервисов в слоях API и компоузаблов. 00:49:27 Внедрение нового подхода • Вопрос о плавном переходе на новый подход к коду. • Рекомендуется поэтапно внедрять изменения, начиная с описания сущностей. • Сущности должны быть абстрагированы и ограничены в зоне ответственности. 00:50:46 Реализация фич и сервисов • Сущности могут существовать параллельно с текущим кодом. • Логика сущностей должна быть инкапсулирована. • Реализация фич и сервисов должна быть согласована с командой и бизнесом. 00:52:42 Нейминг компонентов • Вопрос о важности правильного именования компонентов. • Пример с кнопкой, которая реализует сложную логику авторизации. • Логика компонента должна быть четко обозначена и понятна. Подходы к реализации фич • Традиционный подход к реализации фич с использованием компонентов. • Второй подход, где бизнес-логика отделена от представления. • Логика компонента не должна быть равна бизнес-логике. Критерии оценки архитектуры • Вопрос о критериях оценки архитектуры, удовлетворяющей требования бизнеса. • Временные трудозатраты и покрытие тест-кейсами как возможные критерии. • Важно убедиться, что принятые решения помогают в достижении целей проекта. Критерии оценки архитектуры • Скорость разработки фич и страниц. • Надежность работы приложения при внесении изменений. • Метрики и количество багов как индикаторы правильности решений. Реакция разработчиков на изменения • Половина разработчиков поддерживает изменения, другая половина нет. • У тех, кто не поддерживает, скорость разработки падает. • Время на разработку может не меняться или даже увеличиваться. Проблемы плохой архитектуры • Внесение изменений в существующее приложение вызывает проблемы. • Высокая взаимосвязанность изменений приводит к неожиданным багам. • Это повод для смены архитектуры и стандартизации подходов. Важность коммуникации в команде • Важно договориться о едином подходе внутри команды. • Даже если кто-то не согласен, нужно найти плюсы в выбранном паттерне. • Плохая коммуникация в команде – отдельная проблема, требующая обсуждения. Заключение • Для успешной разработки продукта важна коммуникация и договоренность об архитектуре. • Все аспекты разработки взаимосвязаны и требуют качественного подхода. #smlab #смлаб #ecommerce #фронтенд #архитектура #it