Боли проекта frontend

1.

Боли проекта frontend
Выдача врачей/страница врача

2.

Причины:
• Много команд работает с репозиторием
выдачи врачей/страницы врача
• Нет документации
• Новичку приходится постоянно пинговать и
выковыривать инфу у коллег

3.

Управляемые и неуправляемые
компоненты
Разделение data layer от view layer

4.

Управляемые и неуправляемые
компоненты
Why
• Растет с каждой фичей и плохо кастомизируется
• Затрудняет кастомизацию компонента
• Props drilling

5.

Управляемые и неуправляемые
компоненты
What:
• композиция более мелких компонентов
• compound component
• context

6.

Super components
Зачастую такие компоненты появляются в следствии подхода выше

7.

Super components
Why
• Усложняется читаемость
• Увеличивается связанность компонентов
• Затрудняет кастомизацию компонента

8.

Super components
What
• Фабрики
• Продуманная, плоская
композиция компонентов
• Compound components
• Context
• Slots
• Function as a children

9.

Реализация хелперов прямо в компонентах
Геттеры, рендер-функции, нормализация данных

10.

Реализация хелперов прямо в компонентах
Why
• Код начинает шуметь
• Существенно увеличиваем объем кода в компоненте
• Функции могут использовать стейт или множество других переменных
компонента от этого их сложнее читать и поддерживать

11.

Реализация хелперов прямо в компонентах
What
• Выносить локальные хелперы в отдельный файл

12.

Композиция файлов в компоненте/фиче
Куда и как складывать подкомпоненты, типы компонента, хелперы, константы, хуки компонента?

13.

Композиция файлов в компоненте/фиче
Why
• Команд много, людей много из-за этого каждый делает по своему

14.

Композиция файлов в компоненте/фиче
What
• Найти компромисс по структуре
утилит, констант, локальных
хуков и т.д.

15.

Слой API-ручек

16.

Слой API-ручек
Why
• Непонятная структура в папке
• Нормализация данных прямо в компонентах
• Обычно типизация ручек довольно объемная, поэтому непонятно где
типизация для dto, а где для response
• Boilerplate
• Нет обработки ошибок

17.

Реализация хелперов прямо в компонентах
What
Под каждый домен выделяем папку. В ней будут располагаться:
• Код для вызова ручки.
• Типизация ручки - dto + response.
• Утилиты для ручки - форматтеры урла, адаптеры (мапперы).
• Нормальзация данных с бэкенда производиться в самой ручке. Важно
предпоготовить данные для компонентов, а не форматировать данные уже в
самих компонентах.
• Пример api-слоя делал Ваня Волченков в проекте медкарты - EMedCard
Web

18.

Реализация хелперов прямо в компонентах
What
Под каждый домен выделяем папку:
• Код для вызова ручки.
• Типизация ручки - dto + response.
• Утилиты для ручки - форматтеры урла, адаптеры (мапперы).
• Нормальзация данных с бэкенда производиться в самой ручке. Важно
предпоготовить данные для компонентов, а не форматировать данные уже в
самих компонентах.
• Пример api-слоя делал Ваня Волченков в проекте медкарты - EMedCard
Web

19.

Services/utils/helpers/libs
А куда класть тот или иной хелпер?
Why
• Непонятна текущая структура папки services

20.

Services/utils/helpers/libs
What
• client - только для клиентской части. Возможно стоит сюда складывать
специфичные для проекта сервисы (promocode.ts, recentDoctors.ts,
price.ts, sso.ts)
• server - хелперы специфичные для сервера (logger для node.js, microdata)
и адаптеры для formatJson (сейчас два огромных адаптера).
• shared - код "внутренних" библиотек. Никакой конкретной бизнес логики,
максимально универсальный код - бери и паблишь в нпм (arrays.ts,
regexp.ts, cookie.ts, dates.ts)
• Общие хуки складываются в отдельную директорию

21.

Абстрактные type-alias для более ясного описания типов интерфейсов.
Как более декларативно описывать интерфейсы?
Why
What

22.

Остальные пункты:
• Взаимодействие с web-storage
• События аналитики
• useEffect в компоненте = баг
• Отмена запросов
• Отсутствие какой-либо обработки ошибок в запросах
• Боли с обновление компонентов ДЗ/npm пакетов - дублирование
• Отказ от baseUi/pwa
• Эксперименты как заводим, где храним, как используем, как удаляем и т.д.
• Возможно есть смысл делить выдачу врачей и страницу врача на два отдельных проекта
• fsd?
• Разделение типизации format.json
• Один стор для выдачи и для страницы врача, для выдачи грузим стор для страницы врача и наоборот
• Использование js вместо css. Избавиться от useMediaQuery

23.

Нужен компромисс всех команд