catberry

Catberry

What the cat is that?

Catberry was developed to help create "isomorphic/Universal" Web applications.

Long story short, isomorphic/universal applications are apps that use the same codebase on both the server and client environments to render what the client would see as a "Single Page Application".

TLDR;

Install Catberry CLI using following command:

npm install -g catberry-cli

Use Catberry CLI to create an empty project with Handlebars support like this:

catberry init empty-handlebars

Or an example application that works using GitHub API:

catberry init example

Also, you can get a list of all templates:

catberry init ?

Useful links

• Catberry Documentation
• Get Started Guide
• Plugins and Tools
• Catberry's homepage and its source code
• Todo application
• Example application

Why should I use that?

Architecture

• The entire architecture of the framework is built using the Service Locator pattern – which helps to manage module dependencies and create plugins – and Flux, for the data layer
• Cat-components – similar to web-components but organized as directories, can be rendered on the server and published/installed as NPM packages
• Catberry builds a bundle for running the application in a browser as a Single Page Application
• ES2015/ES6 support – native on the server/Node.js and using Babel for a browser
• The whole framework's API uses Promises
• Framework itself is an express/connect middleware, which means you can use it with other middlewares

Rendering

• Fast and efficient progressive rendering engine based on node.js streams on the server
• Browser rendering does not block the Event Loop, which means your app's UI will never be frozen
• Handlebars, Dust and Pug template engines are officially supported (and you can implement your own provider to support any other)
• Efficient DOM event listening using event delegation

For more details please proceed to Catberry Documentation.

Typical Cat-component example

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

The component is used as a custom tag:

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

Typical Store example

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

Browser Support

While Catberry is capable of rendering pages for any browser on the server, due to the use of certain HTML5 features, like the History API, only partial support of old browsers is possible for the client-side JavaScript application.

The main goal of the Catberry Framework is to use the full power of new technologies and provide a user with the best possible experience.

In fact, a user gets an HTML page from the server only once and all the rest of the time the whole page is changing in a browser receiving only pure data from API service(s) used with the application.

Thanks to Catberry's progressive rendering engine, user receives a page from the server component by component as fast as each component renders its template not waiting for the whole page is built.

Catberry supports 2 last versions of modern browsers and IE 11. It depends on Babel babel-preset-env preset which config you can override putting a .babelrc file in your project.

Contributing

There are a lot of ways to contribute into Catberry:

• Give it a star
• Join the Gitter room and leave a feedback or help with answering users' questions
• Submit a bug or a feature request
• Submit a PR
• If you like the logo, you might want to buy a Catberry T-Shirt or a sticker

Denis Rechkunov [e-mail]