Monday, January 16, 2012

JsRender: Javascript Templating. An Introduction.

What is JsRender?
According to the demos index page JsRender is "Optimized for high-performance pure string-based rendering, without DOM or jQuery dependency".

In simple terms it's a way to apply templates to JSon data and render out content.  If you think about it, it's really a powerful feature, and valuable to anyone that is rendering content in a web browser.

It seems that JsRender became the solution for client side templating with the discontinuation of JQuery's templates, however JsRender is something... better. Aside from having no DOM depedency, it does not even have a JQuery dependency. From Borris Moore's presentation, JsRender is "~20 times faster than jquery.tmpl for simple templates".

At a high-level is supports:
Rendering templates and data into a string (as opposed to anything in the DOM)
Templates as strings, and within script tags
Template registration
Tags within templates, including conditional statements, loops

Here's a basic sample/example of JsRender in action: 
From http://borismoore.github.com/jsrender/demos/step-by-step/01_inserting-data.html












Requires Script references: jQuery, jsrender
Borris Moore offers a complete set of demos, which demonstrate much more: jsrender Demos.

What's JsRender's Future?

As a product, Borris Moore offered the following road-map for JsRender/JsView on OCTOBER 12, 2011 in this blog post: jQuery Templates and JsViews: The Roadmap

Roadmap summary:
  • jQuery templates
  • : Will remain at Beta1, and be superseded by JsRender templates, and JsViews.
  • JsRender
  • : Soon move to Beta – then on to V1
  • jQueryUI plan to use JsRender. (TBD whether it will migrate to jQuery project in GitHub...)
  • JsViews
  • : Move to Beta (after JsRender) and then on to V1 …
  • May also be used by jQueryUI

My Experiences

Most recently I've been using JsRender to render content from Ektron after designing a series of templates that would render content as JSon (see Designing Data Templates for Content Extraction with Ektron (JSon, XML) (Ektron Designing Content Delivery: Part 2) for more information).

In the past, I've also used it for rendering forms, pages, static content, large tables, dynamically loaded sections of my application. What can I say, it's easy, flexible and it works.

Resources:
jsrender on GitHub
jsrender Demos
JQuery Templates
Borris Moore "JsViews: Next-generation jQuery Templates and Data Link" Presentation
Designing Data Templates for Content Extraction with Ektron (JSon, XML) (Ektron Designing Content Delivery: Part 2

No comments: