catberry
viders and more
Catberry wurde entwickelt, um "isomorphe/universelle" Webanwendungen zu erstellen.
Kurz gesagt, isomorphe/universelle Anwendungen sind Apps, die dieselbe Codebasis sowohl für die Server- als auch für die Client -Umgebungen verwenden, um das zu rendern, was der Client als "einseitige Anwendung" ansehen würde.
Installieren Sie Catberry CLI mit dem folgenden Befehl:
npm install -g catberry-cliVerwenden Sie Catberry CLI, um ein leeres Projekt mit Lenkerunterstützung wie folgt zu erstellen:
catberry init empty-handlebarsOder eine Beispielanwendung, die mit Github -API funktioniert:
catberry init exampleAußerdem erhalten Sie eine Liste aller Vorlagen:
catberry init ? Weitere Informationen finden Sie mit Catberry -Dokumentation.
'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 ;Die Komponente wird als benutzerdefiniertes Tag verwendet:
< 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 ; Während Catberry in der Lage ist, Seiten für jeden Browser auf dem Server zu rendern
Das Hauptziel des Catberry -Frameworks ist es, die volle Leistung neuer Technologien zu nutzen und einem Benutzer die bestmögliche Erfahrung zu bieten.
Tatsächlich erhält ein Benutzer nur einmal eine HTML -Seite vom Server und den Rest der gesamten Seite ändert sich die gesamte Seite in einem Browser, der nur reine Daten aus API -Diensten empfängt, die mit der Anwendung verwendet werden.
Dank der progressiven Rendering -Engine von Catberry erhält der Benutzer eine Seite aus der Serverkomponente nach Komponenten, so schnell wie jede Komponente seine Vorlage nicht auf die gesamte Seite aufgebaut wird.
Catberry unterstützt 2 letzte Versionen moderner Browser und .babelrc 11. Es hängt von Babel-Babel-Preset-Eng-Voreinstellung ab, welche Konfiguration Sie überschreiben können.
Es gibt viele Möglichkeiten, um zu Catberry beizutragen:
Denis rechkunov [email protected]
