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

http://habrahabr.ru/post/255717/

Most Popular

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

5

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

JavaScriptrules the web

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

технологии?

Что произошлоза эти 2 года

в мире JavaScript?

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

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

• Сегодня Front-end - клиент и сервер:

10

Front-end клиент

Front-end сервер

Back-end сервер

Database

Java Legacy

etc



11




Database

Java Legacy

etc



12




Database

Java Legacy

etc

- HTML - [critical CSS] - JS Bundle



13




Database

Java Legacy

etc




14




Database

Java Legacy

etc




15



16



17

SPA

JavaScript на сервере• Представлен Node.js

• Экосистема - npm (Node.js Package Manager)

• Что такое npm?251 К пакетов, ~ 4 млрд. загрузок/мес.

18

https://unpm.nodesource.com/

https://unpm.nodesource.com/

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

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

• 2014: React = HTML в JavaScript?

• 2015: React - то, с чем стало всё проще

• 2014: Flux - как его внедрить?

• 2015: Flux - RIP, viva la Redux

20

2014

2014: Server-Side1. Node.js в Production -> развитие платформы

стало замедляться (Joyent страхует риски)

22



2. Node.js для сборки SPA

23




3. Require.js (AMD) -> Browserify (CommonJS) + BrowserSync/Watchify

24




3. Require.js (AMD) -> Browserify (CommonJS) + BrowserSync/Watchify

4. 27 ноября 2014, доклад «webpack: 7 бед - один ответ» на MoscowJS 17:hHps://www.youtube.com/watch?v=kuXIgUsvpLo

5. Статья на Хабрахабр про webpack:hHp://habrahabr.ru/post/245991/

25

https://www.youtube.com/watch?v=kuXIgUsvpLo

http://habrahabr.ru/post/245991/

2014: Client-Side1. В проектах сражаются за доминирование:

Angular, Knockout, jQuery, Backbone, Handlebars

2. Благодаря сборщикам, от чистого CSS уходят: LESS, SASS, Stylus

3. ...

26




3. ...

27



28

1. Низкая структурированность

2. Медленное обновление UI

3. Side Effects

4. Много [ООП] кода и шаблонов

React

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

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

31

React Lifecycle

32* - om


2. Скорость обновления UI:

1. точечные и пакетные обновления

2. виртуальный DOM

33

React DOM Diff

34





3. Отсутствие Side Effects:

1. однонаправленный Data Flow (props)

2. неизменяемые данные (state)

35

React Flow

36

React

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





3. Отсутствие Side Effects:

1. однонаправленный Data Flow (props)

2. неизменяемые данные (state)

4. Удобство разработки - JSX

38

React Component

39


2. Скорость обновления UI

3. Отсутствие Side Effects

4. Удобство разработки - JSX

40



41

1. Низкая структурированность

2. Медленное обновление UI

3. Side Effects

4. Много [ООП] кода и шаблонов

SOLVED BY

REACT




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

CQRS46

CQRSCommand-Query Responsibility Segregation

модельдля чтения и записи

47

CQRSCommand-Query Responsibility Segregation

модель для чтенияданных

модельдля чтения и записи

модель для записиданных

48

Что даёт Flux?

1. Состояние гонки (race condition)

2. Каскадные обновления (cascade

updates)

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

49

Что даёт Flux?

1. Состояние гонки (race condition)

2. Каскадные обновления (cascade

updates)

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

50

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

51

Atime


52

A B


53

A B

A B


54

A E

A E


55

A E

A E

Record / Replay

Time Traveling

2014: Client-Side4. 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

2015

2015: Server-Side1. 14 января выходит io.js:

форк Node.js с болееновым V8 с частичным ES6 - промисы, генераторы

2. 8 сентября вышел Node.js v4.0.0

3. Волна удаления gulp из процесса сборки с заменой на отдельные скрипты в npm scripts

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

2015: Client-Side1. Пришёл ES6, 15 февраля - Babel (6to5 + esnext)

2. React Native

3. Взлёт популярности PostCSS

4. webpack стал стандартом де-факто в проектах

5. React почти полностью вытеснил Angular 1.x

6. Гонка Flux-реализаций окончена сокрушительной победой Redux

59

2015: Client-Side1. Пришёл 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

64

Создание Store

65

полезная часть

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

66

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

67

бесполезнаячасть


1. Обилие boilerplate-кода

2. “Заточенность" кода приложения под API каждого Flux-фреймворка

3. Логика сторов связана с их состоянием

4. Сложность сделать Record/Replay

5. Сложность для понимания роль диспетчера

68


69

Store

ДиспетчерAction 1

Компонент


70

Store


Action 2

Компонент


71

Store


Action 2

Uncaught Error: Invariant Violation: Dispatch.dispatch(...): Cannot dispatch in the middle of a dispatch.

Компонент


hHps://github.com/facebook/flux/issues/47

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

ООП -> ФП

Reducers

75

Middleware

