Progressive rendering with Catberry.js

Framework Overview

• Implements Flux and Universal cat(web)-components (server & browser)
• Computes the whole application state from current URL
• Supports several template engines (Handlebars, Jade, Dust, Nunjucks, etc.)
• Uses promises in its API
• Implements progressive rendering
• Supports ES2015 – native on Node.js and uses Babel to run in a browser
• Has ~90% test coverage and it's used in production
• Has a small size: whole "Hello-world" app — 25KB. React (only lib) — 40KB

Flux Stores in Catberry.js

			./catberry_stores/

			  doge/

			    Wow.js

			    Such.js

			    Store.js

			  grumpy-cat/

			    No.js

		

How to Implement a Store

			class MyStore {
			 constructor(locator) {
			  this.$lifetime = 60000; // how long to cache the data (ms)
			 }
			 load() { /* returns data (or promise) for components */ }
			 handleAddItem(args) { /* handles "add-item" */ }
			}
			module.exports = MyStore;
		

Notify that Store's Data is Changed

			handleAddItem(args) {
			 // you can get routed parameters from URI
			 this.$context.state.newsCategory;
			 // and notify about changes
			 this.$context.changed();
			}
		

Extracting Parameters from URL

			// you define a route
			'/some/:id[Store1,Store2]/actions?q=:query[Store1]'
			// go to this link
			'/some/123/actions?q=find-a-cat'
			// then Store1 and Store2 will have 
			this.$context.state.id === '123'
			// and only Store1 will have 
			this.$context.state.query === 'find-a-cat'
		

Cat-components vs Web-components

Cat-component

			hello-world/

			  index.js # exports a class

			  template.hbs # is rendered inside the component's tag

			  error.hbs # is rendered instead if error occurs

			  cat-component.json # defines the component

		

Using Components as Custom Tags

			<cat-hello-world id="uniq-id" cat-store="some/Store">
			</cat-hello-world>
		

The template will be rendered inside the tag and if it contains other components' tags the process repeats recursively.

All tag attributes are accessible via this.$context.attributes

How to Implement a Cat-Component

			class MyComponent {
			 constructor(locator) { /* resolve smth from the locator */ }
			 render() { /* gets data (or promise) for the template */ }
			 bind() { /* component appears in DOM */ }
			 unbind() { /* component is removed from DOM */ }
			}
			module.exports = MyComponent;
		

Receiving Data from a Store

			render() {
			 return this.$context.getStoreData()
			  .then(data => /* success, the Store returned data */ )
			  .catch(error => /* no luck :( */ );
			}
		

Sending Action to a Store

			this.$context.sendAction('add-item', item)
			 .then(result => /* success, we have a result */ )
			 .catch(error => /* no luck :( */ );
	

Service Locator

Server-side

• Catberry implements Transform Stream
• Transform stream is looking for custom tags in the HTML stream
• If finds — renders a template into the tag
• Rendered HTML string goes through the same transform stream recursively
• HTML chunks are being sent to the browser as soon as they are ready

Browser-side

• Catberry handles all link clicks using History API
• If a link is routed by the app, Catberry extracts parameters from it
• All parameters are bound to certain stores that trigger their "change" event
• Components are bound to stores and Catberry updates them
• Catberry computes the roots of changed subtrees in DOM
• The changes are applied using morphdom library only to these subtrees
• All new data is being requested during the rendering process

TTFB Using Progressive Rendering

DEMO

Quick Start

			$ npm -g install catberry-cli
			$ catberry init example
		

Keep in touch

catberry.github.io

github.com/catberry/catberry

Thank you!
Questions?