catberry
viders and more
Catberry была разработана, чтобы помочь создать «изоморфные/универсальные» веб -приложения.
Короче говоря, изоморфные/универсальные приложения - это приложения, которые используют одну и ту же кодовую базу как в средах сервера, так и для клиентов, чтобы отобразить то, что клиент увидит как «приложение для одной страницы».
Установите COTBerry CLI, используя следующую команду:
npm install -g catberry-cliИспользуйте Catberry CLI, чтобы создать пустой проект с поддержкой руля, как это:
catberry init empty-handlebarsИли пример приложения, которое работает с использованием API GitHub:
catberry init exampleКроме того, вы можете получить список всех шаблонов:
catberry init ? Для получения более подробной информации, пожалуйста, перейдите к документации Catberry.
'use strict' ;
class CoolComponent {
/**
* Creates a new instance of the "CoolComponent" component.
* @param {ServiceLocator} locator The service locator for resolving dependencies.
*/
constructor ( locator ) {
// you can resolve any dependency from the locator.
}
/**
* Gets data for the template.
* This method is optional.
* @returns {Promise<Object>|Object|null|undefined} Data for the template.
*/
render ( ) {
return this . $context . getStoreData ( ) ;
}
/**
* Returns event binding settings for the component.
* This method is optional.
* @returns {Promise<Object>|Object|null|undefined} Binding settings.
*/
bind ( ) {
return {
// CSS selector
'.clickable' : ( ) => window . alert ( 'Ouch!' ) ;
}
}
/**
* Cleans up everything that has NOT been set by .bind() method.
* This method is optional.
* @returns {Promise|undefined} Promise of nothing.
*/
unbind ( ) {
// nothing to do here we have used bind properly
}
}
module . exports = Some ;Компонент используется в качестве пользовательской тег:
< cat-cool id =" unique-value " cat-store =" group/CoolStore " > </ cat-cool > 'use strict' ;
class CoolStore {
/**
* Creates a new instance of the "CoolStore" store.
* @param {ServiceLocator} locator The service locator for resolving dependencies.
*/
constructor ( locator ) {
/**
* Current universal HTTP request for environment-independent requests.
* @type {UHR}
* @private
*/
this . _uhr = locator . resolve ( 'uhr' ) ;
/**
* Current lifetime of data (in milliseconds) that is returned by this store.
* @type {number} Lifetime in milliseconds.
*/
this . $lifetime = 60000 ;
}
/**
* Loads data from a remote source.
* @returns {Promise<Object>|Object|null|undefined} Loaded data.
*/
load ( ) {
// Here you can do any HTTP requests using this._uhr.
// Please read details here https://github.com/catberry/catberry-uhr.
}
/**
* Handles an action named "some-action" from any component or store.
* @returns {Promise<Object>|Object|null|undefined} Response to the component/store.
*/
handleSomeAction ( ) {
// Here you can call this.$context.changed() if you're sure'
// that the remote data on the server has been changed.
// You can additionally have many handle methods for other actions.
} ;
}
module . exports = Some ; В то время как Catberry способен ждать страниц для любого браузера на сервере, из-за использования определенных функций HTML5, таких как API истории, возможна только частичная поддержка старых браузеров для приложения JavaScript на стороне клиента.
Основная цель фреймворка Catberry - использовать полную мощность новых технологий и предоставить пользователю наилучший опыт.
Фактически, пользователь получает HTML -страницу с сервера только один раз, и все остальное время вся страница меняется в браузере, получающего только чистые данные из служб (ы) API, используемых с приложением.
Благодаря прогрессивному двигателю рендеринга Catberry, пользователь получает страницу от компонента сервера по компоненту так быстро, как каждый компонент делает свой шаблон, не ожидающий, когда будет построена вся страница.
Catberry поддерживает 2 последних версии современных браузеров и IE 11. Это зависит от предустановки Babel Babel-Preset-ENV, какой конфигурации вы можете переопределить в своем проекте. .babelrc файл.
Есть много способов внести свой вклад в Catberry:
Денис Рехкунов Денис@rdner.de
