Flux + i bem = bem-store

Архитектура facebook’s flux на базе i-bem и immutable.js

Дмитрий Душкин, sky2high.net

Драма front-end

В приложении постоянно происходит куча событий и реакций на них, которые тоже могут порождать события и реакции и т.д. и т.п.

2

3

Пожалуйста, нет, не надо! Хватит условий!

Новая задача: загружать рекламу в просмотрщик, если: — просмотрщик открыт, — выбранное изображение является рекламным, — пришли соотв. данные, — это первая страница выдачи, — перешли с главной страницы, — в этой сессии этот блок еще не показывали, — это эксперимент.

Куча в

нешних у

слови

й

Куча в

нешних у

слови

й

Куча в

нешних у

слови

й

Собравшись с силами, мы погружаемся в код

4

findBlockOutsi

de

innerBlock.hasMod

i-global

afterCurrentEventsetTimeout

Flux по-простому

5

Flux по-простому в i-bem (1/3)

6

Flux по-простому в i-bem (2/3)

7

Flux по-простому в i-bem (3/3)

8

Живое демо

9

Итоги

Единое хранилище состояния приложения позволяет отказаться от многих связей между блоками

Вообще хорошо, когда нет внешних связей (findBlockOutside)

Неглубокий call stack = понятный код

React не очень-то и нужен. Изменять DOM можно самим точечно.

(потенционально) Проще писать unit-тесты: достаточно выставить желаемое состояние и проследить за ожидаемой реакцией.

10

Минусы текущей реализации

Immutable.min.js ≈ 20 Кб gzip, хотя нужно от него только половина возможностей

11

Репозиторий:

https://github.com/DimitryDushkin/bem-store

Спасибо за всё.) !