Embed Size (px)
Citation preview
ИЗОМОРФНЫЕ ПРИЛОЖЕНИЯ С REACT И REDUX
adn.agency
1. Исполняется в различных окружениях
2. Гарантирует одно поведение
3. Справляется с разностью окружений через абстракции
2Что такое Изоморфный Javascript?
3Что он нам дает?
1. Мы можем создать изоморфный Web UI
2. Поддерживает SEO
3. Работает как SPA
4. Единая языковая среда
5. Максимально переиспользуемый код
6. Прирост производительности на старте
4Что он нам не дает?
1. Не работает с хранилищами, работает как правило с RESTfull API
2. Чаще всего используется для Web UI
3. Не включает код для обеспечения безопасности
5
React — это JavaScript библиотека, которая используется для создания пользовательских интерфейсов
6Структура приложения
public/
htmlString.js
src/
components/
AddTodo.jsx
Todo.jsx
TodoList.jsx
app.js
index.js
server.js
package.json
7App.js
Начальное состояние компонента
Функция добавления новой задачи
8AddTodo.jsx
Функция отправки даных формы. Вызывает callback функции добавления новой задачи
9Server.js
10htmlString.js
Функция, которая рендерит компоненту в html строку
11
Чего не хватаетReact?
12Движение данных
MODEL
MODEL
VIEW
VIEW
VIEW
13
MODEL
MODEL
VIEW
VIEW
VIEW
Движение данных
14
Flux
15Что же такое Flux?
Action
Dispatcher
Store
View API
Flux — это архитектура, которую команда Facebook использует при работе с React. Это не фреймворк, или библиотека, это новый архитектурный подход, который дополняет React и принцип однонаправленного потока данных.
16Action / Действие
Action
Dispatcher
Store
View API
Действие — это набор методов, которые вызываются из Представлений (или из любых других мест), чтобы отправить Действия Диспетчеру.
17Dispatcher / Диспетчер
Action
Dispatcher
Store
View API
В сущности, Диспетчер — это менеджер всего этого процесса. Это центральный узел вашего приложения. Диспетчер получает на вход действия и рассылает эти действия (и связанные с ними данные) зарегистрированным обработчикам.
18Stores / Хранилища
Action
Dispatcher
Store
View API
Хранилища в Flux управляют состоянием определенных частей предметной области вашего приложения. На более высоком уровне это означает, что Хранилища хранят данные, методы получения этих данных и зарегистрированные в Диспетчере обработчики Действий.
19Controller Views / Представления
Action
Dispatcher
Store
View API
Представления — это всего лишь React-компоненты, которые подписаны на событие «change» и получают состояние приложения из Хранилищ.
20Структура приложения
app/
actions/
AppActions.js
components/
AddTodo.jsx
Todo.jsx
TodoList.jsx
constants/
AppConstants.js
dispatcher/
AppDispatcher.js
stores/
TodoStore.js
App.js
todo.js
21App.js
Обработчик событий изменения Store
Подписываемся на событие изменения Store
22AddTodo.jsx
Обработчик событий отправки форм. Вызывает Action который добавляет задачу
23AppActions.js
Action добавление новой задачи
24TodoStore.js
Обработчик события изменения состояния приложения
Диспетчер, который обрабатывает это событие
25AppDispatcher.js
Диспетчер приложения
26
Зачем менять Flux?
27Проблема №1. Код хранилищ не может быть перезагружен без обнуления состояния.
todos: [`eat`, `sleep`]
addTodo: function(todo) { //add to back
}
todos: [ ]
addTodo: function(todo) { //add to front
}
todos: [`eat`, `sleep`]
addTodo: function(todo) { //add to back
}
todos: [`eat`, `sleep`]
addTodo: function(todo) { //add to front
}
28
Action 1
State
Action 2 Action 3 Action 1
State 2
Action 2 Action 3
State 2State 1
Проблема №2. Состояние перезаписывается при каждом действии.
29Проблема №3. Нет правильных “мест” для сторонних плагинов.
Log
Store
Dispatcher
StoreStore
Log
Dispatch
Reducer
ReducerReducer
ReducerReducerReducerReducer
30
Redux
Store
Reducer
UIAction Reducer
Reducer
31Структура приложения
app/
actions/
AppActions.js
components/
AddTodo.jsx
Todo.jsx
TodoList.jsx
constants/
AppConstants.js
redusers/
redusers.js
App.js
Todo.js
32App.js
Функция, которая берет значения из глобального Store
33AddTodo.jsx
Обработчик событий отправки форм. Вызывает Action который добавляет задачу
34AppActions.js
35redusers.js
Изменяет Store в зависимости от переданного Action
Технический директор ADN digital studio
Михаил Полев [email protected]
Спасибо за внимание!
goo.gl/d47OoO
Ссылка на презентацию:
