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

Если коротко, что такое Catberry.js:

• Это фреймворк с Flux-архитектурой
• Изоморфными веб-компонентами
• И прогрессивным рендерингом на сервере

Flux — это более безопасный MVC

• Нет моделей и привязок
• Когда Store изменился, данные запрашиваются заново
• Есть Dispatcher, который контролирует Workflow
• Нет беспорядка с событиями
• Обновление View полностью

Почти как веб-компоненты, но:

• Их можно отрендерить на сервере
• Они хранятся как директория в проекте
• Компонент описыватся файлом cat-component.json
• Шаблон на языке любого* шаблонизатора
• Нет Shadow DOM
• Можно ставить через NPM

Cat-component

			hello-world/

			    assets/

			        hello.svg

			        world.svg

			    index.js

			    template.hbs

			    error.hbs

			    cat-component.json

		

cat-component.json

			{
			  "name": "hello-world",
			  "logic": "./index.js",
			  "template": "./template.hbs",
			  "errorTemplate": "./error.hbs"
			}
		

Использовать как кастомные тэги:

			<cat-hello-world id="uniq-id" 
			  cat-store="some/Store"
			  any-attribute="any-value">
			</cat-hello-world>
		

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

Особенности и исключения:

• Уникальный ID обязателен
• Корневой компонент document
• Компонент document нельзя использовать тэгом
• Компонент document нельзя привязать к Store
• Компонент head привязывается к head-элементу

Как писать логику в index.js

			module.exports = HelloWorld;
			function HelloWorld() {...}
			// этапы жизни компонента
			HelloWorld.prototype.render = function () {...}
			HelloWorld.prototype.bind = function () {...}
			HelloWorld.prototype.unbind = function () {...}
		

Этап "render"

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

			HelloWorld.prototype.render = function () {
				// может вернуть данные для шаблона
				// или Promise на них
				return {hello: 'world'};
			};
		

Этап "bind"

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

			HelloWorld.prototype.bind = function () {
				// может вернуть карту событий
				// для дочерних элементов или Promise на нее
				return {
					click: {'div.clickable': this.clickHandler}
				};
			};
		

Этап "unbind"

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

			HelloWorld.prototype.unbind = function () {
				// здесь нужно прибраться, если вы
				// что-то делали в bind помимо карты событий
				// события из карты отвязываются автоматически
			};
		

Flux Stores в Catberry.js

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

			./catberry_stores/

			    doge/

			        Wow.js

			        Such.js

			        Store.js

			    grumpy-cat/

			        No.js

		

Особенности:

• Имя Store — это относительный путь без расширения, например doge/Wow
• Можно привязать компонент через атрибут cat-store
• Когда Store меняется обновляются все привязанные компоненты
• Store получают параметры из URL через роутинг

Как писать логику Store

			module.exports = Wow;
			function Wow() {...}
			// время актуальности данных в мс
			Wow.prototype.$lifetime = function () {...}
			// загрузка данных
			Wow.prototype.load = function () {...}
			// обработка Action
			Wow.prototype.handleVeryAction = function () {...}
		

Метод "load"

			Wow.prototype.load = function () {...}
				// запрашивает данные, например по REST
				// возвращает объект или Promise
				return {hello: 'world'};
			};
		

Метод "handle"

			Wow.prototype.handleVeryAction = function () {...}
				// может запостить данные по REST
				// вернуть результат или Promise
				return {response: 'some'};
			};
		

Метод "handle"

			Wow.prototype.handleVeryAction = function () {...}
				// а может отправить сигнал,
				// что Store изменился
				this.$context.changed();
			};
		

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

• isBrowser
• isServer
• userAgent
• location
• referrer
• locator
• redirect('location')
• cookie.get('name')/cookie.set(object)

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

• element
• attributes
• getComponentById(‘id’)
• createComponent(‘name’, attributesObject)
• collectGarbage()
• getStoreData()
• sendAction(‘name’, object)
• sendBroadcastAction(‘name’, object)

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

• state
• changed()
• setDependency('storeName')/unsetDependency('storeName')
• getStoreData('storeName')
• sendAction('storeName', ‘actionName’, object)
• sendBroadcastAction(‘name’, object)

Как из компонента получить данные Store

			this.$context.getStoreData()
			  .then(function () {
			    // ура, Store дал данные
			  });
			  .catch(function (error) {
			    // печаль :(
			  });
		

Как из компонента отправить Action

			this.$context.sendAction('item-submit', item)
			  .then(function () {
			    // ура, Action обработался
			  });
			  .catch(function (error) {
			    // печаль :(
			  });
		

Service Locator

			locator.register(‘uhr’, UHR);
			locator.registerInstance('uhr', new UHR());
			locator.resolve(‘uhr’);
			locator.resolveAll(‘uhr’);
			locator.resolveInstance(SomeConstructorDependsOnUHR);
		

Dependency Injection

			function StoreConstructor ($uhr, someConfigSection) {
			  // можно внедрять и использовать $uhr
			  // и внедрять даже конфиг-секции
			}
		

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

Что происходит первый раз на сервере:

• Рендерится компонент document
• Если встречаются внутри компоненты, и они рендерятся
• Готовый HTML немедленно отдается в браузер
• Пользователь видит контент с минимально задержкой
• Браузер начинает параллельно загружать ресурсы

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

С чего начать?

			$ npm -g install catberry-cli
			$ catberry init example
		

catberry-todomvc
catberry-homepage
catberry-debugger

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

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