Как мы разрабатываем новый фронтенд / Филипп Нехаев...
-
Upload
ontico -
Category
Engineering
-
view
488 -
download
3
Transcript of Как мы разрабатываем новый фронтенд / Филипп Нехаев...
![Page 1: Как мы разрабатываем новый фронтенд / Филипп Нехаев (Tinkoff.ru)](https://reader030.fdocuments.net/reader030/viewer/2022013113/586f8f711a28ab54768b7595/html5/thumbnails/1.jpg)
Как мы разрабатываемновый фронтендTinkoff.ruФилипп НехаевАрхитектор веб-интерфейсовТинькофф банк
![Page 2: Как мы разрабатываем новый фронтенд / Филипп Нехаев (Tinkoff.ru)](https://reader030.fdocuments.net/reader030/viewer/2022013113/586f8f711a28ab54768b7595/html5/thumbnails/2.jpg)
2
1. О наших задачах
2. Обзор стэков
3. Переиспользование
4. Оптимизация
5. Сборка и деплой
![Page 3: Как мы разрабатываем новый фронтенд / Филипп Нехаев (Tinkoff.ru)](https://reader030.fdocuments.net/reader030/viewer/2022013113/586f8f711a28ab54768b7595/html5/thumbnails/3.jpg)
3
Какие задачи решаем
![Page 4: Как мы разрабатываем новый фронтенд / Филипп Нехаев (Tinkoff.ru)](https://reader030.fdocuments.net/reader030/viewer/2022013113/586f8f711a28ab54768b7595/html5/thumbnails/4.jpg)
Сервер Клиент
2011 сайти Интернет-Банк Java/Spring, JSP, Maven JS, jQuery, Handlebars,
Backbone, Maven/Grunt
Что было раньше
4
![Page 5: Как мы разрабатываем новый фронтенд / Филипп Нехаев (Tinkoff.ru)](https://reader030.fdocuments.net/reader030/viewer/2022013113/586f8f711a28ab54768b7595/html5/thumbnails/5.jpg)
5
• Два UI-слоя Сервер
Java JSP
Клиент
JSHandlebars
Что было раньше
![Page 6: Как мы разрабатываем новый фронтенд / Филипп Нехаев (Tinkoff.ru)](https://reader030.fdocuments.net/reader030/viewer/2022013113/586f8f711a28ab54768b7595/html5/thumbnails/6.jpg)
6
• Два UI-слоя
• Дублирование логикиСервер
Java JSP
Клиент
JSHandlebars
Что было раньше
![Page 7: Как мы разрабатываем новый фронтенд / Филипп Нехаев (Tinkoff.ru)](https://reader030.fdocuments.net/reader030/viewer/2022013113/586f8f711a28ab54768b7595/html5/thumbnails/7.jpg)
7
• Два UI-слоя
• Дублирование логики
• Две группы разработчиков
Сервер
Java JSP
Клиент
JSHandlebars
Что было раньше
![Page 8: Как мы разрабатываем новый фронтенд / Филипп Нехаев (Tinkoff.ru)](https://reader030.fdocuments.net/reader030/viewer/2022013113/586f8f711a28ab54768b7595/html5/thumbnails/8.jpg)
8
• Два UI-слоя
• Дублирование логики
• Две группы разработчиков
• Дорогая поддержка
Сервер
Java JSP
Клиент
JSHandlebars
Что было раньше
![Page 9: Как мы разрабатываем новый фронтенд / Филипп Нехаев (Tinkoff.ru)](https://reader030.fdocuments.net/reader030/viewer/2022013113/586f8f711a28ab54768b7595/html5/thumbnails/9.jpg)
Сервер Клиент
2011 сайти Интернет-Банк Java/Spring, JSP, Maven JS, jQuery, Handlebars,
Backbone, Maven/Grunt
2014 Кошелек JS, Backbone, Handlebars, Bower/Grunt
Что было раньше
9
![Page 10: Как мы разрабатываем новый фронтенд / Филипп Нехаев (Tinkoff.ru)](https://reader030.fdocuments.net/reader030/viewer/2022013113/586f8f711a28ab54768b7595/html5/thumbnails/10.jpg)
Сервер Клиент
2011 сайти Интернет-Банк Java/Spring, JSP, Maven JS, jQuery, Handlebars,
Backbone, Maven/Grunt
2014 Кошелек JS, Backbone, Handlebars, Bower/Grunt
2015 Интернет-Банк v5 JS, Angular, Bower/Gulp
Что было раньше
10
![Page 11: Как мы разрабатываем новый фронтенд / Филипп Нехаев (Tinkoff.ru)](https://reader030.fdocuments.net/reader030/viewer/2022013113/586f8f711a28ab54768b7595/html5/thumbnails/11.jpg)
11
Клиент
JS• Сложно решать задачи SEO и SMM
Что было раньше
![Page 12: Как мы разрабатываем новый фронтенд / Филипп Нехаев (Tinkoff.ru)](https://reader030.fdocuments.net/reader030/viewer/2022013113/586f8f711a28ab54768b7595/html5/thumbnails/12.jpg)
12
Универсальное приложение
![Page 13: Как мы разрабатываем новый фронтенд / Филипп Нехаев (Tinkoff.ru)](https://reader030.fdocuments.net/reader030/viewer/2022013113/586f8f711a28ab54768b7595/html5/thumbnails/13.jpg)
Сервер Клиент
2016 Сайт, Интернет-Банк, Кошелек, Брокеры, 🔜 JS, React, Flux, NPM/Webpack
🏎 Что есть сейчас
13
![Page 14: Как мы разрабатываем новый фронтенд / Филипп Нехаев (Tinkoff.ru)](https://reader030.fdocuments.net/reader030/viewer/2022013113/586f8f711a28ab54768b7595/html5/thumbnails/14.jpg)
14
• SEO и SMMСервер
JS
Клиент
🏎 Что есть сейчас
![Page 15: Как мы разрабатываем новый фронтенд / Филипп Нехаев (Tinkoff.ru)](https://reader030.fdocuments.net/reader030/viewer/2022013113/586f8f711a28ab54768b7595/html5/thumbnails/15.jpg)
15
• SEO и SMM
• Переиспользование 99% кодаСервер
JS
Клиент
🏎 Что есть сейчас
![Page 16: Как мы разрабатываем новый фронтенд / Филипп Нехаев (Tinkoff.ru)](https://reader030.fdocuments.net/reader030/viewer/2022013113/586f8f711a28ab54768b7595/html5/thumbnails/16.jpg)
16
• SEO и SMM
• Переиспользование 99% кода
• Одна группа разработчиков
Сервер
JS
Клиент
🏎 Что есть сейчас
![Page 17: Как мы разрабатываем новый фронтенд / Филипп Нехаев (Tinkoff.ru)](https://reader030.fdocuments.net/reader030/viewer/2022013113/586f8f711a28ab54768b7595/html5/thumbnails/17.jpg)
17
• SEO и SMM
• Переиспользование 99% кода
• Одна группа разработчиков
• Скорость разработки
Сервер
JS
Клиент
🏎 Что есть сейчас
![Page 18: Как мы разрабатываем новый фронтенд / Филипп Нехаев (Tinkoff.ru)](https://reader030.fdocuments.net/reader030/viewer/2022013113/586f8f711a28ab54768b7595/html5/thumbnails/18.jpg)
18
• SEO и SMM
• Переиспользование 99% кода
• Одна группа разработчиков
• Скорость разработки
• Нет монолитности
Сервер
JS
Клиент
🏎 Что есть сейчас
![Page 19: Как мы разрабатываем новый фронтенд / Филипп Нехаев (Tinkoff.ru)](https://reader030.fdocuments.net/reader030/viewer/2022013113/586f8f711a28ab54768b7595/html5/thumbnails/19.jpg)
19
• Реализация Flux
Fluxible
![Page 20: Как мы разрабатываем новый фронтенд / Филипп Нехаев (Tinkoff.ru)](https://reader030.fdocuments.net/reader030/viewer/2022013113/586f8f711a28ab54768b7595/html5/thumbnails/20.jpg)
20
• Реализация Flux
• Используем только Routr и Dispatchr
Fluxible
![Page 21: Как мы разрабатываем новый фронтенд / Филипп Нехаев (Tinkoff.ru)](https://reader030.fdocuments.net/reader030/viewer/2022013113/586f8f711a28ab54768b7595/html5/thumbnails/21.jpg)
21
Сервисы Действия Сторы Компоненты
Доступ к API UI логика
Рендер
Бизнес логика
Распределение по слоям
![Page 22: Как мы разрабатываем новый фронтенд / Филипп Нехаев (Tinkoff.ru)](https://reader030.fdocuments.net/reader030/viewer/2022013113/586f8f711a28ab54768b7595/html5/thumbnails/22.jpg)
22
🌠 Жизнь приложения
Node.js Браузер Интеракция
• Роутинг на подприложения • Поиск редиректов • Независимый контекст • Сериализация состояния
• Создание контекста • Десериализация состояния
• Циклы взаимодействия
![Page 23: Как мы разрабатываем новый фронтенд / Филипп Нехаев (Tinkoff.ru)](https://reader030.fdocuments.net/reader030/viewer/2022013113/586f8f711a28ab54768b7595/html5/thumbnails/23.jpg)
23
Контекст на сервере
![Page 24: Как мы разрабатываем новый фронтенд / Филипп Нехаев (Tinkoff.ru)](https://reader030.fdocuments.net/reader030/viewer/2022013113/586f8f711a28ab54768b7595/html5/thumbnails/24.jpg)
Прогрессивная загрузка
24
![Page 25: Как мы разрабатываем новый фронтенд / Филипп Нехаев (Tinkoff.ru)](https://reader030.fdocuments.net/reader030/viewer/2022013113/586f8f711a28ab54768b7595/html5/thumbnails/25.jpg)
25
![Page 26: Как мы разрабатываем новый фронтенд / Филипп Нехаев (Tinkoff.ru)](https://reader030.fdocuments.net/reader030/viewer/2022013113/586f8f711a28ab54768b7595/html5/thumbnails/26.jpg)
26
![Page 27: Как мы разрабатываем новый фронтенд / Филипп Нехаев (Tinkoff.ru)](https://reader030.fdocuments.net/reader030/viewer/2022013113/586f8f711a28ab54768b7595/html5/thumbnails/27.jpg)
27
import { ACCOUNT_LIST } from '../actions'; import { CLIENT } from '../roles'; accountList.isServer = true; accountList.requiredRoles = [CLIENT];function accountList(context) { return context.service('account/list') .then(payload => context.dispatch(ACCOUNT_LIST, payload));} export default accountList;
Action creator
![Page 28: Как мы разрабатываем новый фронтенд / Филипп Нехаев (Tinkoff.ru)](https://reader030.fdocuments.net/reader030/viewer/2022013113/586f8f711a28ab54768b7595/html5/thumbnails/28.jpg)
28
Переиспользуемые компоненты
![Page 29: Как мы разрабатываем новый фронтенд / Филипп Нехаев (Tinkoff.ru)](https://reader030.fdocuments.net/reader030/viewer/2022013113/586f8f711a28ab54768b7595/html5/thumbnails/29.jpg)
29
Коннектор Чистый компонент
Получают данные из сторов Получают данные из props
Передают данные в чистый компонент через props Рендерит данные в HTML
Обрабатывают callbacks, вызывают действия
Обрабатывают DOM-события, вызывают callbacks
Переиспользуемые компоненты
![Page 30: Как мы разрабатываем новый фронтенд / Филипп Нехаев (Tinkoff.ru)](https://reader030.fdocuments.net/reader030/viewer/2022013113/586f8f711a28ab54768b7595/html5/thumbnails/30.jpg)
30
import { LogoPure } from './LogoPure.jsx'; const UILogo = connect( ['config', 'brands'], ({ brands, config: { brandsBasePath } }) => ({ brands, brandsBasePath }) )(LogoPure);export default UILogo;
Компонент коннектор
![Page 31: Как мы разрабатываем новый фронтенд / Филипп Нехаев (Tinkoff.ru)](https://reader030.fdocuments.net/reader030/viewer/2022013113/586f8f711a28ab54768b7595/html5/thumbnails/31.jpg)
31
Переиспользуемые компоненты
Higher-order Components
![Page 32: Как мы разрабатываем новый фронтенд / Филипп Нехаев (Tinkoff.ru)](https://reader030.fdocuments.net/reader030/viewer/2022013113/586f8f711a28ab54768b7595/html5/thumbnails/32.jpg)
32
⏱ Оптимизация
![Page 33: Как мы разрабатываем новый фронтенд / Филипп Нехаев (Tinkoff.ru)](https://reader030.fdocuments.net/reader030/viewer/2022013113/586f8f711a28ab54768b7595/html5/thumbnails/33.jpg)
33
⏱ Оптимизация на клиентеpure-render
![Page 34: Как мы разрабатываем новый фронтенд / Филипп Нехаев (Tinkoff.ru)](https://reader030.fdocuments.net/reader030/viewer/2022013113/586f8f711a28ab54768b7595/html5/thumbnails/34.jpg)
34
⏱ Оптимизация на клиентеreact-perf
![Page 35: Как мы разрабатываем новый фронтенд / Филипп Нехаев (Tinkoff.ru)](https://reader030.fdocuments.net/reader030/viewer/2022013113/586f8f711a28ab54768b7595/html5/thumbnails/35.jpg)
35
⏱ Оптимизация на клиентеrender-logger
![Page 36: Как мы разрабатываем новый фронтенд / Филипп Нехаев (Tinkoff.ru)](https://reader030.fdocuments.net/reader030/viewer/2022013113/586f8f711a28ab54768b7595/html5/thumbnails/36.jpg)
36
• jsx-no-bind
⏱ Оптимизация на клиенте
![Page 37: Как мы разрабатываем новый фронтенд / Филипп Нехаев (Tinkoff.ru)](https://reader030.fdocuments.net/reader030/viewer/2022013113/586f8f711a28ab54768b7595/html5/thumbnails/37.jpg)
37
• jsx-no-bind
• batched updates
⏱ Оптимизация на клиенте
![Page 38: Как мы разрабатываем новый фронтенд / Филипп Нехаев (Tinkoff.ru)](https://reader030.fdocuments.net/reader030/viewer/2022013113/586f8f711a28ab54768b7595/html5/thumbnails/38.jpg)
38
⏱ Оптимизация на клиентеВизуальное ускорение
![Page 39: Как мы разрабатываем новый фронтенд / Филипп Нехаев (Tinkoff.ru)](https://reader030.fdocuments.net/reader030/viewer/2022013113/586f8f711a28ab54768b7595/html5/thumbnails/39.jpg)
39
⏱ Оптимизация на клиентеВизуальное ускорение
![Page 40: Как мы разрабатываем новый фронтенд / Филипп Нехаев (Tinkoff.ru)](https://reader030.fdocuments.net/reader030/viewer/2022013113/586f8f711a28ab54768b7595/html5/thumbnails/40.jpg)
40
⏱ Оптимизация на сервере
• ES6 Class, NODE_ENV=production – 4x ускорение
![Page 41: Как мы разрабатываем новый фронтенд / Филипп Нехаев (Tinkoff.ru)](https://reader030.fdocuments.net/reader030/viewer/2022013113/586f8f711a28ab54768b7595/html5/thumbnails/41.jpg)
41
⏱ Оптимизация на сервере
• ES6 Class, NODE_ENV=production – 4x ускорение
• Minified React – +2%
![Page 42: Как мы разрабатываем новый фронтенд / Филипп Нехаев (Tinkoff.ru)](https://reader030.fdocuments.net/reader030/viewer/2022013113/586f8f711a28ab54768b7595/html5/thumbnails/42.jpg)
42
⏱ Оптимизация на сервере
• ES6 Class, NODE_ENV=production – 4x ускорение
• Minified React – +2%
• Babel transforms (constant & inline elements) – +10%
![Page 43: Как мы разрабатываем новый фронтенд / Филипп Нехаев (Tinkoff.ru)](https://reader030.fdocuments.net/reader030/viewer/2022013113/586f8f711a28ab54768b7595/html5/thumbnails/43.jpg)
43
⏱ Оптимизация на сервере
• ES6 Class, NODE_ENV=production – 4x ускорение
• Minified React – +2%
• Babel transforms (constant & inline elements) – +10%
• stateless functions – +45%
![Page 44: Как мы разрабатываем новый фронтенд / Филипп Нехаев (Tinkoff.ru)](https://reader030.fdocuments.net/reader030/viewer/2022013113/586f8f711a28ab54768b7595/html5/thumbnails/44.jpg)
44
⏱ Оптимизация на сервере
• ES6 Class, NODE_ENV=production – 4x ускорение
• Minified React – +2%
• Babel transforms (constant & inline elements) – +10%
• stateless functions – +45%
• react-dom-stream – +55%
![Page 45: Как мы разрабатываем новый фронтенд / Филипп Нехаев (Tinkoff.ru)](https://reader030.fdocuments.net/reader030/viewer/2022013113/586f8f711a28ab54768b7595/html5/thumbnails/45.jpg)
45
• Кэширование на уровне страницы
⏱ Оптимизация на сервере
![Page 46: Как мы разрабатываем новый фронтенд / Филипп Нехаев (Tinkoff.ru)](https://reader030.fdocuments.net/reader030/viewer/2022013113/586f8f711a28ab54768b7595/html5/thumbnails/46.jpg)
46
• Кэширование на уровне страницы
• Без sensitive данных
⏱ Оптимизация на сервере
![Page 47: Как мы разрабатываем новый фронтенд / Филипп Нехаев (Tinkoff.ru)](https://reader030.fdocuments.net/reader030/viewer/2022013113/586f8f711a28ab54768b7595/html5/thumbnails/47.jpg)
47
• nginx
Кэш
![Page 48: Как мы разрабатываем новый фронтенд / Филипп Нехаев (Tinkoff.ru)](https://reader030.fdocuments.net/reader030/viewer/2022013113/586f8f711a28ab54768b7595/html5/thumbnails/48.jpg)
48
• nginx
• express-cache-on-demand
Кэш
![Page 49: Как мы разрабатываем новый фронтенд / Филипп Нехаев (Tinkoff.ru)](https://reader030.fdocuments.net/reader030/viewer/2022013113/586f8f711a28ab54768b7595/html5/thumbnails/49.jpg)
49
• nginx
• express-cache-on-demand
• lru-cache
Кэш
![Page 50: Как мы разрабатываем новый фронтенд / Филипп Нехаев (Tinkoff.ru)](https://reader030.fdocuments.net/reader030/viewer/2022013113/586f8f711a28ab54768b7595/html5/thumbnails/50.jpg)
50
Кэш
![Page 51: Как мы разрабатываем новый фронтенд / Филипп Нехаев (Tinkoff.ru)](https://reader030.fdocuments.net/reader030/viewer/2022013113/586f8f711a28ab54768b7595/html5/thumbnails/51.jpg)
51
• Для сервера и клиента
🏢 Сборка
![Page 52: Как мы разрабатываем новый фронтенд / Филипп Нехаев (Tinkoff.ru)](https://reader030.fdocuments.net/reader030/viewer/2022013113/586f8f711a28ab54768b7595/html5/thumbnails/52.jpg)
52
• Для сервера и клиента
• Без переменных окружения
🏢 Сборка
![Page 53: Как мы разрабатываем новый фронтенд / Филипп Нехаев (Tinkoff.ru)](https://reader030.fdocuments.net/reader030/viewer/2022013113/586f8f711a28ab54768b7595/html5/thumbnails/53.jpg)
53
• PM2> pm2 startOrGracefulReload processes.json
🌋 Деплой
![Page 54: Как мы разрабатываем новый фронтенд / Филипп Нехаев (Tinkoff.ru)](https://reader030.fdocuments.net/reader030/viewer/2022013113/586f8f711a28ab54768b7595/html5/thumbnails/54.jpg)
54
• PM2> pm2 startOrGracefulReload processes.json
• Каждый экземпляр на отдельном портуPORT: process.env.PORT + process.env.NODE_APP_INSTANCE
🌋 Деплой
![Page 55: Как мы разрабатываем новый фронтенд / Филипп Нехаев (Tinkoff.ru)](https://reader030.fdocuments.net/reader030/viewer/2022013113/586f8f711a28ab54768b7595/html5/thumbnails/55.jpg)
55
🌋 Деплой
NGINX
Node.js Cluster
Node.js Cluster
NGINX
App
App
App
App
App
App
App
App
![Page 56: Как мы разрабатываем новый фронтенд / Филипп Нехаев (Tinkoff.ru)](https://reader030.fdocuments.net/reader030/viewer/2022013113/586f8f711a28ab54768b7595/html5/thumbnails/56.jpg)
56
🌋 Деплой
NGINX
Node.js Cluster
Node.js Cluster
NGINX
App
App
App
App
App
App
App
App
![Page 57: Как мы разрабатываем новый фронтенд / Филипп Нехаев (Tinkoff.ru)](https://reader030.fdocuments.net/reader030/viewer/2022013113/586f8f711a28ab54768b7595/html5/thumbnails/57.jpg)
57
• Автогенерация демо для компонентов
🌪 Что осталось?
![Page 58: Как мы разрабатываем новый фронтенд / Филипп Нехаев (Tinkoff.ru)](https://reader030.fdocuments.net/reader030/viewer/2022013113/586f8f711a28ab54768b7595/html5/thumbnails/58.jpg)
58
• Автогенерация демо для компонентов
• Разделение на бандлы
🌪 Что осталось?
![Page 59: Как мы разрабатываем новый фронтенд / Филипп Нехаев (Tinkoff.ru)](https://reader030.fdocuments.net/reader030/viewer/2022013113/586f8f711a28ab54768b7595/html5/thumbnails/59.jpg)
59
• Автогенерация демо для компонентов
• Разделение на бандлы
• Ускорение сборки стилей
🌪 Что осталось?
![Page 60: Как мы разрабатываем новый фронтенд / Филипп Нехаев (Tinkoff.ru)](https://reader030.fdocuments.net/reader030/viewer/2022013113/586f8f711a28ab54768b7595/html5/thumbnails/60.jpg)
60
Универсальное приложение – это просто
![Page 61: Как мы разрабатываем новый фронтенд / Филипп Нехаев (Tinkoff.ru)](https://reader030.fdocuments.net/reader030/viewer/2022013113/586f8f711a28ab54768b7595/html5/thumbnails/61.jpg)
61
👏 Спасибо за внимание!
[email protected] linkedin.com/in/nehaev fb.com/philnehaev
Дополнительные материалы: goo.gl/ZEpnTU