#6 "Изоморфный фреймворк catberry.js" Денис Речкунов
TRANSCRIPT
![Page 1: #6 "Изоморфный фреймворк Catberry.js" Денис Речкунов](https://reader034.vdocuments.pub/reader034/viewer/2022042615/55b53632bb61eb33258b480b/html5/thumbnails/1.jpg)
pragmadash Денис Речкуновnode.js-разработчик
Изоморфный фреймворк Catberry.js
![Page 2: #6 "Изоморфный фреймворк Catberry.js" Денис Речкунов](https://reader034.vdocuments.pub/reader034/viewer/2022042615/55b53632bb61eb33258b480b/html5/thumbnails/2.jpg)
Если коротко, что такое Catberry.js:• Это фреймворк с Flux-архитектурой
• Изоморфными веб-компонентами
• И прогрессивным рендерингом на сервере
2
![Page 3: #6 "Изоморфный фреймворк Catberry.js" Денис Речкунов](https://reader034.vdocuments.pub/reader034/viewer/2022042615/55b53632bb61eb33258b480b/html5/thumbnails/3.jpg)
Что ты сейчас сказал?
![Page 4: #6 "Изоморфный фреймворк Catberry.js" Денис Речкунов](https://reader034.vdocuments.pub/reader034/viewer/2022042615/55b53632bb61eb33258b480b/html5/thumbnails/4.jpg)
Flux
![Page 5: #6 "Изоморфный фреймворк Catberry.js" Денис Речкунов](https://reader034.vdocuments.pub/reader034/viewer/2022042615/55b53632bb61eb33258b480b/html5/thumbnails/5.jpg)
Flux
![Page 6: #6 "Изоморфный фреймворк Catberry.js" Денис Речкунов](https://reader034.vdocuments.pub/reader034/viewer/2022042615/55b53632bb61eb33258b480b/html5/thumbnails/6.jpg)
Flux
![Page 7: #6 "Изоморфный фреймворк Catberry.js" Денис Речкунов](https://reader034.vdocuments.pub/reader034/viewer/2022042615/55b53632bb61eb33258b480b/html5/thumbnails/7.jpg)
Почему Flux?
![Page 8: #6 "Изоморфный фреймворк Catberry.js" Денис Речкунов](https://reader034.vdocuments.pub/reader034/viewer/2022042615/55b53632bb61eb33258b480b/html5/thumbnails/8.jpg)
Flux — это более безопасный MVC• Нет моделей и привязок
• Когда Store изменился, данные запрашиваются заново
• Есть Dispatcher, который контролирует Workflow
• Нет беспорядка с событиями
• Обновление View полностью
8
![Page 9: #6 "Изоморфный фреймворк Catberry.js" Денис Речкунов](https://reader034.vdocuments.pub/reader034/viewer/2022042615/55b53632bb61eb33258b480b/html5/thumbnails/9.jpg)
Web/Cat-Components
![Page 10: #6 "Изоморфный фреймворк Catberry.js" Денис Речкунов](https://reader034.vdocuments.pub/reader034/viewer/2022042615/55b53632bb61eb33258b480b/html5/thumbnails/10.jpg)
Почти как веб-компоненты, но:• Их можно отрендерить на сервере
• Они хранятся как директория в проекте
• Компонент описыватся файлом cat-component.json
• Шаблон на языке любого* шаблонизатора
• Нет Shadow DOM
• Можно ставить через NPM
10
![Page 11: #6 "Изоморфный фреймворк Catberry.js" Денис Речкунов](https://reader034.vdocuments.pub/reader034/viewer/2022042615/55b53632bb61eb33258b480b/html5/thumbnails/11.jpg)
Cat-componenthello-world/
assets/
hello.svg
world.svg
index.js
template.hbs
error.hbs
cat-component.json
11
![Page 12: #6 "Изоморфный фреймворк Catberry.js" Денис Речкунов](https://reader034.vdocuments.pub/reader034/viewer/2022042615/55b53632bb61eb33258b480b/html5/thumbnails/12.jpg)
cat-component.json{
"name": "hello-world",
"logic": "./index.js",
"template": "./template.hbs",
"errorTemplate": "./error.hbs"
}
01.
02.
03.
04.
05.
06.
12
![Page 13: #6 "Изоморфный фреймворк Catberry.js" Денис Речкунов](https://reader034.vdocuments.pub/reader034/viewer/2022042615/55b53632bb61eb33258b480b/html5/thumbnails/13.jpg)
Использовать как кастомные тэги:<cat-hello-world id="uniq-id"
cat-store="some/Store"
any-attribute="any-value">
</cat-hello-world>
В этот тэг отрендерится шаблон, который может содержать тэги
компонентов, процесс повторяется рекурсивно
01.
02.
03.
04.
13
![Page 14: #6 "Изоморфный фреймворк Catberry.js" Денис Речкунов](https://reader034.vdocuments.pub/reader034/viewer/2022042615/55b53632bb61eb33258b480b/html5/thumbnails/14.jpg)
Особенности и исключения:• Уникальный ID обязателен
• Корневой компонент document
• Компонент document нельзя использовать тэгом
• Компонент document нельзя привязать к Store
• Компонент head привязывается к head-элементу
14
![Page 15: #6 "Изоморфный фреймворк Catberry.js" Денис Речкунов](https://reader034.vdocuments.pub/reader034/viewer/2022042615/55b53632bb61eb33258b480b/html5/thumbnails/15.jpg)
Как писать логику в index.jsmodule.exports = HelloWorld;
function HelloWorld() {...}
// этапы жизни компонента
HelloWorld.prototype.render = function () {...}
HelloWorld.prototype.bind = function () {...}
HelloWorld.prototype.unbind = function () {...}
01.
02.
03.
04.
05.
06.
15
![Page 16: #6 "Изоморфный фреймворк Catberry.js" Денис Речкунов](https://reader034.vdocuments.pub/reader034/viewer/2022042615/55b53632bb61eb33258b480b/html5/thumbnails/16.jpg)
Этап "render"Тэг компонента рендерит свой шаблон
HelloWorld.prototype.render = function () {
// может вернуть данные для шаблона
// или Promise на них
return {hello: 'world'};
};
01.
02.
03.
04.
05.
16
![Page 17: #6 "Изоморфный фреймворк Catberry.js" Денис Речкунов](https://reader034.vdocuments.pub/reader034/viewer/2022042615/55b53632bb61eb33258b480b/html5/thumbnails/17.jpg)
Этап "bind"Рендеринг завершен, можно привязать события
HelloWorld.prototype.bind = function () {
// может вернуть карту событий
// для дочерних элементов или Promise на нее
return {
click: {'div.clickable': this.clickHandler}
};
};
01.
02.
03.
04.
05.
06.
07.
17
![Page 18: #6 "Изоморфный фреймворк Catberry.js" Денис Речкунов](https://reader034.vdocuments.pub/reader034/viewer/2022042615/55b53632bb61eb33258b480b/html5/thumbnails/18.jpg)
Этап "unbind"Компонент готовится к удалению или обновлению
HelloWorld.prototype.unbind = function () {
// здесь нужно прибраться, если вы
// что-то делали в bind помимо карты событий
// события из карты отвязываются автоматически
};
01.
02.
03.
04.
05.
18
![Page 19: #6 "Изоморфный фреймворк Catberry.js" Денис Речкунов](https://reader034.vdocuments.pub/reader034/viewer/2022042615/55b53632bb61eb33258b480b/html5/thumbnails/19.jpg)
А откуда брать данные?
![Page 20: #6 "Изоморфный фреймворк Catberry.js" Денис Речкунов](https://reader034.vdocuments.pub/reader034/viewer/2022042615/55b53632bb61eb33258b480b/html5/thumbnails/20.jpg)
Из Store, конечно же
![Page 21: #6 "Изоморфный фреймворк Catberry.js" Денис Речкунов](https://reader034.vdocuments.pub/reader034/viewer/2022042615/55b53632bb61eb33258b480b/html5/thumbnails/21.jpg)
Flux Stores в Catberry.jsДиректория "catberry_stores" с .js-файлами
./catberry_stores/
doge/
Wow.js
Such.js
Store.js
grumpy-cat/
No.js
21
![Page 22: #6 "Изоморфный фреймворк Catberry.js" Денис Речкунов](https://reader034.vdocuments.pub/reader034/viewer/2022042615/55b53632bb61eb33258b480b/html5/thumbnails/22.jpg)
Особенности:• Имя Store — это относительный путь без расширения,
например doge/Wow
• Можно привязать компонент через атрибут cat-store
• Когда Store меняется обновляются все привязанные компоненты
• Store получают параметры из URL через роутинг
22
![Page 23: #6 "Изоморфный фреймворк Catberry.js" Денис Речкунов](https://reader034.vdocuments.pub/reader034/viewer/2022042615/55b53632bb61eb33258b480b/html5/thumbnails/23.jpg)
Как писать логику Storemodule.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
![Page 24: #6 "Изоморфный фреймворк Catberry.js" Денис Речкунов](https://reader034.vdocuments.pub/reader034/viewer/2022042615/55b53632bb61eb33258b480b/html5/thumbnails/24.jpg)
Метод "load"Wow.prototype.load = function () {...}
// запрашивает данные, например по REST
// возвращает объект или Promise
return {hello: 'world'};
};
01.
02.
03.
04.
05.
24
![Page 25: #6 "Изоморфный фреймворк Catberry.js" Денис Речкунов](https://reader034.vdocuments.pub/reader034/viewer/2022042615/55b53632bb61eb33258b480b/html5/thumbnails/25.jpg)
Метод "handle"Wow.prototype.handleVeryAction = function () {...}
// может запостить данные по REST
// вернуть результат или Promise
return {response: 'some'};
};
01.
02.
03.
04.
05.
25
![Page 26: #6 "Изоморфный фреймворк Catberry.js" Денис Речкунов](https://reader034.vdocuments.pub/reader034/viewer/2022042615/55b53632bb61eb33258b480b/html5/thumbnails/26.jpg)
Метод "handle"Wow.prototype.handleVeryAction = function () {...}
// а может отправить сигнал,
// что Store изменился
this. $context .changed();
};
01.
02.
03.
04.
05.
26
![Page 27: #6 "Изоморфный фреймворк Catberry.js" Денис Речкунов](https://reader034.vdocuments.pub/reader034/viewer/2022042615/55b53632bb61eb33258b480b/html5/thumbnails/27.jpg)
Главный герой— this.$context
![Page 28: #6 "Изоморфный фреймворк Catberry.js" Денис Речкунов](https://reader034.vdocuments.pub/reader034/viewer/2022042615/55b53632bb61eb33258b480b/html5/thumbnails/28.jpg)
У компонента или Store есть $context:• isBrowser
• isServer
• userAgent
• location
• referrer
• locator
• redirect('location')
• cookie.get('name')/cookie.set(object)
28
![Page 29: #6 "Изоморфный фреймворк Catberry.js" Денис Речкунов](https://reader034.vdocuments.pub/reader034/viewer/2022042615/55b53632bb61eb33258b480b/html5/thumbnails/29.jpg)
У компонента дополнительно:• element
• attributes
• getComponentById(‘id’)
• createComponent(‘name’, attributesObject)
• collectGarbage()
• getStoreData()
• sendAction(‘name’, object)
• sendBroadcastAction(‘name’, object)
29
![Page 30: #6 "Изоморфный фреймворк Catberry.js" Денис Речкунов](https://reader034.vdocuments.pub/reader034/viewer/2022042615/55b53632bb61eb33258b480b/html5/thumbnails/30.jpg)
У Store дополнительно:• state
• changed()
• setDependency('storeName')/unsetDependency('storeName')
• getStoreData('storeName')
• sendAction('storeName', ‘actionName’, object)
• sendBroadcastAction(‘name’, object)
30
![Page 31: #6 "Изоморфный фреймворк Catberry.js" Денис Речкунов](https://reader034.vdocuments.pub/reader034/viewer/2022042615/55b53632bb61eb33258b480b/html5/thumbnails/31.jpg)
Как из компонента получить данные Storethis.$context.getStoreData()
.then(function () {
// ура, Store дал данные
});
.catch(function (error) {
// печаль :(
});
01.
02.
03.
04.
05.
06.
07.
31
![Page 32: #6 "Изоморфный фреймворк Catberry.js" Денис Речкунов](https://reader034.vdocuments.pub/reader034/viewer/2022042615/55b53632bb61eb33258b480b/html5/thumbnails/32.jpg)
Как из компонента отправить Actionthis.$context.sendAction('item-submit', item)
.then(function () {
// ура, Action обработался
});
.catch(function (error) {
// печаль :(
});
01.
02.
03.
04.
05.
06.
07.
32
![Page 33: #6 "Изоморфный фреймворк Catberry.js" Денис Речкунов](https://reader034.vdocuments.pub/reader034/viewer/2022042615/55b53632bb61eb33258b480b/html5/thumbnails/33.jpg)
Service Locatorlocator.register(‘uhr’, UHR);
locator.registerInstance('uhr', new UHR());
locator.resolve(‘uhr’);
locator.resolveAll(‘uhr’);
locator.resolveInstance(SomeConstructorDependsOnUHR);
01.
02.
03.
04.
05.
33
![Page 34: #6 "Изоморфный фреймворк Catberry.js" Денис Речкунов](https://reader034.vdocuments.pub/reader034/viewer/2022042615/55b53632bb61eb33258b480b/html5/thumbnails/34.jpg)
Dependency Injectionfunction StoreConstructor ( $uhr , someConfigSection) {
// можно внедрять и использовать $uhr
// и внедрять даже конфиг-секции
}
01.
02.
03.
04.
34
![Page 35: #6 "Изоморфный фреймворк Catberry.js" Денис Речкунов](https://reader034.vdocuments.pub/reader034/viewer/2022042615/55b53632bb61eb33258b480b/html5/thumbnails/35.jpg)
Прогрессивныйрендеринг
![Page 36: #6 "Изоморфный фреймворк Catberry.js" Денис Речкунов](https://reader034.vdocuments.pub/reader034/viewer/2022042615/55b53632bb61eb33258b480b/html5/thumbnails/36.jpg)
Как работает Catberry.js
36
![Page 37: #6 "Изоморфный фреймворк Catberry.js" Денис Речкунов](https://reader034.vdocuments.pub/reader034/viewer/2022042615/55b53632bb61eb33258b480b/html5/thumbnails/37.jpg)
Что происходит первый раз на сервере:• Рендерится компонент document
• Если встречаются внутри компоненты, и они рендерятся
• Готовый HTML немедленно отдается в браузер
• Пользователь видит контент с минимально задержкой
• Браузер начинает параллельно загружать ресурсы
37
![Page 38: #6 "Изоморфный фреймворк Catberry.js" Денис Речкунов](https://reader034.vdocuments.pub/reader034/viewer/2022042615/55b53632bb61eb33258b480b/html5/thumbnails/38.jpg)
Когда у вас прогрессивный рендеринг
38
![Page 39: #6 "Изоморфный фреймворк Catberry.js" Денис Речкунов](https://reader034.vdocuments.pub/reader034/viewer/2022042615/55b53632bb61eb33258b480b/html5/thumbnails/39.jpg)
Это просто космос!
![Page 40: #6 "Изоморфный фреймворк Catberry.js" Денис Речкунов](https://reader034.vdocuments.pub/reader034/viewer/2022042615/55b53632bb61eb33258b480b/html5/thumbnails/40.jpg)
С чего начать?$ npm -g install catberry-cli
$ catberry init example
catberry-todomvc
catberry-homepage
catberry-debugger
01.
02.
40
![Page 41: #6 "Изоморфный фреймворк Catberry.js" Денис Речкунов](https://reader034.vdocuments.pub/reader034/viewer/2022042615/55b53632bb61eb33258b480b/html5/thumbnails/41.jpg)
Где следить за новостями?
catberry.org
github.com/catberry/catberry (звезду, звезду поставьте)
twitter.com/catberryjs
41
![Page 42: #6 "Изоморфный фреймворк Catberry.js" Денис Речкунов](https://reader034.vdocuments.pub/reader034/viewer/2022042615/55b53632bb61eb33258b480b/html5/thumbnails/42.jpg)
Вопросы?