Flux

АРХИТЕКТУРА ПРИЛОЖЕНИЯ ДЛЯ ПОСТРОЕНИЯ ПОЛЬЗОВАТЕЛЬСКИХ ИНТЕРФЕЙСОВ

facebook.github.io/flux

Flux — архитектура, не фреймворк

для реализации требуется всего один небольшой модуль

Flux определяет однонаправленный поток для изменения данных

Похож на подход CQRS

Command Query Responsibility Segregation (разделение ответственности на команды и запросы)

martinfowler.com/bliki/CQRS.html

Flux vs. MVC

MVC на земле JavaScript является MV*
Flux не проще MVC
Flux предсказуемей MVC

MV*

большой MV*

Views

Flux не привязан к React.js

Опыт совмещения с Angular.js

Actions

представляют все действия которые пользователь может сделать в приложении
это простые JS-объекты с "type" свойством
значения "type" являются константами

{
  type: ActionTypes.FOLLOW_ZINE,
  zineSlug: 'lightbox-magazine'
}

{
  type: 'LIKE_STAMP',
  stampId: 1024
}

{
  type: 'SHARE_STAMP',
  stampId: 1024,
  service: 'facebook'
}

Action creators

Формируют action,
отправляют его в диспетчер

Dispatcher

pub-sub, но подписчики получают все сообщения

Stores

Модель данных / Состояние приложения
Логика
Любая структура

Flux + React

Корневой компонент отслеживает изменение хранилищ
При изменении любого из сторов вызывается forceUpdate
Компоненты получают данные напрямую из хранилищ (не нужно прокидывать данные по дереву)
Компоненты взаимодействуют с внешним миром через хранилища (получение данных) и действия (отправка данных)

Flux + React + Node.js

Поддержка браузеров без JavaScript
Улучшение времени первой загрузки
Поисковые роботы / SEO

Скелетон изоморфного приложения