ractive-isomorphic (ri)

Isomorphic abstract classes, Site and Page, derived from Ractive

Why?

I wanted a full-stack reusable codebase for web-apps that are

isomorphic
fast, easy and fun to build and work on

What is it?

ri is a couple of isomorphic, abstract classes, Site and Page, which can be extended to quickly and easily create awesome web-apps.

The common ancestor of both classes is Ractive, the simplest, most powerful, most pleasurable-to-work-with UI library for the web that I have ever loved. <3

Example

For now, you can check out the sandbox app.

See the Developing ri section for instructions on how to get it running.

(Various advanced examples will be added to an examples folder, soonish.)

Installing

1. `npm install --save https://github.com/zenflow/ractive-isomorphic/tarball/master`

2. Extend `ri.Site` into `MySite`: the isomorphic blue-prints for your app

A minimal example might look like this:

var ri = require('ractive-isomorphic');
var fs = require('fs');
var path = require('path');
var documentTemplate = process.browser ? null : fs.readFileSync(path.join(__dirname, 'document.html'), 'utf8');
var bodyTemplate = fs.readFileSync(path.join(__dirname, 'body.html'), 'utf8');
var pages = require('./pages');

var MySite = ri.Site.extend({
	documentTemplate: documentTemplate,
	bodyTemplate: bodyTemplate,
	pages: pages
});

module.exports = MySite;

3. Use middleware returned by `MySite.connect(options)` with connect or express HTTP server frameworks

An entry-point for your server-side code may look something like this:

var connect = require('connect');
var http = require('http');
var path = require('path');
var MySite = require('../shared/MySite');
var api = require('../shared/api');

var app = connect();
app.use(MySite.connect({api: api}));
app.use(serveStatic(path.join(__dirname, '../client/build')));
http.createServer(app).listen(3000);

4. browserify and serve the isomorphic and client-side-only portions of your codebase.

ri itself currently uses gulp (task-runner) for building the "sandbox" app, but any build system that supports or includes browserification will work just fine.

An entry-point for your client-side code may look something like this:

var MySite = require('../shared/MySite');
var api = require('../shared/api');

window.site = new MySite({api: api});

Getting help

Developing ri

First, fork zenflow/ractive-isomorphic on github, then

git clone https://github.com/your_username_here/ractive-isomorphic
cd ractive-isomorphic
git checkout develop
npm install
npm start

This will get the development server up and running, which for now only serves the "sandbox".

The sandbox is currently being used as both the example and the test.

Contributing

Pull requests and issues are always welcome! Please refer to CONTRIBUTING.md

License

Badges

Extracted from project README

ractive-isomorphic