Денис Измайлов, JavaScript сегодня: React, Redux и новая реальность

JavaScript сегодня:
React, Redux и новая
реальность
Денис Измайлов
15 марта 2016

• 16 лет опыта разработки ПО и web
• Последние 6 лет посвятил Front-end,
Node.js и архитектуре
• Более 15 проектов, в том числе много
SPA, high-load и React
• Коммиты в Redux, webpack и koa
• Cпикер HighLoad++ 2015, MoscowJS
• Автор статей на Habrahabr и
англоязычных ресурсах
, CEO

Most Popular
«Результаты ежегодного исследования StackOverflow — 
про технологии, зарплаты, счастье и кофе», http://habrahabr.ru/post/255717/
4

Most Popular
http://www.ryan-williams.net/hacker-news-hiring-trends/2016/march.html?
compare1=java&compare2=node.js&compare3=JavaScript&compare4=golang
5

Почему необходимо
использовать актуальные
технологии?

Что произошло 
за эти 2 года
в мире JavaScript?

Какие тренды мы
видим сегодня?

Front-end сегодня
• Это не только JavaScript в браузере
• Сегодня Front-end - клиент и сервер:
10
Front-end
клиент
Front-end
сервер
Back-end
сервер 
 
Database
Java
Legacy 
etc

11
Front-end
клиент
Front-end
сервер
Back-end
сервер 
 
Database
Java
Legacy 
etc

12
Front-end
клиент
Front-end
сервер
Back-end
сервер 
 
Database
Java
Legacy 
etc
- HTML
- [critical CSS]
- JS Bundle

13
Front-end
клиент
Front-end
сервер
Back-end
сервер 
 
Database
Java
Legacy 
etc
- HTML
- [critical CSS]
- JS Bundle

14
Front-end
клиент
Front-end
сервер
Back-end
сервер 
 
Database
Java
Legacy 
etc
- HTML
- [critical CSS]
- JS Bundle

15

16

17
SPA

JavaScript на сервере
• Представлен Node.js
• Экосистема - npm 
(Node.js Package Manager)
• Что такое npm? 
251 К пакетов, ~ 4 млрд. загрузок/мес.
18
https://unpm.nodesource.com/

Мир JavaScript - это самый
увлекательный сериал

Мир JavaScript - это самый
увлекательный сериал
• 2014: React = HTML в JavaScript?
• 2015: React - то, с чем стало всё проще
• 2014: Flux - как его внедрить?
• 2015: Flux - RIP, viva la Redux
20

2014: Server-Side
1. Node.js в Production -> развитие платформы
стало замедляться (Joyent страхует риски)
22

2014: Server-Side
2. Node.js для сборки SPA
23

2014: Server-Side
3. Require.js (AMD) -> Browserify (CommonJS) +
BrowserSync/Watchify
24

2014: Server-Side
3. Require.js (AMD) -> Browserify (CommonJS) +
BrowserSync/Watchify
4. 27 ноября 2014, доклад «webpack: 7 бед - один
ответ» на MoscowJS 17: 
h ps://www.youtube.com/watch?v=kuXIgUsvpLo
5. Статья на Хабрахабр про webpack: 
h p://habrahabr.ru/post/245991/
25

2014: Client-Side
1. В проектах сражаются за доминирование: 
Angular, Knockout, jQuery, Backbone,
Handlebars
2. Благодаря сборщикам, от чистого CSS уходят: 
LESS, SASS, Stylus
3. ...
26

2014: Client-Side
Handlebars
LESS, SASS, Stylus
3. ...
27

2014: Client-Side
Handlebars
28
1. Низкая структурированность
2. Медленное обновление UI
3. Side Eﬀects
4. Много [ООП] кода и шаблонов

React
 
JavaScript-библиотека
для создания UI

React
1. Просто “V” в паттерне MVC + Specs and Lifecycle
31

React
2. Скорость обновления UI:
1. точечные и пакетные обновления
2. виртуальный DOM
33

React
3. Отсутствие Side Eﬀects:
1. однонаправленный Data Flow (props)
2. неизменяемые данные (state)
35

React
 
UI = f(x),
x = state, f = component

React
3. Отсутствие Side Eﬀects:
1. однонаправленный Data Flow (props)
2. неизменяемые данные (state)
4. Удобство разработки - JSX
38

React
2. Скорость обновления UI
3. Отсутствие Side Eﬀects
4. Удобство разработки - JSX
40

2014: Client-Side
Handlebars
41
1. Низкая структурированность
2. Медленное обновление UI
3. Side Eﬀects
4. Много [ООП] кода и шаблонов
SOLVED
BY
REACT

2014: Client-Side
Handlebars
LESS, SASS, Stylus
3. Большинство всё ещё скептически
посматривает на React:
• HTML-код в JavaScript? PHP way?
• Ещё один Angular?
• А куда Backbone тут?
42

