Flux + i bem = bem-store
-
Upload
dmitry-dushkin -
Category
Technology
-
view
3.539 -
download
0
Transcript of Flux + i bem = bem-store
![Page 1: Flux + i bem = bem-store](https://reader034.fdocument.pub/reader034/viewer/2022050613/5a6e3f457f8b9a505f8b55e5/html5/thumbnails/1.jpg)
Архитектура facebook’s flux на базе i-bem и immutable.js
Дмитрий Душкин, sky2high.net
![Page 2: Flux + i bem = bem-store](https://reader034.fdocument.pub/reader034/viewer/2022050613/5a6e3f457f8b9a505f8b55e5/html5/thumbnails/2.jpg)
Драма front-end
В приложении постоянно происходит куча событий и реакций на них, которые тоже могут порождать события и реакции и т.д. и т.п.
2
![Page 3: Flux + i bem = bem-store](https://reader034.fdocument.pub/reader034/viewer/2022050613/5a6e3f457f8b9a505f8b55e5/html5/thumbnails/3.jpg)
3
Пожалуйста, нет, не надо! Хватит условий!
Новая задача: загружать рекламу в просмотрщик, если: — просмотрщик открыт, — выбранное изображение является рекламным, — пришли соотв. данные, — это первая страница выдачи, — перешли с главной страницы, — в этой сессии этот блок еще не показывали, — это эксперимент.
Куча в
нешних у
слови
й
Куча в
нешних у
слови
й
Куча в
нешних у
слови
й
![Page 4: Flux + i bem = bem-store](https://reader034.fdocument.pub/reader034/viewer/2022050613/5a6e3f457f8b9a505f8b55e5/html5/thumbnails/4.jpg)
Собравшись с силами, мы погружаемся в код
4
findBlockOutsi
de
innerBlock.hasMod
i-global
afterCurrentEventsetTimeout
![Page 5: Flux + i bem = bem-store](https://reader034.fdocument.pub/reader034/viewer/2022050613/5a6e3f457f8b9a505f8b55e5/html5/thumbnails/5.jpg)
Flux по-простому
5
![Page 6: Flux + i bem = bem-store](https://reader034.fdocument.pub/reader034/viewer/2022050613/5a6e3f457f8b9a505f8b55e5/html5/thumbnails/6.jpg)
Flux по-простому в i-bem (1/3)
6
![Page 7: Flux + i bem = bem-store](https://reader034.fdocument.pub/reader034/viewer/2022050613/5a6e3f457f8b9a505f8b55e5/html5/thumbnails/7.jpg)
Flux по-простому в i-bem (2/3)
7
![Page 8: Flux + i bem = bem-store](https://reader034.fdocument.pub/reader034/viewer/2022050613/5a6e3f457f8b9a505f8b55e5/html5/thumbnails/8.jpg)
Flux по-простому в i-bem (3/3)
8
![Page 9: Flux + i bem = bem-store](https://reader034.fdocument.pub/reader034/viewer/2022050613/5a6e3f457f8b9a505f8b55e5/html5/thumbnails/9.jpg)
Живое демо
9
![Page 10: Flux + i bem = bem-store](https://reader034.fdocument.pub/reader034/viewer/2022050613/5a6e3f457f8b9a505f8b55e5/html5/thumbnails/10.jpg)
Итоги
Единое хранилище состояния приложения позволяет отказаться от многих связей между блоками
Вообще хорошо, когда нет внешних связей (findBlockOutside)
Неглубокий call stack = понятный код
React не очень-то и нужен. Изменять DOM можно самим точечно.
(потенционально) Проще писать unit-тесты: достаточно выставить желаемое состояние и проследить за ожидаемой реакцией.
10
![Page 11: Flux + i bem = bem-store](https://reader034.fdocument.pub/reader034/viewer/2022050613/5a6e3f457f8b9a505f8b55e5/html5/thumbnails/11.jpg)
Минусы текущей реализации
Immutable.min.js ≈ 20 Кб gzip, хотя нужно от него только половина возможностей
11
![Page 12: Flux + i bem = bem-store](https://reader034.fdocument.pub/reader034/viewer/2022050613/5a6e3f457f8b9a505f8b55e5/html5/thumbnails/12.jpg)
Репозиторий:
https://github.com/DimitryDushkin/bem-store
Спасибо за всё.) !