Программируем с Козулей

Козуля рассказывал про фронтэнд Финама.

Стек

Очень core-части пишутся на Java, гоняются в GWT и closure compiler. Потому что кроссплатформенность. Protobuf, TypeScript.

Архитектура

Разбито по модулям: ПАПКА (господи, я же просил) со всем, что относится к модулю (иконки, хелперы, etc).

Сначала пытались класть по src/{components, reducers, actions}, но решили группировать по модулям src/{module}/{reducers components actions helpers}.

Логично — так намного удобнее работать, сам в какой-то момент пришёл к этому.

Нейминг

Сначала было Form, потом SuperFormOfSubmitUserData, но затем из-за модульной архитектуры (см. выше) откатились к Form — когда импортишь форму из какого-то модуля, всё и так семантично становится.

Про архитектуру, pt. 2

В проекте есть куча мапперов, куча форматтеров, коннекторов. Всё в модулях.

Маппер: функция преобразующая одну структуру в другую

Форматтер: форматирует значение по правилам

Коннекторы: HoC, в который пробрасываются данные с сервера. Абстрагирует работу с сервером от рендера

Датафлоу

Источник данных → коннектор → маппер → форматтер → интерфейс. Из интерфейса данные отправляются в источник данных через редакс.

Способы оптимизации рендера

Самые тупые: sCU, PureComponent

Поумнее: recompose, reselect

Если не помогло: выпилить Редакс

Если и это не помогло: выпилить Реакт

Переходите на ХТМЛ! Мораль: Редакс или Реакт не всегда нужны для каких-то вещей, иногда можно тултип сделать через атрибут title.

В Редаксе хранят данные, которые отправят в локалсторейдж, чисто данные. Интерфейсные вещи хранятся в локальном стейте (открыто/закрыто меню, показан тултип, etc).

Лайфсайкл вывода продукта

Выходят много спецпроектов, много релизов, поэтому есть четкий флоу.

1. прототип — create-react-app, все компоненты в одной куче, плюс material-ui

2. релиз — вставляют редакс потому что нужно систематизировать (минутка рекламы: редакс )

3. рефакторинг — бьют на модули, разбивают на подкомпоненты, етц

4. оптимизация — кладут по пакетам бизнес-логику, помогает jFrog Artifactory, самое сложное — ридми и ченджлог

В итоге когда всё в пакетах, то разработка продукта превращается в конфигурацию и шаблон.