template rendering with node.js and backbone.js

Question

Has anyone found a good solution for developing templates for backbone.js that can be used on the server and the client?

This is really desirable with the backbone.js history stack, as users can share and link to real urls in the browser location bar, and the node.js server can render the page on first page view, while using the same templates in the client to rebuild pages on subsequent page views.

This would also provide an ideal output for both users and for search engines that spider the links and won't have to parse or execute javascript to see a fully rendered and working page.

Updated with more info:

Two possible approaches to this appear to be:

1) bones - https://github.com/developmentseed/bones

Bones has some quirks to install and currently needs an old version of node and npm.

2) capsule - https://github.com/andyet/capsule

I haven't tried this yet, but it seems similar. I'd be interested if anyone has interest with either of these projects.

Answer 1

I'm currently working on a framework named "onecode" that does what you asked for. Currently it lacks documentation, but I have a working project based on it, so it could work for you too. I'm also looking for contributors.

Here's how it works. Almost all code is shared between client and server, including models and views.

1. On server, you create a REST API where you define business rules, security, db operations, all that you cannot trust to a client.
2. This API is used both from clients (using standard Backbone Ajax calls) and from server itself when the page is first requested (directly, using overridden $.ajax method).
3. When a client requests a page, server creates all needed models and views, makes direct requests to API and renders HTML. Moreover, it remembers all data that came from API calls and which HTML elements correspond to which Views.
4. Model/View code, HTML and Data is served to client. Here, HTML is fully rendered and functional, so even if the user turned off JavaScript, he can click links and browse the website (he will not get any dynamic features of course). But, if the Javascript is enabled, all Models and Views are recreated and re-binded to DOM nodes automatically in background, not making user wait.
5. After that, the application works like a single-page app, requesting only data (json) from the same API, rendering templates on client.

This means that:

1. You write presentation and dynamic code only once.
2. First requested page is served and shown to user lightning fast, doesn't require to wait for all scripts to load and run, just HTML/CSS.
3. Next pages are also very fast because only raw data is requested, templates are rendered on client. You can also make it visually attractive, not usual page reload. You can even play music while user browse the website.
4. Search engines and Social Networks love you.

The architecture forces some sane requirements which will make you a better developer. Something like:

1. Separate, well-defined API needed for server actions and business rules.
2. No global variables.
3. Views are treated more strictly than in general Backbone, more like stackable UI components.
4. Clear separation between HTML rendering and dynamic behaviors.

A very simple example can be found in the source tree. I use Backbone as a basis for Models and Views, and Browserify deliver js package to client.

In my project I use inline templates with EJS as a templating engine. This has advantage of keeping HTML and code (I use CoffeeScript) in the same place. But the framework is capable of packaging templates from external files, with other templating engines like Jade. Please, see a templating example on how it could be done.

Please let me know if you are interested this approach, maybe it'd push me to start writing docs for it.

Answer 2

I haven't used it for node, but I've used mustache pretty extensively for backbone.js and been pleased with the results, and it has a port to use it with node as well.

http://mustache.github.com/