Alexey Bondarenko
Entrepreneur, Frontend Developer and Frontend Architect, Team manager, Consultant (100$/hour+)
Frontend Architecture
На какие вопросы нужно ответить
перед тем, как начать фронтенд проект
Алексей Бондаренко
Занимаюсь разработкой 7 лет.
Frontend Architect и Team Lead в нескольких проектах
Руководил командами на React Js, Angular JS и Vue JS
Кто такой фронтенд девелопер?
PSD to HTML ?= FE
Дизайн
+
АПИ
+
Бизнес требования
=
FE проект
Дизайн
- Как работаем с исходником/ами дизайна?
- Как экспортируем ассеты?
- Как работаем с изменением в дизайне?
API
- Где смотрим документацию по АПИ?
- Есть ли тестовая среда?
- Как сделана авторизация?
Бизнес требования
-
SEO?
-
Supportable browsers?
-
White Labels?
-
Offline first?
-
Localization?
-
Analytic events?
-
Security? (e.g. credit card info)
Frontend Architecture
https://github.com/micahgodbolt/front-end-architecture
Какой тип приложения?
MPA vs SPA
Какие у нас есть разработчики?
Определили стек технологий
Структура проекта
Роутинг
Как называем?
Кто резолвит?
Стилизация
Нужны ли темы?
Производительность?
| Vue | React | React |
|---|---|---|
| vue scoped styles | jss | css modules |
| vue-style-loader | jss-loader | isomorphic style loader |
Локализация
Степень локализации?
Кто будет переводить?
Технические вопросы
Где храним и как подгружаем?
Один файл или много файлов?
Как собираем строки для перевода?
| React or Vue |
|---|
| i18next |
| webpack |
| i18next-po-loader |
| i18next-extract-gettext |
Данные
Как запрашиваем?
Как храним?
Как используем?
| Vue JS | Vue JS | React | React |
|---|---|---|---|
| vuex | vue-apollo | redux | react-apollo |
| adiox | redux-api-middleware | ||
| normalizr | normalizr | ||
| redial react-router-redial |
Формы
Как управляем состоянием?
Как валидируем?
| Vue | React | Express JS |
|---|---|---|
| vue | redux, redux-form | express js |
| vee-validate | react-nebo15-validate | validate.js |
Аналитика
Сколько сервисов аналитики?
Какие события собираем?
Как собираем события?
Как отправляем?
| Vue | React | Express JS |
|---|---|---|
| vue-events | react-nebo15-events (my own) | jquery |
Интеграции
Как подключать сервисы?
Куда выносить конфигурации?
Релизы
Как упаковывать?
Где хранить?
Как конфигурировать релиз артефакт?
| SPA in Tarball | SPA in Docker | MPA in Docker |
|---|---|---|
| tarball archive | docker image | docker image |
| Github release | Docker hub | Docker hub |
| config.js | ENV + config.js | ENV |
Деплой
Как обновляем версию?
Как откатываем?
| Tarball | Docker |
|---|---|
| Nginx | Kubernetes |
| Bash | helm / kubectl |
Тестирование
Что покрываем?
Как покрываем?
| Vue | React |
|---|---|
| karma | jest |
| selenium | selenium/howitzer |
| storybook-chrome-screenshot | storybook-chrome-screenshot |
Документирование
Что описываем?
Как и где описываем?
Рабочие процессы
VCS
Task tracker
Что в итоге?
Title Text
Код ревью
Что смотрим?
Автоматизируем?
Вопросы
Алексей Бондаренко
medium.com/@bondalex
fb.com/bondalexey
github.com/alexeybondarenko
Frontend Architecture
By Alexey Bondarenko