catberry
viders and more
O Catberry foi desenvolvido para ajudar a criar aplicativos da Web "isomórficos/universais".
Para encurtar os aplicativos isomórficos/universais, são aplicativos que usam a mesma base de código nos ambientes de servidor e cliente para renderizar o que o cliente veria como um "aplicativo de página única".
Instale a CLI Catberry usando o seguinte comando:
npm install -g catberry-cliUse Catberry CLI para criar um projeto vazio com suporte ao guidão como este:
catberry init empty-handlebarsOu um exemplo de aplicativo que funciona usando a API do GitHub:
catberry init exampleAlém disso, você pode obter uma lista de todos os modelos:
catberry init ? Para mais detalhes, prossiga para a documentação do 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 ;O componente é usado como uma tag personalizada:
< 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 ; Embora o Catberry seja capaz de renderizar páginas para qualquer navegador no servidor, devido ao uso de certos recursos HTML5, como a API do histórico, apenas o suporte parcial de navegadores antigos é possível para o aplicativo JavaScript do lado do cliente.
O principal objetivo da estrutura Catberry é usar todo o poder das novas tecnologias e fornecer a um usuário a melhor experiência possível.
De fato, um usuário obtém uma página HTML do servidor apenas uma vez e durante todo o tempo que a página inteira está mudando em um navegador que recebe apenas dados puros dos serviços de API usados (s) usados com o aplicativo.
Graças ao mecanismo de renderização progressiva da Catberry, o usuário recebe uma página do componente do servidor por componente tão rápido quanto cada componente renderiza seu modelo que não está esperando por toda a página é criada.
O Catberry suporta 2 últimas versões dos navegadores modernos e o IE 11. Depende da predefinição Babel Babel-Preset-ENV, que você pode substituir, você pode substituir um arquivo .babelrc em seu projeto.
Existem muitas maneiras de contribuir com Catberry:
Denis Rechkunov [email protected]
