catberry

Gatilla

¿Qué es el gato?

Catberry fue desarrollado para ayudar a crear aplicaciones web "isomórficas/universales".

En pocas palabras, las aplicaciones isomórficas/universales son aplicaciones que usan la misma base de código tanto en los entornos del servidor como del cliente para representar lo que el cliente vería como una "aplicación de una sola página".

TLDR;

Instale Catberry CLI usando el siguiente comando:

npm install -g catberry-cli

Use Catberry CLI para crear un proyecto vacío con soporte de manillares como este:

catberry init empty-handlebars

O una aplicación de ejemplo que funciona usando la API GitHub:

catberry init example

Además, puede obtener una lista de todas las plantillas:

catberry init ? 

Enlaces útiles

• Documentación de Catberry
• Guía de inicio
• Complementos y herramientas
• Página de inicio de Catberry
• Aplicación TODO
• Aplicación de ejemplo

¿Por qué debería usar eso?

Arquitectura

• Toda la arquitectura del marco se crea utilizando el patrón de localización de servicios, que ayuda a administrar las dependencias del módulo y crear complementos, y flujo, para la capa de datos
• Los componentes CAT: similares a los componentes web pero organizados como directorios, se pueden representar en el servidor y se publicaron/instalar como paquetes de NPM
• Catberry construye un paquete para ejecutar la aplicación en un navegador como una aplicación de una sola página
• Soporte ES2015/ES6: nativo en el servidor/node.js y el uso de Babel para un navegador
• La API de todo el marco usa promesas
• Framework en sí es un middleware Express/Connect, lo que significa que puede usarlo con otros artículos intermedios

Representación

• Motor de representación progresiva rápida y eficiente basado en transmisiones node.js en el servidor
• La representación del navegador no bloquea el bucle del evento, lo que significa que la interfaz de usuario de su aplicación nunca se congelará
• Los motores de plantilla de manillar, polvo y PUG son compatibles oficialmente (y puede implementar su propio proveedor para apoyar a cualquier otro)
• Evento de DOM eficiente escuchando la delegación de eventos

Para obtener más detalles, proceda a la documentación de Catberry.

Ejemplo típico de componente de gato

 '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 ;

El componente se usa como una etiqueta personalizada:

 < cat-cool id =" unique-value " cat-store =" group/CoolStore " > </ cat-cool >

Ejemplo típico de la tienda

 '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 ; 

Soporte del navegador

Si bien Catberry es capaz de representar páginas para cualquier navegador en el servidor, debido al uso de ciertas características de HTML5, como la API del historial, solo es posible el soporte parcial de los navegadores antiguos para la aplicación JavaScript del lado del cliente.

El objetivo principal del marco de Catberry es utilizar toda la potencia de las nuevas tecnologías y proporcionar a un usuario la mejor experiencia posible.

De hecho, un usuario obtiene una página HTML del servidor solo una y todo el resto del tiempo que toda la página está cambiando en un navegador que recibe solo datos puros de los servicios API utilizados con la aplicación.

Gracias al motor de renderizado progresivo de Catberry, el usuario recibe una página del componente del servidor por componente tan rápido como cada componente hace que su plantilla no esté esperando que toda la página esté construida.

Catberry admite 2 últimas versiones de los navegadores modernos e IE 11. Depende del preajuste de Babel Babel-Preset-Env que configuración puede anular colocar un archivo .babelrc en su proyecto.

Que contribuye

Hay muchas maneras de contribuir a Catberry:

• Dale una estrella
• Únase a la sala de Gitter y deje comentarios o ayuda para responder las preguntas de los usuarios
• Enviar un error o una solicitud de función
• Enviar un PR
• Si te gusta el logotipo, es posible que desee comprar una camiseta Catberry o una pegatina

Denis Rechkunov [email protected]