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 hi

Answer 1

In terms of choosing a template language, you can pretty much take your pick with any js-based templating language, including Underscore Templates, Mustache or Handlebars - it's trivial to set up templates in a publicly accessible path that your Node.js application also reads when the content is generated server-side.

My personal favourite is Jade, which comes out of the box with Express - it enforces a very simplistic, expressive coding style.

You can find a good write-up of how to link together Backbone.js and Express here (using Jade as the template language).

Most of the examples tend to be how to set up a RESTful application which renders entirely client-side (and is not what you're really after).

However if you get your web app rendering in Express from templates in a publicly accessible folder (I would recommend keeping views separate - preprocess your templates and hand the html over to your views, so you keep the templates specific) then you'll be able to load them from Backbone.js too, and handle changes using Backbone.js's history stack.

Answer 2

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 3

Try jsrender at https://github.com/BorisMoore/jsrender.

It is a rewrote from jQuery tmpl, and does NOT requires jQuery or any DOM. It is self-contained in a single file and the author keep it very fresh.

jsrender is a string-replacement engine for templating. We use it for both dynamic and static page in NodeJS. We also use it for non-HTML templates, e.g. XML, CSV, and text-based email. Although it is not in production mode yet, we have been using it for few months and the development is so far very stable.

Look at some cool demos at http://borismoore.github.com/jsrender/demos/demos.html.

At its simplest, you can do foreach loop. But if you are going expert route or be adventurous, you can have JS code running (either inlined, or passed as a function, a.k.a. helpers). Sure it is bad to have code inside presentation layer, but sometimes it don't hurt to have simple odd()/even() or nth+1 calculation in your favorite language. Just make sure you have a good understanding between layers and take the risks.