Собираем микромодули

�1

Frontend-разработчик Сбербанк Онлайн

Дмитрий Кузнецов

�2

�3

Презентационный слой

API

�4

Презентационный слойистория про один репозиторий, про одну сборку

📚

�6

�7

Платформенные команды

Прикладные команды

�8

�9

Презентационный слой

• 75 человек • 66 приложений • 15 платформенных библиотек

�10

�11

�12

Server

•Обвязка страниц •Прокси до серверов с бизнес логикой •Вспомогательные функции (работа с сессией, логирование …)

�13

�14

•ECMA-262 редакции EcmaScript 2017

SPA (микромодуль)

�15

SPA (микромодуль)

•ECMA-262 редакции EcmaScript 2017 •Стэк: React/Redux

�16

SPA (микромодуль)

•ECMA-262 редакции EcmaScript 2017 •Стэк: React/Redux •CSS Modules

�17

SPA (микромодуль)

•ECMA-262 редакции EcmaScript 2017 •Стэк: React/Redux •CSS Modules •Eslint

SPA (микромодуль)

•ECMA-262 редакции EcmaScript 2017 •Стэк: React/Redux •CSS Modules •Eslint •Karma+Jasmine / Jest

�18

Архитектура SPA

•Слой данных •Слой отображения •Роутинг

�19

�20

Вендоры:

�21

•axios •bignumber.js •classnames •immutable •lodash •moment •react •react-dom

•react-redux •react-router •react-router-dom •redux •redux-form •redux-thunk •reselect •i18next

Платформенные библиотеки

�22

•lib.ui •lib.app •lib.workflow •sbtsbol-webpack-config •…

Сборка

�23

�24

Сборка

�25

JSX/JS

�26

CSS

CSS Modules

PostCSS

�27

CSS Modules

�28

CSS

БЭМ не спасёт!

Версионирование

�29

CI/CD

�30

Проблема консистентности

�31

Проблема в скорости загрузки

�32

BootstrapРоутинг и загрузка модулей

�34

Роутинг

�35

Загрузка

�36

SуstemJS

Манифест

�37

SSR

�38

HTTP2

�39

�40

Вывод

Спасибо за внимание!

✋