redux: the best for isomorphic apps

redux: the bestfor isomorphic apps

Денис ИзмайловStartup Makers 24 сентября 2015

Почему так?

2

Как это связано?

3

redux — очередной Flux?

4

Вспомним Flux

5

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

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

6

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

7

Command-Query Responsibility Segregation

CQRS

8

CQRSCommand-Query Responsibility Segregation

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

9

CQRSCommand-Query Responsibility Segregation

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

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

10

CQRSCommand-Query Responsibility Segregation

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

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

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

11

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

модель для чтения

12

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

модель для чтения

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

13

Основные цели

1.Один источник правды

2.Избежать состояние гонки

3.Избежать каскадных обновлений

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

14

Основные цели

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

15

Основные цели

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

state Bstate A

16

Основные цели

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

state Bstate A

state Bstate A

17

Основные цели

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

error statestate A

error statestate A

Record / Replay

18

2014 - клонировали, как могли

• 12 мая: Fluxxor • 1 июля: Reflux.js • 24 июля: официальный релиз от Facebook • 24 октября: Flummox • 2 ноября: Marty.js • 4 ноября: Yahoo выпускает Fluxible • 11 декабря: AirBnb выпускает alt

19

Мир на пороге новых проблем: Flux

• Какие плюсы и минусы?

• Что выбрать из этого?

• Как с этим жить?

20

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

21

Организация изоморфных приложений

API

Browser-specific JS

Server-specific JS

Вашеприложение

22

Организация изоморфных приложений

Browser-specific JS

Server-specific JS

Бизнес-логикаRoutes МоделиСхемы

Валидацияi18n

КонфигурацияКомпонентыСтилизация

и т.д

23

Server-Side Rendering(SSR)

Генерация отображения на стороне сервера

24

Взаимодействие

API сервер

Front-endсервер

25

Взаимодействие

API сервер

Front-endсервер

Браузер

26

Взаимодействие

API сервер

Front-endсервер

Браузер

27

Взаимодействие

API сервер

Front-endсервер

Браузер

- HTML - критичный CSS

28

Взаимодействие

API сервер

Front-endсервер

Браузер

- HTML - критичный CSS - JavaScript

29

Взаимодействие

API сервер

Front-endсервер

Front-end клиент

- HTML - критичный CSS - JavaScript

30

Выгоды• Время загрузки страницы сокращается в 5-6 раз

• Снижаются затраты на поддержку

• Быстрый старт новых проектов

• Положительный эффект для SEO

• Снижает риск проблем memory leak

• Write once, run anywhere (WORA)

31

Промежуточный итог• Flux — архитектура для создания клиентских приложений

• Flux — больше шаблон, чем формальный фреймворк

• Flux создан сделать приложение более масштабируемым, предсказуемым, а отладку - простой

• Изоморфные приложения повышают UX и снижают затраты

32

Так ли хорош Flux?

33

Проблемы реализаций Flux

• Обилие boilerplate-кода

• Заточенность кода под API

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

34

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

35

Создание сторов

36

Создание сторов

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

37

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

38

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

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

39

Проблемы реализаций Flux

• Обилие boilerplate-кода

• Заточенность кода под API

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

• Сложно сделать record/replay состояний

40

Проблемы реализаций Flux

• Обилие boilerplate-кода

• Заточенность кода под API

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

• Сложно сделать record/replay состояний

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

41

Проблемы диспетчера Flux

Store 2

Диспетчер

Component 3

Action 1

42

Проблемы диспетчера Flux

Store 2

ДиспетчерAction 1

Component 3

Action 1

43

Проблемы диспетчера Flux

Store 2

ДиспетчерAction 1

Component 3

Action 1

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

44

Проблемы диспетчера Flux

https://github.com/facebook/flux/issues/4745

Проблемы реализаций Flux

• Обилие boilerplate-кода

• Заточенность кода под API

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

• Сложно сделать record/replay состояний

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

• Проблема повторного использования

46

Проблемы Flux при Server-Side Rendering

• Сложно реализовать асинхронную загрузку данных

• Передача состояния сторов от сервера клиенту

• Flux изначально создавался для клиентской части: “Flux is the application architecture that Facebook uses for building client-side web applications.”~ https://facebook.github.io/flux/- OK

47

Все эти проблемы решает redux

48

Обновление архитектуры

49

Сторы — не классыА функции описывающие мутации:

50

Раз это функции…

51

Сторы переименованы в reducers

52

Где же теперь state?

53

State хранится в Диспетчере

54

Диспетчера больше нет

55

Диспетчер переименован в Store

56

Это всё?

57

Нет

58

Middleware

59

Middleware• Точка расширения, куда передаётся action, прежде, чем

попасть в reducers

• Функция, принимающая action, следующий middleware и Store:

60

MiddlewareЭтот middleware позволяет диспатчить в качестве action обычный Promise

61

View Provider

62

react-redux

• connect()

• <Provider />

63

react-redux: connect()

• Подключает к компоненту Store

• Возвращает новый компонент, который содержит переданный компонент, как вложенный

• Ему в свойствах будут переданы подключенный Store и функция dispatch

64

react-redux: connect()

65

react-redux: <Provider />• Главный компонент

• Делает доступным вызов connect() для всех дочерних элементов

66

Схема архитектура

67

Подводим итоги• Нет boilerplate кода, за счёт того, что мутации описываются функциями

• Как следствие - нет зависимости от API, его по сути нет

• При таком подходе легко сделать record/replay

• Нет диспетчера - нет проблемы его понимания

• Легкое повторное использование reducers, пример:https://github.com/rackt/redux/blob/master/examples/real-world/reducers/paginate.js

• За счёт middleware легко организовать асинхронную загрузку данных для компонент:https://github.com/DenisIzmaylov/redux-catch-promise

68

69

Как начать?Подробнейшая документация

(ссылка в конце)

70

Экосистема

Redux DevTools• Live Edit • Time-Travel

72

Redux Slider Monitor• Time-Travel черезслайдер

73

Redux GenTest Plugin

74

И ещё море всего

https://github.com/xgrommx/awesome-redux

75

Метрики в GitHubRedux

Flux

76

Импортозамещение

Из России с любовью:

Даня Абрамов

Санкт-Петербург

77

Отзывы• “Love what you’re doing with Redux”

Jing Chen, creator of Flux

• “I asked for comments on Redux in FB's internal JS discussion group, and it was universally praised. Really awesome work.”Bill Fisher, creator of Flux

Facebook в восторге

78

redux - очередной Flux?

Нет

79

redux - the best for isomorphic apps?

Да

80

Полезные ссылки

• http://elm-lang.org/

• http://staltz.com/unidirectional-user-interface-architectures.html

• http://martinfowler.com/bliki/CQRS.html

81

Документация

http://rackt.github.io/redux/

82

Вопросы?

Twitter: @DenisIzmaylov GitHub: https://github.com/DenisIzmaylov Facebook: http://fb.com/denis.izmaylov

83