Catberry is an isomorphic framework for building universal front-end apps using components, Flux architecture and progressive rendering.
JavaScript HTML Makefile

README.md

Catberry

Build Status codecov.io Gitter

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

Why should I use that?

Architecture

Rendering

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.

All supported browsers are listed below:

Browser Version
IE 9 (partial non-SPA), 10+
IE Mobile 10+
Firefox 4+
Firefox Android 29+
Chrome 19+
Chrome Android 35+
Android Browser 2.2+, 4.2+
Safari 6+
iOS Safari 5+
Opera 12+
Opera Mobile 11.1+
Blackberry Browser 7+

Contributing

There are a lot of ways to contribute into Catberry:

Denis Rechkunov denis.rechkunov@gmail.com