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 и англоязычных ресурсах

Most Popular

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 - клиент и сервер:

Front-end клиент

Front-end сервер

Back-end сервер

Database

Java Legacy

Database

Java Legacy

Database

Java Legacy

- HTML - [critical CSS] - JS Bundle

Database

Java Legacy

Database

Java Legacy

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

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

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

https://unpm.nodesource.com/

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

• 2014: React = HTML в JavaScript?

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

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

• 2015: Flux - RIP, viva la Redux

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

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

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

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/

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

Angular, Knockout, jQuery, Backbone, Handlebars

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

3. ...

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

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

3. Side Effects

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

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

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

React Lifecycle

32* - om

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

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

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

React DOM Diff

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

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

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

React Flow

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

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

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

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

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

React Component

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

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

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

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

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

3. Side Effects

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

SOLVED BY

3. Большинство всё ещё скептически посматривает на React:

• HTML-код в JavaScript? PHP way? • Ещё один Angular? • А куда Backbone тут?

2014: Client-Side

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

Проблема масштабирования MVC

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

Command-Query Responsibility Segregation

CQRS46

CQRSCommand-Query Responsibility Segregation

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

CQRSCommand-Query Responsibility Segregation

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

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

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

Что даёт Flux?

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

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

updates)

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

Что даёт Flux?

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

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

updates)

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

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

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 и пр.

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

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

2. React Native

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

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

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

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

Проблемы Flux

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

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

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

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

Создание Store

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

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

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

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

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

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

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

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

ДиспетчерAction 1

Компонент

Action 2

Компонент

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

Middleware

View Provider

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

Connector

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

Hype Cycle

React + Redux: Plateau of Productivity

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

2016 Тренды

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

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

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

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

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

• Elemental UI

Elemental UI

• Elemental UI

• Material-UI

Material-UI

• Elemental UI

• Material-UI

• TouchstoneJS

TouchstoneJS

• Elemental UI

• Material-UI

• TouchstoneJS

• reapp

• Elemental UI

• Material-UI

• TouchstoneJS

• reapp

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

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

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

и 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/

GraphQL + Relay

До GraphQL

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

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

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

GraphQL Example

GraphQL Applications

GraphQL Schema

Вместе с GraphQL

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

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

1. Service-Oriented Architecture

2. Imperative Data Fetching

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

1. User Experience Oriented Architecture

2. Declarative Data Fetching

Relay + React Native

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

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

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

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

Native Applications

Native Applications1. Electron

2. React Native

SVG + D3.js

WebAssembly, WebGL

C++ add-ons -> Node.js

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

Node.js -> Enterprise

StrongLoop -> IBM

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

Docker + CoreOS

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

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

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

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

в мире JavaScript?

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

технологии?

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

Процесс

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

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

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

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

OODA Loop

151* 1970

Рекомендации• Присоединяйтесь к 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 и новая реальность

Software

academy pro: react js. redux & tooling

hutson d olsenhutsondolsen.com/documents/hutson d olsen...

adn@it'summer - Изоморфные приложения с...

react redux

react redux react native

let's redux!

react + redux. best practices

react. redux. real world

frontdays #2. Игорь Лобанов, Миграция...

react + redux. Опыт использования

konrad kwiatkowski - type of components in react/redux

ตุลาการรัฐประหาร redux

react singapore: react concert

react+redux+node.js+raspberry piで...

aplikacje internetowe real-time w oparciu o react/redux

santaliestra redux

react hooks redux proxy - axlight.com...2019/01/31 ·...

murat kemaldar - bilebilefrontend-entwicklung / ui...

react, redux,...

Денис Измайлов, javascript сегодня:...