8. Flux — это более безопасный MVC
• Нет моделей и привязок
• Когда Store изменился, данные запрашиваются заново
• Есть Dispatcher, который контролирует Workflow
• Нет беспорядка с событиями
• Обновление View полностью
8
10. Почти как веб-компоненты, но:
• Их можно отрендерить на сервере
• Они хранятся как директория в проекте
• Компонент описыватся файлом cat-component.json
• Шаблон на языке любого* шаблонизатора
• Нет Shadow DOM
• Можно ставить через NPM
10
13. Использовать как кастомные тэги:
<cat-hello-world id="uniq-id"
cat-store="some/Store"
any-attribute="any-value">
</cat-hello-world>
В этот тэг отрендерится шаблон, который может содержать тэги
компонентов, процесс повторяется рекурсивно
01.
02.
03.
04.
13
14. Особенности и исключения:
• Уникальный ID обязателен
• Корневой компонент document
• Компонент document нельзя использовать тэгом
• Компонент document нельзя привязать к Store
• Компонент head привязывается к head-элементу
14
15. Как писать логику в index.js
module.exports = HelloWorld;
function HelloWorld() {...}
// этапы жизни компонента
HelloWorld.prototype.render = function () {...}
HelloWorld.prototype.bind = function () {...}
HelloWorld.prototype.unbind = function () {...}
01.
02.
03.
04.
05.
06.
15
16. Этап "render"
Тэг компонента рендерит свой шаблон
HelloWorld.prototype.render = function () {
// может вернуть данные для шаблона
// или Promise на них
return {hello: 'world'};
};
01.
02.
03.
04.
05.
16
17. Этап "bind"
Рендеринг завершен, можно привязать события
HelloWorld.prototype.bind = function () {
// может вернуть карту событий
// для дочерних элементов или Promise на нее
return {
click: {'div.clickable': this.clickHandler}
};
};
01.
02.
03.
04.
05.
06.
07.
17
18. Этап "unbind"
Компонент готовится к удалению или обновлению
HelloWorld.prototype.unbind = function () {
// здесь нужно прибраться, если вы
// что-то делали в bind помимо карты событий
// события из карты отвязываются автоматически
};
01.
02.
03.
04.
05.
18
21. Flux Stores в Catberry.js
Директория "catberry_stores" с .js-файлами
./catberry_stores/
doge/
Wow.js
Such.js
Store.js
grumpy-cat/
No.js
21
22. Особенности:
• Имя Store — это относительный путь без расширения,
например doge/Wow
• Можно привязать компонент через атрибут cat-store
• Когда Store меняется обновляются все привязанные компоненты
• Store получают параметры из URL через роутинг
22
23. Как писать логику Store
module.exports = Wow;
function Wow() {...}
// время актуальности данных в мс
Wow.prototype.$lifetime = function () {...}
// загрузка данных
Wow.prototype.load = function () {...}
// обработка Action
Wow.prototype.handleVeryAction = function () {...}
01.
02.
03.
04.
05.
06.
07.
08.
23
24. Метод "load"
Wow.prototype.load = function () {...}
// запрашивает данные, например по REST
// возвращает объект или Promise
return {hello: 'world'};
};
01.
02.
03.
04.
05.
24
30. У Store дополнительно:
• state
• changed()
• setDependency('storeName')/unsetDependency('storeName')
• getStoreData('storeName')
• sendAction('storeName', ‘actionName’, object)
• sendBroadcastAction(‘name’, object)
30
31. Как из компонента получить данные Store
this.$context.getStoreData()
.then(function () {
// ура, Store дал данные
});
.catch(function (error) {
// печаль :(
});
01.
02.
03.
04.
05.
06.
07.
31
37. Что происходит первый раз на сервере:
• Рендерится компонент document
• Если встречаются внутри компоненты, и они рендерятся
• Готовый HTML немедленно отдается в браузер
• Пользователь видит контент с минимально задержкой
• Браузер начинает параллельно загружать ресурсы
37