Как мы разрабатываем новый фронтенд / Филипп Нехаев...

Как мы разрабатываемновый фронтенд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

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

f.nehaev@tinkoff.ru linkedin.com/in/nehaev fb.com/philnehaev

Дополнительные материалы: goo.gl/ZEpnTU