Видео: https://youtu.be/Uyk_8WWna6s

1. redux: the best
for isomorphic apps
Денис Измайлов
Startup Makers 24 сентября 2015

2. Почему так?
2

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

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

5. Вспомним Flux
5

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

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

8. Command-Query
Responsibility
Segregation
CQRS
8

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

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

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

12. 30 апреля 2014, Сан-Франциско
F8 Facebook Developer Conference
модель для чтения
12

13. 30 апреля 2014, Сан-Франциско
F8 Facebook Developer Conference
модель для чтения
модель для записи
13

14. Основные цели
1.Один источник правды
2.Избежать состояние гонки
3.Избежать каскадных обновлений
4.Воспроизводимость состояния
14

15. Основные цели
Воспроизводимость состояния
15

16. Основные цели
Воспроизводимость состояния
state Bstate A
16

17. Основные цели
Воспроизводимость состояния
state Bstate A
state Bstate A
17

18. Основные цели
Воспроизводимость состояния
error statestate A
error statestate A
Record / Replay
18

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

20. Мир на пороге новых проблем:
Flux
• Какие плюсы и минусы?
• Что выбрать из этого?
• Как с этим жить?
20

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

22. Организация изоморфных приложений
API
Browser-
specific JS
Server-specific
JS
Ваше
приложение
22

23. Организация изоморфных приложений
Browser-
specific JS
Server-specific
JS
Бизнес-логика
Routes
Модели
Схемы
Валидация
i18n
Конфигурация
Компоненты
Стилизация
и т.д
23

24. Server-Side Rendering
(SSR)
Генерация отображения
на стороне сервера
24

25. Взаимодействие
API
сервер
Front-end
сервер
25

26. Взаимодействие
API
сервер
Front-end
сервер
Браузер
26

27. Взаимодействие
API
сервер
Front-end
сервер
Браузер
27

28. Взаимодействие
API
сервер
Front-end
сервер
Браузер
- HTML
- критичный CSS
28

29. Взаимодействие
API
сервер
Front-end
сервер
Браузер
- HTML
- критичный CSS
- JavaScript
29

30. Взаимодействие
API
сервер
Front-end
сервер
Front-end
клиент
- HTML
- критичный CSS
- JavaScript
30

31. Выгоды
• Время загрузки страницы сокращается в 5-6 раз
• Снижаются затраты на поддержку
• Быстрый старт новых проектов
• Положительный эффект для SEO
• Снижает риск проблем memory leak
• Write once, run anywhere (WORA)
31

32. Промежуточный итог
• Flux — архитектура для создания клиентских
приложений
• Flux — больше шаблон, чем формальный фреймворк
• Flux создан сделать приложение более
масштабируемым, предсказуемым, а отладку - простой
• Изоморфные приложения повышают UX и снижают
затраты
32

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

34. Проблемы реализаций Flux
• Обилие boilerplate-кода
• Заточенность кода под API
• Логика сторов связана с их состоянием
34

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

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

37. Создание сторов
полезная часть
37

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

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

40. Проблемы реализаций Flux
• Обилие boilerplate-кода
• Заточенность кода под API
• Логика сторов связана с их состоянием
• Сложно сделать record/replay состояний
40

41. Проблемы реализаций Flux
• Обилие boilerplate-кода
• Заточенность кода под API
• Логика сторов связана с их состоянием
• Сложно сделать record/replay состояний
• Сложная для понимания роль диспетчера
41

42. Проблемы диспетчера Flux
Store 2
Диспетчер
Component 3
Action 1
42

43. Проблемы диспетчера Flux
Store 2
Диспетчер
Action 1
Component 3
Action 1
43

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

45. Проблемы диспетчера Flux
https://github.com/facebook/flux/issues/47
45

46. Проблемы реализаций Flux
• Обилие boilerplate-кода
• Заточенность кода под API
• Логика сторов связана с их состоянием
• Сложно сделать record/replay состояний
• Сложная для понимания роль диспетчера
• Проблема повторного использования
46

47. Проблемы 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

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

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

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

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

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

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

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

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

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

57. Это всё?
57

58. Нет
58

59. Middleware
59

60. Middleware
• Точка расширения, куда передаётся action, прежде, чем
попасть в reducers
• Функция, принимающая action, следующий middleware и Store:
60

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

62. View Provider
62

63. react-redux
• connect()
• <Provider />
63

64. react-redux: connect()
• Подключает к компоненту Store
• Возвращает новый компонент, который содержит
переданный компонент, как вложенный
• Ему в свойствах будут переданы подключенный
Store и функция dispatch
64

65. react-redux: connect()
65

66. react-redux: <Provider />
• Главный компонент
• Делает доступным вызов connect() для всех
дочерних элементов
66

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

68. Подводим итоги
• Нет 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. 69

70. Как начать?
Подробнейшая документация
(ссылка в конце)
70

71. Экосистема

72. Redux DevTools
• Live Edit
• Time-Travel
72

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

74. Redux GenTest Plugin
74

75. И ещё море всего
https://github.com/xgrommx/awesome-redux
75

76. Метрики в GitHub
Redux
Flux
76

77. Импортозамещение
Из России с любовью:
Даня Абрамов
Санкт-Петербург
77

78. Отзывы
• “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

79. redux - очередной Flux?
Нет
79

80. redux - the best for isomorphic
apps?
Да
80

81. Полезные ссылки
• http://elm-lang.org/
• http://staltz.com/unidirectional-user-interface-
architectures.html
• http://martinfowler.com/bliki/CQRS.html
81

82. Документация
http://rackt.github.io/redux/
82

83. Вопросы?
Twitter: @DenisIzmaylov
GitHub: https://github.com/DenisIzmaylov
Facebook: http://fb.com/denis.izmaylov
83