Архитектура Facebook's flux в рамках i-bem

1. Архитектура facebook’s flux
на базе i-bem и immutable.js
Дмитрий Душкин, sky2high.net

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

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

4. Собравшись с силами, мы погружаемся в код
4
findBlockOutside
innerBlock.hasMod
i-global
afterCurrentEvent
setTimeout

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

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

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

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

9. Живое демо
9

10. Итоги
Единое хранилище состояния приложения позволяет отказаться
от многих связей между блоками
Вообще хорошо, когда нет внешних связей (findBlockOutside)
Неглубокий call stack = понятный код
React не очень-то и нужен. Изменять DOM можно самим точечно.
(потенционально) Проще писать unit-тесты: достаточно выставить
желаемое состояние и проследить за ожидаемой реакцией.
10

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

12. Репозиторий:
https://github.com/DimitryDushkin/bem-store
Спасибо за всё.) !