Downloaded 33 times
Uploaded byMoscowJS
"Redux: the best for isomorphic apps", Денис Измайлов, MoscowJS 25
Документ обсуждает архитектуру Redux как улучшение модели Flux для разработки изоморфных приложений. Основные преимущества Redux включают устранение избыточного кода, упрощение асинхронных загрузок и более легкое повторное использование функций. Redux решает многие проблемы, связанные с Flux, и обеспечивает лучший пользовательский опыт и производительность приложений.
More Related Content
Similar to "Redux: the best for isomorphic apps", Денис Измайлов, MoscowJS 25
"Redux: the best for isomorphic apps", Денис Измайлов, MoscowJS 25
- 1. redux: the best forisomorphic apps Денис Измайлов Startup Makers 24 сентября 2015
- 2.
- 3.
- 4.
- 5.
- 6. Проблема масштабирования MVC 30апреля 2014, Сан-Франциско F8 Facebook Developer Conference 6
- 7. 30 апреля 2014,Сан-Франциско F8 Facebook Developer Conference 7
- 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.
- 16.
- 17. Основные цели Воспроизводимость состояния stateBstate A state Bstate A 17
- 18. Основные цели Воспроизводимость состояния errorstatestate 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.
- 22. Организация изоморфных приложений API Browser- specificJS Server-specific JS Ваше приложение 22
- 23. Организация изоморфных приложений Browser- specificJS Server-specific JS Бизнес-логика Routes Модели Схемы Валидация i18n Конфигурация Компоненты Стилизация и т.д 23
- 24. Server-Side Rendering (SSR) Генерация отображения настороне сервера 24
- 25.
- 26.
- 27.
- 28.
- 29. Взаимодействие API сервер Front-end сервер Браузер - HTML - критичныйCSS - JavaScript 29
- 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.
- 37.
- 38.
- 39.
- 40. Проблемы реализаций Flux •Обилие boilerplate-кода • Заточенность кода под API • Логика сторов связана с их состоянием • Сложно сделать record/replay состояний 40
- 41. Проблемы реализаций Flux •Обилие boilerplate-кода • Заточенность кода под API • Логика сторов связана с их состоянием • Сложно сделать record/replay состояний • Сложная для понимания роль диспетчера 41
- 42. Проблемы диспетчера Flux Store2 Диспетчер Component 3 Action 1 42
- 43. Проблемы диспетчера Flux Store2 Диспетчер Action 1 Component 3 Action 1 43
- 44. Проблемы диспетчера Flux Store2 Диспетчер Action 1 Component 3 Action 1 Uncaught Error: Invariant Violation: Dispatch.dispatch(...): Cannot dispatch in the middle of a dispatch. 44
- 45.
- 46. Проблемы реализаций Flux •Обилие boilerplate-кода • Заточенность кода под API • Логика сторов связана с их состоянием • Сложно сделать record/replay состояний • Сложная для понимания роль диспетчера • Проблема повторного использования 46
- 47. Проблемы Flux при Server-SideRendering • Сложно реализовать асинхронную загрузку данных • Передача состояния сторов от сервера клиенту • 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.
- 50. Сторы — неклассы А функции описывающие мутации: 50
- 51.
- 52.
- 53. Где же теперьstate? 53
- 54.
- 55.
- 56.
- 57.
- 58.
- 59.
- 60. Middleware • Точка расширения,куда передаётся action, прежде, чем попасть в reducers • Функция, принимающая action, следующий middleware и Store: 60
- 61. Middleware Этот middleware позволяетдиспатчить в качестве action обычный Promise 61
- 62.
- 63.
- 64. react-redux: connect() • Подключаетк компоненту Store • Возвращает новый компонент, который содержит переданный компонент, как вложенный • Ему в свойствах будут переданы подключенный Store и функция dispatch 64
- 65.
- 66. react-redux: <Provider /> •Главный компонент • Делает доступным вызов connect() для всех дочерних элементов 66
- 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.
- 70.
- 71.
- 72. Redux DevTools • LiveEdit • Time-Travel 72
- 73. Redux Slider Monitor •Time-Travel через слайдер 73
- 74.
- 75. И ещё моревсего https://github.com/xgrommx/awesome-redux 75
- 76.
- 77. Импортозамещение Из России слюбовью: Даня Абрамов Санкт-Петербург 77
- 78. Отзывы • “Love whatyou’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 - thebest 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.
- 83. Вопросы? Twitter: @DenisIzmaylov GitHub: https://github.com/DenisIzmaylov Facebook:http://fb.com/denis.izmaylov 83