76

View Provider

77

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

Connector

78

Redux

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

Hype Cycle

81

React + Redux: Plateau of Productivity

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

2016 Тренды

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

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

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

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

Рост экосистемы React + Redux1. Библиотеки компонентов

• Elemental UI

89

Elemental UI


• Elemental UI

• Material-UI

91

Material-UI


• Elemental UI

• Material-UI

• TouchstoneJS

93

TouchstoneJS


• Elemental UI

• Material-UI

• TouchstoneJS

• reapp

95

reapp


• Elemental UI

• Material-UI

• TouchstoneJS

• reapp

2. Инструменты для Redux

97

Redux Dev Tools1. Live Edit

2. Time Travel

Redux Slider Monitor1. Time Travel

через слайдер

Redux Diff Monitor

Redux GenTest Plugin


• 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. hHp://blog.yld.io/2015/11/30/building-realtime-

collaborative-offline-first-apps-with-react-redux-

pouchdb-and-web-sockets/

104

http://blog.yld.io/2015/11/30/building-realtime-collaborative-offline-first-apps-with-react-redux-pouchdb-and-web-sockets/

GraphQL + Relay

До GraphQL

106

До GraphQL

107

1. Где реализовать загрузку данных?

2. Как реализовать Optimistic Updates?

3. Чем оптимизировать сетевой трафик?

GraphQL Example

GraphQL Applications

GraphQL Schema

Вместе с GraphQL

111

1. Optimistic Updates

2. Query Collocation

3. Кэширование

4. Автоматический Data-Fetching,прощай AJAX

Relay Way1. Прощаемся:

1. Service-Oriented Architecture

2. Imperative Data Fetching

2. Встречаем:

1. User Experience Oriented Architecture

2. Declarative Data Fetching

112

Relay Way1. Прощаемся:

1. Service-Oriented Architecture

2. Imperative Data Fetching

2. Встречаем:

1. User Experience Oriented Architecture

2. Declarative Data Fetching

113

Relay + React Native

114

Давление на 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

ProgramminghHps://drboolean.gitbooks.io/mostly-adequate-guide/

content/

5. Fantasy Land SpecificationhHps://github.com/fantasyland/fantasy-land

118

https://drboolean.gitbooks.io/mostly-adequate-guide/content/

https://github.com/fantasyland/fantasy-land

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


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 Rendering1. Пользователь видит страницу

мгновенно

2. Отсутствие дополнительных запросов на получение данных

3. Страница может работать даже без JS

4. Полноценная URL-навигация и мета-тэги

5. Сохранение всех возможностей современного JavaScript

123

Изоморфные приложения1. Redux: the best for isomorphic apps

hHps://www.youtube.com/watch?

v=Uyk_8WWna6s

2. Изоморфные React-приложения:

производительность и масштабированиеhHp://www.highload.ru/2015/abstracts/1962.html

3. Изоморфные React-приложенияhHp://www.youtube.com/watch?v=PbK5xLmS0MU

124

https://www.youtube.com/watch?v=Uyk_8WWna6s

http://www.highload.ru/2015/abstracts/1962.html

http://www.youtube.com/watch?v=PbK5xLmS0MU

Native Applications

Native Applications1. Electron

126

Slack

Native Applications1. Electron

2. React Native

130

SVG + D3.js

WebAssembly, WebGL

C++ add-ons -> Node.js

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

Node.js -> Enterprise

StrongLoop -> IBM

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

Docker + CoreOS

138

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

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

GitBook

documentation.js

Итоги

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

2. Библиотеки работы с данными (Facebook Relay, Falcor, etc) и поддержкой offline-режима

3. Давление на React-сообщество со стороны Angular 2

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

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

6. Native Applications (Desktop & Mobile)144

20167. SVG & D3.js

8. WebAssembly, WebGL

9. C++ + JavaScript

10. Проекты обучения и профессиональной сертификации (egghead.io, etc)

11. React и Node.js активно входят в Enterprise

12. Микросервисная архитектура и контейнеры (Docker)

13. Систематизация Workflow145

http://egghead.io

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

Что произошлоза эти 2 года

в мире JavaScript?

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

технологии?

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

Процесс

1. Осведомлённость (10% времени)

2. Исследование

3. Обучение / практика

4. Использование

150

OODA Loop

151* 1970

Рекомендации• Присоединяйтесь к MoscowJS

http://moscowjs.ru/

• Не читайте советских газет - улучшайте английский (Hacker News, Reddit, etc)

• Читайте оригиналы и технические блоги (Netflix, Facebook, AirBnb, LinkedIn и т.д.)

• Активно внедряйте в свою жизнь Twitter и GitHub

http://moscowjs.ru/

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

Денис Измайлов

@DenisIzmaylov

https://github.com/DenisIzmaylov

www.startup-makers.ru

denis_izmaylov

http://www.startup-makers.ru

Software

JavaScript сегодня: React, Redux и новая реальность