#6 "Изоморфный фреймворк Catberry.js" Денис Речкунов

pragmadash Денис Речкуновnode.js-разработчик

Изоморфный фреймворк Catberry.js

Если коротко, что такое Catberry.js:• Это фреймворк с Flux-архитектурой

• Изоморфными веб-компонентами

• И прогрессивным рендерингом на сервере

2

Что ты сейчас сказал?

Flux

Flux

Flux

Почему Flux?

Flux — это более безопасный MVC• Нет моделей и привязок

• Когда Store изменился, данные запрашиваются заново

• Есть Dispatcher, который контролирует Workflow

• Нет беспорядка с событиями

• Обновление View полностью

8

Web/Cat-Components

Почти как веб-компоненты, но:• Их можно отрендерить на сервере

• Они хранятся как директория в проекте

• Компонент описыватся файлом cat-component.json

• Шаблон на языке любого* шаблонизатора

• Нет Shadow DOM

• Можно ставить через NPM

10

Cat-componenthello-world/

assets/

hello.svg

world.svg

index.js

template.hbs

error.hbs

cat-component.json

11

cat-component.json{

"name": "hello-world",

"logic": "./index.js",

"template": "./template.hbs",

"errorTemplate": "./error.hbs"

}

01.

02.

03.

04.

05.

06.

12

Использовать как кастомные тэги:<cat-hello-world id="uniq-id"

cat-store="some/Store"

any-attribute="any-value">

</cat-hello-world>

В этот тэг отрендерится шаблон, который может содержать тэги

компонентов, процесс повторяется рекурсивно

01.

02.

03.

04.

13

Особенности и исключения:• Уникальный ID обязателен

• Корневой компонент document

• Компонент document нельзя использовать тэгом

• Компонент document нельзя привязать к Store

• Компонент head привязывается к head-элементу

14

Как писать логику в 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

Этап "render"Тэг компонента рендерит свой шаблон

HelloWorld.prototype.render = function () {

// может вернуть данные для шаблона

// или Promise на них

return {hello: 'world'};

};

01.

02.

03.

04.

05.

16

Этап "bind"Рендеринг завершен, можно привязать события

HelloWorld.prototype.bind = function () {

// может вернуть карту событий

// для дочерних элементов или Promise на нее

return {

click: {'div.clickable': this.clickHandler}

};

};

01.

02.

03.

04.

05.

06.

07.

17

Этап "unbind"Компонент готовится к удалению или обновлению

HelloWorld.prototype.unbind = function () {

// здесь нужно прибраться, если вы

// что-то делали в bind помимо карты событий

// события из карты отвязываются автоматически

};

01.

02.

03.

04.

05.

18

А откуда брать данные?

Из Store, конечно же

Flux Stores в Catberry.jsДиректория "catberry_stores" с .js-файлами

./catberry_stores/

doge/

Wow.js

Such.js

Store.js

grumpy-cat/

No.js

21

Особенности:• Имя Store — это относительный путь без расширения,

например doge/Wow

• Можно привязать компонент через атрибут cat-store

• Когда Store меняется обновляются все привязанные компоненты

• Store получают параметры из URL через роутинг

22

Как писать логику 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

Метод "load"Wow.prototype.load = function () {...}

// запрашивает данные, например по REST

// возвращает объект или Promise

return {hello: 'world'};

};

01.

02.

03.

04.

05.

24

Метод "handle"Wow.prototype.handleVeryAction = function () {...}

// может запостить данные по REST

// вернуть результат или Promise

return {response: 'some'};

};

01.

02.

03.

04.

05.

25

Метод "handle"Wow.prototype.handleVeryAction = function () {...}

// а может отправить сигнал,

// что Store изменился

this. $context .changed();

};

01.

02.

03.

04.

05.

26

Главный герой— this.$context

У компонента или Store есть $context:• isBrowser

• isServer

• userAgent

• location

• referrer

• locator

• redirect('location')

• cookie.get('name')/cookie.set(object)

28

У компонента дополнительно:• element

• attributes

• getComponentById(‘id’)

• createComponent(‘name’, attributesObject)

• collectGarbage()

• getStoreData()

• sendAction(‘name’, object)

• sendBroadcastAction(‘name’, object)

29

У Store дополнительно:• state

• changed()

• setDependency('storeName')/unsetDependency('storeName')

• getStoreData('storeName')

• sendAction('storeName', ‘actionName’, object)

• sendBroadcastAction(‘name’, object)

30

Как из компонента получить данные Storethis.$context.getStoreData()

.then(function () {

// ура, Store дал данные

});

.catch(function (error) {

// печаль :(

});

01.

02.

03.

04.

05.

06.

07.

31

Как из компонента отправить Actionthis.$context.sendAction('item-submit', item)

.then(function () {

// ура, Action обработался

});

.catch(function (error) {

// печаль :(

});

01.

02.

03.

04.

05.

06.

07.

32

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

Dependency Injectionfunction StoreConstructor ( $uhr , someConfigSection) {

// можно внедрять и использовать $uhr

// и внедрять даже конфиг-секции

}

01.

02.

03.

04.

34

Прогрессивныйрендеринг

Как работает Catberry.js

36

Что происходит первый раз на сервере:• Рендерится компонент document

• Если встречаются внутри компоненты, и они рендерятся

• Готовый HTML немедленно отдается в браузер

• Пользователь видит контент с минимально задержкой

• Браузер начинает параллельно загружать ресурсы

37

Когда у вас прогрессивный рендеринг

38

Это просто космос!

С чего начать?$ npm -g install catberry-cli

$ catberry init example

catberry-todomvc

catberry-homepage

catberry-debugger

01.

02.

40

Где следить за новостями?

catberry.org

github.com/catberry/catberry (звезду, звезду поставьте)

twitter.com/catberryjs

41

Вопросы?