Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Архитектура facebook’s flux
на базе i-bem и immutable.js
Дмитрий Душкин, sky2high.net
Драма front-end
В приложении
постоянно происходит
куча событий и
реакций на них,
которые тоже могут
порождать события
и ре...
3
Пожалуйста, нет, не надо!
Хватит условий!
Новая задача: загружать рекламу в просмотрщик, если:
— просмотрщик открыт,
— в...
Собравшись с силами, мы погружаемся в код
4
findBlockOutside
innerBlock.hasMod
i-global
afterCurrentEvent
setTimeout
Flux по-простому
5
Flux по-простому
в i-bem (1/3)
6
Flux по-простому
в i-bem (2/3)
7
Flux по-простому
в i-bem (3/3)
8
Живое демо
9
Итоги
Единое хранилище состояния приложения позволяет отказаться
от многих связей между блоками
Вообще хорошо, когда нет в...
Минусы текущей реализации
Immutable.min.js ≈ 20 Кб gzip, хотя нужно от него только
половина возможностей
11
Репозиторий:
https://github.com/DimitryDushkin/bem-store
Спасибо за всё.) !
Upcoming SlideShare
Loading in …5
×

Flux + i bem = bem-store

3,965 views

Published on

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

Published in: Technology
  • Be the first to comment

Flux + i bem = bem-store

  1. 1. Архитектура facebook’s flux на базе i-bem и immutable.js Дмитрий Душкин, sky2high.net
  2. 2. Драма front-end В приложении постоянно происходит куча событий и реакций на них, которые тоже могут порождать события и реакции и т.д. и т.п. 2
  3. 3. 3 Пожалуйста, нет, не надо! Хватит условий! Новая задача: загружать рекламу в просмотрщик, если: — просмотрщик открыт, — выбранное изображение является рекламным, — пришли соотв. данные, — это первая страница выдачи, — перешли с главной страницы, — в этой сессии этот блок еще не показывали, — это эксперимент. Куча внеш них условий Куча внеш них услови Куча внеш них у
  4. 4. Собравшись с силами, мы погружаемся в код 4 findBlockOutside innerBlock.hasMod i-global afterCurrentEvent setTimeout
  5. 5. Flux по-простому 5
  6. 6. Flux по-простому в i-bem (1/3) 6
  7. 7. Flux по-простому в i-bem (2/3) 7
  8. 8. Flux по-простому в i-bem (3/3) 8
  9. 9. Живое демо 9
  10. 10. Итоги Единое хранилище состояния приложения позволяет отказаться от многих связей между блоками Вообще хорошо, когда нет внешних связей (findBlockOutside) Неглубокий call stack = понятный код React не очень-то и нужен. Изменять DOM можно самим точечно. (потенционально) Проще писать unit-тесты: достаточно выставить желаемое состояние и проследить за ожидаемой реакцией. 10
  11. 11. Минусы текущей реализации Immutable.min.js ≈ 20 Кб gzip, хотя нужно от него только половина возможностей 11
  12. 12. Репозиторий: https://github.com/DimitryDushkin/bem-store Спасибо за всё.) !

×