Что такое Изоморфный Javascript? 1. Исполняется в различных окружениях 2. Гарантирует одно поведение 3. Справляется с разностью окружений через абстракции

1. ИЗОМОРФНЫЕ
ПРИЛОЖЕНИЯ
С REACT
И REDUX
adn.agency

2. 1. Исполняется в различных окружениях
2. Гарантирует одно поведение
3. Справляется с разностью окружений
через абстракции
2Что такое Изоморфный
Javascript?

3. 3Что он нам дает?
1. Мы можем создать изоморфный Web UI
2. Поддерживает SEO
3. Работает как SPA
4. Единая языковая среда
5. Максимально переиспользуемый код
6. Прирост производительности на старте

4. 4Что он нам не дает?
1. Не работает с хранилищами, работает
как правило с RESTfull API
2. Чаще всего используется для Web UI
3. Не включает код для обеспечения
безопасности

5. 5
React — это JavaScript
библиотека, которая
используется для
создания
пользовательских
интерфейсов

6. 6Структура приложения
public/
htmlString.js
src/
components/
AddTodo.jsx
Todo.jsx
TodoList.jsx
app.js
index.js
server.js
package.json

7. 7App.js
Начальное состояние
компонента
Функция добавления новой
задачи

8. 8AddTodo.jsx
Функция отправки даных
формы. Вызывает callback
функции добавления новой
задачи

9. 9Server.js

10. 10htmlString.js
Функция, которая рендерит
компоненту в html строку

11. 11
Чего
не хватает
React?

12. 12Движение данных
MODEL
MODEL
VIEW
VIEW
VIEW

13. 13
MODEL
MODEL
VIEW
VIEW
VIEW
Движение данных

14. 14
Flux

15. 15Что же такое Flux?
Action
Dispatcher
Store
View API
Flux — это архитектура,
которую команда Facebook
использует при работе с
React. Это не фреймворк,
или библиотека, это новый
архитектурный подход,
который дополняет React
и принцип однонаправленного
потока данных.

16. 16Action / Действие
Action
Dispatcher
Store
View API
Действие — это набор
методов, которые
вызываются из
Представлений (или из
любых других мест),
чтобы отправить
Действия Диспетчеру.

17. 17Dispatcher / Диспетчер
Action
Dispatcher
Store
View API
В сущности, Диспетчер
— это менеджер всего
этого процесса. Это
центральный узел
вашего приложения.
Диспетчер получает
на вход действия
и рассылает эти
действия (и связанные
с ними данные)
зарегистрированным
обработчикам.

18. 18Stores / Хранилища
Action
Dispatcher
Store
View API
Хранилища в Flux управляют
состоянием определенных
частей предметной области
вашего приложения.
На более высоком уровне
это означает, что Хранилища
хранят данные, методы
получения этих данных
и зарегистрированные
в Диспетчере обработчики
Действий.

19. 19Controller Views / Представления
Action
Dispatcher
Store
View API
Представления — это всего
лишь React-компоненты,
которые подписаны
на событие «change»
и получают состояние
приложения из Хранилищ.

20. 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

21. 21App.js
Обработчик событий изменения
Store
Подписываемся на событие
изменения Store

22. 22AddTodo.jsx
Обработчик событий отправки
форм. Вызывает Action который
добавляет задачу

23. 23AppActions.js
Action добавление новой задачи

24. 24TodoStore.js
Обработчик события изменения
состояния приложения
Диспетчер, который
обрабатывает это событие

25. 25AppDispatcher.js
Диспетчер приложения

26. 26
Зачем
менять
Flux?

27. 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. 28
Action 1
State
Action 2 Action 3 Action 1
State 2
Action 2 Action 3
State 2State 1
Проблема №2. Состояние перезаписывается при
каждом действии.

29. 29Проблема №3. Нет правильных “мест” для сторонних
плагинов.
Log
Store
Dispatcher
StoreStore
Log
Dispatch
Reducer
ReducerReducer
ReducerReducerReducerReducer

30. 30
Redux
Store
Reducer
UIAction Reducer
Reducer

31. 31Структура приложения
app/
actions/
AppActions.js
components/
AddTodo.jsx
Todo.jsx
TodoList.jsx
constants/
AppConstants.js
redusers/
redusers.js
App.js
Todo.js

32. 32App.js
Функция, которая берет
значения из глобального Store

33. 33AddTodo.jsx
Обработчик событий отправки
форм. Вызывает Action который
добавляет задачу

34. 34AppActions.js

35. 35redusers.js
Изменяет Store в зависимости
от переданного Action

36. Технический директор ADN digital studio
Михаил Полев
mihail@adn.agency
Спасибо
за внимание!
goo.gl/d47OoO
Ссылка на презентацию:

37. 37
hi@adn.agency