Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
redux: the best
for 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
CQRS
Command-Query Responsibility Segregation
модель

для чтения

и записи
9
CQRS
Command-Query Responsibility Segregation
модель

для чтения

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

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

данных
модель

для чтения

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

да...
30 апреля 2014, Сан-Франциско
F8 Facebook Developer Conference
модель для чтения
12
30 апреля 2014, Сан-Франциско
F8 Facebook Developer Conference
модель для чтения
модель для записи
13
Основные цели
1.Один источник правды
2.Избежать состояние гонки
3.Избежать каскадных обновлений
4.Воспроизводимость состоя...
Основные цели
Воспроизводимость состояния
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 октября: ...
Мир на пороге новых проблем:
Flux
• Какие плюсы и минусы?
• Что выбрать из этого?
• Как с этим жить?
20
Изоморфные
приложения
21
Организация изоморфных приложений
API
Browser-
specific JS
Server-specific
JS
Ваше
приложение
22
Организация изоморфных приложений
Browser-
specific JS
Server-specific
JS
Бизнес-логика
Routes

Модели
Схемы
Валидация
i18n
...
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 раз
• Снижаются затраты на поддержку
• Быстрый старт новых проектов
• П...
Промежуточный итог
• Flux — архитектура для создания клиентских
приложений
• Flux — больше шаблон, чем формальный фреймвор...
Так ли хорош Flux?
33
Проблемы реализаций Flux
• Обилие boilerplate-кода
• Заточенность кода под API
• Логика сторов связана с их состоянием



...
Пара примеров с alt.js
35
Создание сторов
36
Создание сторов
полезная часть
37
Создание компонент
38
Создание компонент
бесполезная

часть
39
Проблемы реализаций Flux
• Обилие boilerplate-кода
• Заточенность кода под API
• Логика сторов связана с их состоянием
• С...
Проблемы реализаций Flux
• Обилие boilerplate-кода
• Заточенность кода под API
• Логика сторов связана с их состоянием
• С...
Проблемы диспетчера 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.dis...
Проблемы диспетчера Flux
https://github.com/facebook/flux/issues/47
45
Проблемы реализаций Flux
• Обилие boilerplate-кода
• Заточенность кода под API
• Логика сторов связана с их состоянием
• С...
Проблемы Flux
при Server-Side Rendering
• Сложно реализовать асинхронную загрузку данных
• Передача состояния сторов от се...
Все эти проблемы
решает redux
48
Обновление
архитектуры
49
Сторы — не классы
А функции описывающие мутации:
50
Раз это функции…
51
Сторы переименованы в
reducers
52
Где же теперь state?
53
State хранится в
Диспетчере
54
Диспетчера больше
нет
55
Диспетчер
переименован в Store
56
Это всё?
57
Нет
58
Middleware
59
Middleware
• Точка расширения, куда передаётся action, прежде, чем
попасть в reducers
• Функция, принимающая action, следу...
Middleware
Этот middleware позволяет диспатчить

в качестве action обычный Promise
61
View Provider
62
react-redux
• connect()
• <Provider />
63
react-redux: connect()
• Подключает к компоненту Store
• Возвращает новый компонент, который содержит
переданный компонент...
react-redux: connect()
65
react-redux: <Provider />
• Главный компонент
• Делает доступным вызов connect() для всех
дочерних элементов
66
Схема архитектура
67
Подводим итоги
• Нет boilerplate кода, за счёт того, что мутации описываются функциями
• Как следствие - нет зависимости о...
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
Метрики в GitHub
Redux
Flux
76
Импортозамещение
Из России с любовью:
Даня Абрамов
Санкт-Петербург
77
Отзывы
• “Love what you’re doing with Redux”

Jing Chen, creator of Flux



• “I asked for comments on Redux in FB's inter...
redux - очередной Flux?
Нет
79
redux - the best for isomorphic
apps?

Да
80
Полезные ссылки
• http://elm-lang.org/
• http://staltz.com/unidirectional-user-interface-
architectures.html
• http://mart...
Документация
http://rackt.github.io/redux/
82
Вопросы?
Twitter: @DenisIzmaylov
GitHub: https://github.com/DenisIzmaylov
Facebook: http://fb.com/denis.izmaylov
83
Upcoming SlideShare
Loading in …5
×
Upcoming SlideShare
Денис Измайлов, JavaScript сегодня: React, Redux и новая реальность
Next
Download to read offline and view in fullscreen.

5

Share

Download to read offline

"Redux: the best for isomorphic apps", Денис Измайлов, MoscowJS 25

Download to read offline

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

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

"Redux: the best for isomorphic apps", Денис Измайлов, MoscowJS 25

  1. 1. redux: the best for isomorphic apps Денис Измайлов Startup Makers 24 сентября 2015
  2. 2. Почему так? 2
  3. 3. Как это связано? 3
  4. 4. redux — очередной Flux? 4
  5. 5. Вспомним Flux 5
  6. 6. Проблема масштабирования MVC 30 апреля 2014, Сан-Франциско F8 Facebook Developer Conference 6
  7. 7. 30 апреля 2014, Сан-Франциско F8 Facebook Developer Conference 7
  8. 8. Command-Query Responsibility Segregation CQRS 8
  9. 9. CQRS Command-Query Responsibility Segregation модель
 для чтения
 и записи 9
  10. 10. CQRS Command-Query Responsibility Segregation модель
 для чтения
 и записи модель для чтения
 данных 10
  11. 11. CQRS Command-Query Responsibility Segregation модель для чтения
 данных модель
 для чтения
 и записи модель для записи
 данных 11
  12. 12. 30 апреля 2014, Сан-Франциско F8 Facebook Developer Conference модель для чтения 12
  13. 13. 30 апреля 2014, Сан-Франциско F8 Facebook Developer Conference модель для чтения модель для записи 13
  14. 14. Основные цели 1.Один источник правды 2.Избежать состояние гонки 3.Избежать каскадных обновлений 4.Воспроизводимость состояния 14
  15. 15. Основные цели Воспроизводимость состояния 15
  16. 16. Основные цели Воспроизводимость состояния state Bstate A 16
  17. 17. Основные цели Воспроизводимость состояния state Bstate A state Bstate A 17
  18. 18. Основные цели Воспроизводимость состояния error statestate A error statestate A Record / Replay 18
  19. 19. 2014 - клонировали, как могли • 12 мая: Fluxxor • 1 июля: Reflux.js • 24 июля: официальный релиз от Facebook • 24 октября: Flummox • 2 ноября: Marty.js • 4 ноября: Yahoo выпускает Fluxible • 11 декабря: AirBnb выпускает alt 19
  20. 20. Мир на пороге новых проблем: Flux • Какие плюсы и минусы? • Что выбрать из этого? • Как с этим жить? 20
  21. 21. Изоморфные приложения 21
  22. 22. Организация изоморфных приложений API Browser- specific JS Server-specific JS Ваше приложение 22
  23. 23. Организация изоморфных приложений Browser- specific JS Server-specific JS Бизнес-логика Routes
 Модели Схемы Валидация i18n Конфигурация Компоненты Стилизация и т.д 23
  24. 24. Server-Side Rendering
 (SSR) Генерация отображения на стороне сервера 24
  25. 25. Взаимодействие API сервер Front-end
 сервер 25
  26. 26. Взаимодействие API сервер Front-end
 сервер Браузер 26
  27. 27. Взаимодействие API сервер Front-end
 сервер Браузер 27
  28. 28. Взаимодействие API сервер Front-end
 сервер Браузер - HTML - критичный CSS 28
  29. 29. Взаимодействие API сервер Front-end
 сервер Браузер - HTML - критичный CSS - JavaScript 29
  30. 30. Взаимодействие API сервер Front-end
 сервер Front-end клиент - HTML - критичный CSS - JavaScript 30
  31. 31. Выгоды • Время загрузки страницы сокращается в 5-6 раз • Снижаются затраты на поддержку • Быстрый старт новых проектов • Положительный эффект для SEO • Снижает риск проблем memory leak • Write once, run anywhere (WORA) 31
  32. 32. Промежуточный итог • Flux — архитектура для создания клиентских приложений • Flux — больше шаблон, чем формальный фреймворк • Flux создан сделать приложение более масштабируемым, предсказуемым, а отладку - простой • Изоморфные приложения повышают UX и снижают затраты 32
  33. 33. Так ли хорош Flux? 33
  34. 34. Проблемы реализаций Flux • Обилие boilerplate-кода • Заточенность кода под API • Логика сторов связана с их состоянием
 
 
 
 
 
 34
  35. 35. Пара примеров с alt.js 35
  36. 36. Создание сторов 36
  37. 37. Создание сторов полезная часть 37
  38. 38. Создание компонент 38
  39. 39. Создание компонент бесполезная
 часть 39
  40. 40. Проблемы реализаций Flux • Обилие boilerplate-кода • Заточенность кода под API • Логика сторов связана с их состоянием • Сложно сделать record/replay состояний
 
 
 
 40
  41. 41. Проблемы реализаций Flux • Обилие boilerplate-кода • Заточенность кода под API • Логика сторов связана с их состоянием • Сложно сделать record/replay состояний • Сложная для понимания роль диспетчера
 
 41
  42. 42. Проблемы диспетчера Flux Store 2 Диспетчер Component 3 Action 1 42
  43. 43. Проблемы диспетчера Flux Store 2 Диспетчер Action 1 Component 3 Action 1 43
  44. 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. 45. Проблемы диспетчера Flux https://github.com/facebook/flux/issues/47 45
  46. 46. Проблемы реализаций Flux • Обилие boilerplate-кода • Заточенность кода под API • Логика сторов связана с их состоянием • Сложно сделать record/replay состояний • Сложная для понимания роль диспетчера • Проблема повторного использования 46
  47. 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. 48. Все эти проблемы решает redux 48
  49. 49. Обновление архитектуры 49
  50. 50. Сторы — не классы А функции описывающие мутации: 50
  51. 51. Раз это функции… 51
  52. 52. Сторы переименованы в reducers 52
  53. 53. Где же теперь state? 53
  54. 54. State хранится в Диспетчере 54
  55. 55. Диспетчера больше нет 55
  56. 56. Диспетчер переименован в Store 56
  57. 57. Это всё? 57
  58. 58. Нет 58
  59. 59. Middleware 59
  60. 60. Middleware • Точка расширения, куда передаётся action, прежде, чем попасть в reducers • Функция, принимающая action, следующий middleware и Store:
 
 
 
 
 
 60
  61. 61. Middleware Этот middleware позволяет диспатчить
 в качестве action обычный Promise 61
  62. 62. View Provider 62
  63. 63. react-redux • connect() • <Provider /> 63
  64. 64. react-redux: connect() • Подключает к компоненту Store • Возвращает новый компонент, который содержит переданный компонент, как вложенный • Ему в свойствах будут переданы подключенный Store и функция dispatch 64
  65. 65. react-redux: connect() 65
  66. 66. react-redux: <Provider /> • Главный компонент • Делает доступным вызов connect() для всех дочерних элементов 66
  67. 67. Схема архитектура 67
  68. 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. 69
  70. 70. Как начать? Подробнейшая документация
 (ссылка в конце) 70
  71. 71. Экосистема
  72. 72. Redux DevTools • Live Edit • Time-Travel 72
  73. 73. Redux Slider Monitor • Time-Travel через
 слайдер 73
  74. 74. Redux GenTest Plugin 74
  75. 75. И ещё море всего https://github.com/xgrommx/awesome-redux 75
  76. 76. Метрики в GitHub Redux Flux 76
  77. 77. Импортозамещение Из России с любовью: Даня Абрамов Санкт-Петербург 77
  78. 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. 79. redux - очередной Flux? Нет 79
  80. 80. redux - the best for isomorphic apps?
 Да 80
  81. 81. Полезные ссылки • http://elm-lang.org/ • http://staltz.com/unidirectional-user-interface- architectures.html • http://martinfowler.com/bliki/CQRS.html 81
  82. 82. Документация http://rackt.github.io/redux/ 82
  83. 83. Вопросы? Twitter: @DenisIzmaylov GitHub: https://github.com/DenisIzmaylov Facebook: http://fb.com/denis.izmaylov 83
  • softzilla1

    Jun. 15, 2016
  • ssuser52c883

    Dec. 9, 2015
  • dimks

    Nov. 26, 2015
  • brodybroderix

    Nov. 5, 2015
  • aleksishafb

    Oct. 14, 2015

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

Views

Total views

1,141

On Slideshare

0

From embeds

0

Number of embeds

3

Actions

Downloads

32

Shares

0

Comments

0

Likes

5

×