2014: Client-Side
• 30 апреля 2014
• Сан-Франциско
• 30ºC
• 1700 разработчиков
• F8 Facebook Developer Conference

Проблема масштабирования MVC
30 апреля 2014, Сан-Франциско
F8 Facebook Developer Conference

45
30 апреля 2014, Сан-Франциско
F8 Facebook Developer Conference

Command-Query
Responsibility
Segregation
CQRS
46

CQRS
Command-Query Responsibility Segregation
модель 
для чтения 
и записи
47

CQRS
Command-Query Responsibility Segregation
модель для чтения 
данных
модель 
для чтения 
и записи
модель для записи 
данных
48

Что даёт Flux?
1. Состояние гонки (race condition)
2. Каскадные обновления (cascade
updates)
3. Воспроизводимость состояний
49

Что даёт Flux?
1. Состояние гонки (race condition)
2. Каскадные обновления (cascade
updates)
3. Воспроизводимость состояний
50

Воспроизводимость состояний
51
A time

52
A B

53
A B
A B

54
A E
A E

55
A E
A E
Record / Replay
Time Traveling

2014: Client-Side
4. Flux, как альтернатива MVC и архитектура для
React-приложений
5. Это помогло немного иначе посмотреть на React
6. Гонка Flux-фреймворков: Fluxxor, Reﬂux.js, Flux от
Facebook, Flummox, Marty.js, Fluxible от Yahoo,
AirBnb представляет alt
7. Было трудно, но понятно, что React и Flux - это
верное направление
8. ES6-транспилеры 6to5, esnext, traceur начали
вытеснять CoﬀeeScript и пр.
56

2015: Server-Side
1. 14 января выходит io.js: 
форк Node.js с более 
новым V8 с частичным ES6 
- промисы, генераторы
2. 8 сентября вышел Node.js v4.0.0
3. Волна удаления gulp из процесса сборки с
заменой на отдельные скрипты в npm scripts
4. Изоморфные приложения
58

2015: Client-Side
1. Пришёл ES6, 15 февраля - Babel (6to5 + esnext)
2. React Native
3. Взлёт популярности PostCSS
4. webpack стал стандартом де-факто в проектах
5. React почти полностью вытеснил Angular 1.x
6. Гонка Flux-реализаций окончена
сокрушительной победой Redux
59

2015: Client-Side
1. Пришёл ES6, 15 февраля - Babel (6to5 + esnext)
2. React Native
3. Взлёт популярности PostCSS
4. webpack стал стандартом де-факто в проектах
5. React почти полностью вытеснил Angular 1.x
6. Гонка Flux-реализаций окончена
сокрушительной победой Redux
60

Проблемы Flux
1. Обилие boilerplate-кода
2. “Заточенность" кода приложения под API
каждого Flux-фреймворка
3. Логика сторов связана с их состоянием
62

Пара примеров с alt.js

Создание Store
65
полезная часть

Создание компонент
66

Создание компонент
67
бесполезная 
часть

1. Обилие boilerplate-кода
2. “Заточенность" кода приложения под API
каждого Flux-фреймворка
3. Логика сторов связана с их состоянием
4. Сложность сделать Record/Replay
5. Сложность для понимания роль диспетчера
68

69
Store
Диспетчер
Action 1
Компонент

70
Store
Диспетчер
Action 1
Action 2
Компонент

71
Store
Диспетчер
Action 1
Action 2
Uncaught Error: Invariant Violation:
Dispatch.dispatch(...): Cannot
dispatch in the middle of a dispatch.
Компонент

h ps://github.com/facebook/ﬂux/issues/47

Как эти проблемы 
решает Redux?

View Provider
77
Доступ к данным из React, Angular и пр.

Будет ли ещё
один Redux?

React + Redux:
Plateau of Productivity

А что тогда будет?

Качественный рост
экосистемы React + Redux

React - не просто V в MVC

Рост экосистемы React + Redux
1. Библиотеки компонентов
• Elemental UI
89

• Elemental UI
• Material-UI
91

• Elemental UI
• Material-UI
• TouchstoneJS
93

• Elemental UI
• Material-UI
• TouchstoneJS
• reapp
95

• Elemental UI
• Material-UI
• TouchstoneJS
• reapp
2. Инструменты для Redux
97

Redux Dev Tools
1. Live Edit
2. Time Travel

Redux Slider Monitor
1. Time Travel
через слайдер

• Elemental UI
• Material-UI
• TouchstoneJS
• reapp
2. Инструменты для Redux
3. Анимация (react-motion, velocity-react, etc)
4. CSS Modules & Post CSS
102

Борьба библиотек
для работы с данными 
и offline-режима

Работа с данными и offline
1. Facebook Relay
2. Netflix Falcor
3. om.next
4. PouchDB, etc
5. h p://blog.yld.io/2015/11/30/building-realtime-
collaborative-offline-first-apps-with-react-redux-
pouchdb-and-web-sockets/
104

До GraphQL
107
1. Где реализовать загрузку данных?
2. Как реализовать Optimistic Updates?
3. Чем оптимизировать сетевой трафик?

Вместе с GraphQL
111
1. Optimistic Updates
2. Query Collocation
3. Кэширование
4. Автоматический Data-Fetching, 
прощай AJAX

Relay Way
1. Прощаемся:
1. Service-Oriented Architecture
2. Imperative Data Fetching
2. Встречаем:
1. User Experience Oriented Architecture
2. Declarative Data Fetching
112

Relay Way
1. Прощаемся:
1. Service-Oriented Architecture
2. Imperative Data Fetching
2. Встречаем:
1. User Experience Oriented Architecture
2. Declarative Data Fetching
113

Давление на React
со стороны Angular 2

Функциональное
программирование
+
Иммутабельные
данные

Функциональное
1. Ph. D
2. UI = f(x), x = state(action1, action2, ...actionN)
3. Ramda
4. Professor Frisby's Mostly Adequate Guide to Functional
Programming 
h ps://drboolean.gitbooks.io/mostly-adequate-guide/
content/
5. Fantasy Land Speciﬁcation 
h ps://github.com/fantasyland/fantasy-land
118

Изоморфные приложения

By isomorphic we mean that any
given line of code (with notable
exceptions) can execute both on
the client and the server.
 
Charlie Robbins, 
18 Oct 2011

Шаблоны
Стили
Локализация
Конфигурация
Routes
Права доступа
Модели
Схемы
Валидация
Сервисы
server.jsNode.js
worker.js
client.jsBrowser
admin.js
Бизнес-логика
Компоненты
API-интерфейсы
Actions, Reducers
Static Files

Server-Side Rendering
• Сборка HTML на Front-end сервере
• Моментальное отображение в
браузере, ещё до загрузки JS
• Когда JS загрузится, React только
добавит обработчики событий
• А это очень быстро
122

Server-Side Rendering
1. Пользователь видит страницу
мгновенно
2. Отсутствие дополнительных запросов
на получение данных
3. Страница может работать даже без JS
4. Полноценная URL-навигация и мета-
тэги
5. Сохранение всех возможностей
современного JavaScript 123

1. Redux: the best for isomorphic apps 
h ps://www.youtube.com/watch?
v=Uyk_8WWna6s
2. Изоморфные React-приложения:
производительность и масштабирование 
h p://www.highload.ru/2015/abstracts/1962.html
3. Изоморфные React-приложения 
h p://www.youtube.com/watch?v=PbK5xLmS0MU
124

Native Applications
1. Electron
126

Native Applications
1. Electron
2. React Native
130

Обучение и
профессиональная
сертификация

Систематизация
Workflow

Систематизация Workflow
1. jsdoc 3, GitBook, documentation.js
2. JSON API, GraphQL
3. BitBucket, GitHub, Gogs
4. CI (CodeShip, Travis, Circle)
5. Docker (Heroku, DigitalOcean, vscale)
6. StrongLoop, PM2, Enterprise NPM
7. Slack, Fleep, etc
140

2016
1. Качественный рост экосистем React и Redux
2. Библиотеки работы с данными (Facebook
Relay, Falcor, etc) и поддержкой oﬄine-режима
3. Давление на React-сообщество со стороны
Angular 2
4. Функциональное программирование,
иммутабельные данные
5. Изоморфные приложения
6. Native Applications (Desktop & Mobile)
144

2016
7. SVG & D3.js
8. WebAssembly, WebGL
9. C++ + JavaScript
10. Проекты обучения и профессиональной
сертификации (egghead.io, etc)
11. React и Node.js активно входят в Enterprise
12. Микросервисная архитектура и контейнеры
(Docker)
13. Систематизация Workﬂow
145

Как поддерживать
актуальность?

Процесс
1. Осведомлённость (10% времени)
2. Исследование
3. Обучение / практика
4. Использование
150

Рекомендации
• Присоединяйтесь к MoscowJS 
http://moscowjs.ru/
• Не читайте советских газет - улучшайте
английский (Hacker News, Reddit, etc)
• Читайте оригиналы и технические блоги
(Netflix, Facebook, AirBnb, LinkedIn и т.д.)
• Активно внедряйте в свою жизнь Twitter
и GitHub

Спасибо за
внимание
@DenisIzmaylov
https://github.com/DenisIzmaylov
www.startup-makers.ru
denis_izmaylov

Денис Измайлов, JavaScript сегодня: React, Redux и новая реальность

Recommended

More Related Content

What's hot (19)

Viewers also liked (7)

Similar to Денис Измайлов, JavaScript сегодня: React, Redux и новая реальность (20)

More from ScrumTrek (20)

Денис Измайлов, JavaScript сегодня: React, Redux и новая реальность