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.

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

The example code below shows a simple isomorphic app.

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 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();

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
}

Install core package:

npm i catbee --save

Install document rednerer package:

npm i catbee-web-components --save

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

Document Renderer implementation based on Vue Next.

Will be avaliable later. Sorry for inconvinience.

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

var config = {
  isRelease: true
};

var cat = catbee.create(config);

Register route inside application.

var cat = catbee.create();

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

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

Return Express/Connect middleware.

Will be avaliable later. Sorry for inconvinience.

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