Adn@it'summer - Изоморфные приложения с React и Redux

ИЗОМОРФНЫЕ ПРИЛОЖЕНИЯ С 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

Михаил Полев mihail@adn.agency

Спасибо за внимание!

goo.gl/d47OoO

Ссылка на презентацию:

37

hi@adn.agency