2016 год. Добро пожаловать в новую реальность. Сегодня позиция JavaScript-разработчика является одной из самых востребованных и хорошо оплачиваемых в мире. Современные возможности JavaScript - это квестистенция всего, что произошло в отрасли разработки за всё её время существования: универсальные React-компоненты и композиция, декларативная анимация, изоморфные приложения, отсутствие side effects, авто-генерация тестов, симбиоз ООП и функционального программирования. Последние три года выдались самые насыщенные революционные для веб-разработки. Многие разработчики, кто не успел уследить за произошедшим, задают лишь один вопрос ЧТО ПРОИСХОДИТ? В рамках этого доклада мы попробуем синхронизироваться с JavaScript сообществом и посмотреть, что же он предоставляет нам сегодня? Как решать задачи привычные задачи? Что является актуальным направлением, а что может стать пустой тратой сил и времени?

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

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

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

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

6. JavaScript
rules the web

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

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

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

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

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

12. Front-end сегодня
• Это не только JavaScript в браузере
• Сегодня Front-end - клиент и сервер:
12
Front-end
клиент
Front-end
сервер
Back-end
сервер
Database
Java
Legacy
etc
- HTML
- [critical CSS]
- JS Bundle

13. Front-end сегодня
• Это не только JavaScript в браузере
• Сегодня Front-end - клиент и сервер:
13
Front-end
клиент
Front-end
сервер
Back-end
сервер
Database
Java
Legacy
etc
- HTML
- [critical CSS]
- JS Bundle

14. Front-end сегодня
• Это не только JavaScript в браузере
• Сегодня Front-end - клиент и сервер:
14
Front-end
клиент
Front-end
сервер
Back-end
сервер
Database
Java
Legacy
etc
- HTML
- [critical CSS]
- JS Bundle

15. Front-end сегодня
• Это не только JavaScript в браузере
• Сегодня Front-end - клиент и сервер:
15

16. Front-end сегодня
• Это не только JavaScript в браузере
• Сегодня Front-end - клиент и сервер:
16

17. Front-end сегодня
• Это не только JavaScript в браузере
• Сегодня Front-end - клиент и сервер:
17
SPA

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

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

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

21. 2014

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

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

24. 2014: Server-Side
1. Node.js в Production -> развитие платформы
стало замедляться (Joyent страхует риски)
2. Node.js для сборки SPA
3. Require.js (AMD) -> Browserify (CommonJS) +
BrowserSync/Watchify
24

25. 2014: Server-Side
1. Node.js в Production -> развитие платформы
стало замедляться (Joyent страхует риски)
2. Node.js для сборки SPA
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

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

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

28. 2014: Client-Side
1. В проектах сражаются за доминирование:
Angular, Knockout, jQuery, Backbone,
Handlebars
28
1. Низкая структурированность
2. Медленное обновление UI
3. Side Effects
4. Много [ООП] кода и шаблонов

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

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

32. React Lifecycle
32* - om

33. React
1. Просто “V” в паттерне MVC + Specs and Lifecycle
2. Скорость обновления UI:
1. точечные и пакетные обновления
2. виртуальный DOM
33

34. React DOM Diff
34

35. React
1. Просто “V” в паттерне MVC + Specs and Lifecycle
2. Скорость обновления UI:
1. точечные и пакетные обновления
2. виртуальный DOM
3. Отсутствие Side Effects:
1. однонаправленный Data Flow (props)
2. неизменяемые данные (state)
35

36. React Flow
36

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

38. React
1. Просто “V” в паттерне MVC + Specs and Lifecycle
2. Скорость обновления UI:
1. точечные и пакетные обновления
2. виртуальный DOM
3. Отсутствие Side Effects:
1. однонаправленный Data Flow (props)
2. неизменяемые данные (state)
4. Удобство разработки - JSX
38

39. React Component
39

40. React
1. Просто “V” в паттерне MVC + Specs and Lifecycle
2. Скорость обновления UI
3. Отсутствие Side Effects
4. Удобство разработки - JSX
40

41. 2014: Client-Side
1. В проектах сражаются за доминирование:
Angular, Knockout, jQuery, Backbone,
Handlebars
41
1. Низкая структурированность
2. Медленное обновление UI
3. Side Effects
4. Много [ООП] кода и шаблонов
SOLVED
BY
REACT

42. 2014: Client-Side
1. В проектах сражаются за доминирование:
Angular, Knockout, jQuery, Backbone,
Handlebars
2. Благодаря сборщикам, от чистого CSS уходят:
LESS, SASS, Stylus
3. Большинство всё ещё скептически
посматривает на React:
• HTML-код в JavaScript? PHP way?
• Ещё один Angular?
• А куда Backbone тут?
42

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

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

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

46. Command-Query
Responsibility
Segregation
CQRS
46

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

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

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

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

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

52. Воспроизводимость состояний
52
A B

53. Воспроизводимость состояний
53
A B
A B

54. Воспроизводимость состояний
54
A E
A E

55. Воспроизводимость состояний
55
A E
A E
Record / Replay
Time Traveling

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

57. 2015

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

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
59

60. 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

61. Проблемы Flux

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

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

64. Создание Store
64

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

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

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

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

69. Проблемы Flux
69
Store
Диспетчер
Action 1
Компонент

70. Проблемы Flux
70
Store
Диспетчер
Action 1
Action 2
Компонент

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

72. Проблемы Flux
h ps://github.com/facebook/flux/issues/47

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

74. ООП -> ФП

75. Reducers
75

76. Middleware
76

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

78. Connector
78

79. Redux

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

81. Hype Cycle
81

82. React + Redux:
Plateau of Productivity

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

84. 2016
Тренды

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

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

87. React - экосистема

88. Redux - экосистема

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

90. Elemental UI

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

92. Material-UI

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

94. TouchstoneJS

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

96. reapp

97. Рост экосистемы React + Redux
1. Библиотеки компонентов
• Elemental UI
• Material-UI
• TouchstoneJS
• reapp
2. Инструменты для Redux
97

98. Redux Dev Tools
1. Live Edit
2. Time Travel

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

100. Redux Diff Monitor

101. Redux GenTest Plugin

102. Рост экосистемы React + Redux
1. Библиотеки компонентов
• Elemental UI
• Material-UI
• TouchstoneJS
• reapp
2. Инструменты для Redux
3. Анимация (react-motion, velocity-react, etc)
4. CSS Modules & Post CSS
102

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

104. Работа с данными и 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

105. GraphQL + Relay

106. До GraphQL
106

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

108. GraphQL Example

109. GraphQL Applications

110. GraphQL Schema

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

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

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

114. Relay + React Native
114

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

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

118. Функциональное
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 Specification
h ps://github.com/fantasyland/fantasy-land
118

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

120. Изоморфные приложения
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

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

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

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

124. Изоморфные приложения
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

125. Native Applications

126. Native Applications
1. Electron
126

127. Slack

130. Native Applications
1. Electron
2. React Native
130

131. SVG + D3.js

132. WebAssembly, WebGL

133. C++ add-ons -> Node.js

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

135. Node.js -> Enterprise

136. StrongLoop -> IBM

137. Docker-контейнеры

138. Docker + CoreOS
138

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

140. Систематизация 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

141. GitBook

142. documentation.js

143. Итоги

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

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

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

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

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

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

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

151. OODA Loop
151* 1970

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

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