"Flux — новый взгляд на старые проблемы" — Сергей Прохоров, MoscowJS 18

Новый взгляд на старые проблемы

MoscowJS 18

29 января 2015 г.

Сергей Прохоров

1

В активном поиске…

2

AngularJS, Ember.js,..

Внутри все есть!

3

● Сложные решения● Порог вхождения● Ограничения● Нужно уметь готовить

На выходе

4

Боль…

5

Ok. Backbone.js

Свобода!

Выбираем архитектуру

А можно всех посмотреть?

MV*● MVC● MVP● MV[‘Здесь могла быть ваша реклама’]

8

Нужно больше боли!

9

Controller

Controller

Model View

Model View

View

/MV*./ instanceof 42

10

11

Блок-схема Flux

12

Задачи React View● Отображение данных● Обработка польз. действий

13

React View

… Купить …

14

React View

… Купить …

15

React View

… Купить …

16

Блок-схема Flux

17

Задачи Action Creator● Передача данных в Dispatcher● Запросы к API

18

Action Creator

19

Action Creator

20

Action Creator

21

Блок-схема Flux

22

Задачи Dispatcher● Передача данных в Store

23

Dispatcher

24

Dispatcher

25

Dispatcher

26

Блок-схема Flux

27

Задачи Store

28

● Информировать представления● Хранить состояние

Store

29

Store

30

Store

31

Store

32

Store

33

Синхронная работа Store

34

● Однонаправленный поток данныхUnidirectional data flow

● Независимые хранилища данныхIndependent stores

● Отсутствие каскадных обновленийNo cascading actions

● Возможность синхронной обработки данныхSynchronous stores

Отличительные особенности

35

● Простота и предсказуемость● Мало магии● Линейное масштабирование● Небольшое количество абстракций● Boilerplate

Profit?

36

В зоопарке

37

● McFly — github.com/kenwheeler/mcfly● Reflux — github.com/spoike/refluxjs● Alt — github.com/goatslacker/alt● Delorean — deloreanjs.com● Marty.js — martyjs.org● Fluxxor — fluxxor.com● …

СсылкиFlux — facebook.github.io/fluxGithub — github.com/facebook/flux

38

Вопросы?

Сергей Прохоровgithub.com/proxyfabiofacebook.com/proxyfabio

39