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