Catbee

Catbee

Catbee is foundation for isomorphic (universal) applications. Library allows to work with SSR (Server Side Rendering) in NodeJS and supports a SPA (Signal Page Application) in your browser.

Getting Started

To write the application on Catbee you don't need a lot of energy.

The example code below shows a simple isomorphic app.

Server application

Code below, run the server on Express.js and intercept requests through the middleware. Library process request, create routing context and pass it to the view layer. In this example, we use custom view layer based on W3C Web Components. You can write own, or use one of official packages.

// server.js
var express = require('express');
var catbee = require('catbee');
var components = require('catbee-web-components');
var document = require('./components/document');

var app = express();
var cat = catbee.create();

components.register(cat.locator, document);
cat.registerRoute({ expression: '/' });

app.use(cat.getMiddleware());

app.listen(3000);

Client-side application

Client-side application have 2 stages:

1. Initialization application stage.
2. Update application state stage.

At first stage, Catbee wrap History API and send to document renderer init command. At second stage, Catbee wait History API events, and send to document renderer update command with new routing context.

// browser.js
var catbee = require('catbee');
var components = require('catbee-web-components');
var document = require('./components/document');

var cat = catbee.create();

components.register(cat.locator, document);
cat.registerRoute({ expression: '/' });

cat.startWhenReady();

Example of isomorphic component

In this examples, was used Catbee Web Components package as document renderer implementation. Catbee is not promoting any particular approach to rendering HTML, but some of them are officially supported. You can use any library for rendering HTML'a (React, Vue, Angular, Deku ...), with only one condition, library code must be able to work isomorphically.

// document.js
class Document {
  template (ctx) {
    return `Hello ${ctx.name}!`;
  }
  
  render () {
    return { name: 'world' }
  }
}

module.exports = {
  constructor: Document
}

Installation

Install core package:

npm i catbee --save

Install document rednerer package:

npm i catbee-web-components --save

Document renderer packages

Catbee Web Components

Document Renderer implementaion based on Web Components, spiced by Appstate and Baobab for state management.

Catbee Vue (work in progress)

Document Renderer implementation based on Vue Next.

Routing

Will be avaliable later. Sorry for inconvinience.

API Reference

Instantiation

Create instance of application. Accepts config object as first argument.

var config = {
  isRelease: true
};

var cat = catbee.create(config);

registerRoute(definition)

Register route inside application.

var cat = catbee.create();

cat.registerRoute({
  expression: '/:category/?id=:id',
  args: {
    type: 'news'  
  },
  map: (args) => {
    return args;
  }
})

Browser

startWhenReady()

Start application and wrap History API. Return promise that resolve when document will be ready.

Server

getMiddleware()

Return Express/Connect middleware.

Wrtie your own renderer

Will be avaliable later. Sorry for inconvinience.

Contributors

Most of code taken from Catberry isomorphic framework. Thanks Denis Rechkunov and all Catberry contributors.