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

Giving Node.js a Try

Based upon their own description: "Node.js is a platform built on Chrome's JavaScript runtime for easily building fast, scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices." (-http://nodejs.org/)

Seems pretty tempting. In particular I'm interesting is using Node.js for Javascript unit testing in combination with Jasmine. As I've started creating some basic script libraries for dependency injection and publish-subscribe I need a way to unit test and a way to run these tests. It's also promising for use with JsRender as well for templating on the server-side.

This blog post (5 reasons to give node.js some love) covers what I think are the basic reasons why to give it a try:
1) You get to write Javascript on the server and the client
2) Event-based asynchronous stuff is just How Things Work in JavaScript
3) Awesome package management!
4) Community community community
5) It's easy, really easy, like super easy, We can all do it!
(-http://codeofrob.com/archive/2011/04/30/5-reasons-to-give-node-js-some-love.aspx)

The download link on the Node.js site offers three download options: Windows Installer, Mac Installer, and source. Today I am going to download both the Windows Installer and the source (to take a look). For reference the project is hosted on GitHub here: https://github.com/joyent/node. Taking a look, the project seems active and had a recent check in (43 minutes ago).

After running the installation, getting started is easy.
1. Open a command-prompt
2. Navigate to the executable path (on my machine): "C:\Program Files (x86)\nodejs\"
3. Create a small, sample script to be executed, and name it example.js. In my case I copied it from the example:

var http = require('http');
http.createServer(function (req, res) {
res.writeHead(200, {'Content-Type': 'text/plain'});
res.end('Hello World\n');
}).listen(1337, "127.0.0.1");
console.log('Server running at http://127.0.0.1:1337/');

4. Type node example.js
5. node.js will respond with the result of the executed script. In this case:

"Server running at http://127.0.0.1:1337/"

How to exit node.js:
To exit node.js you have to enter the key-combination Ctrl-C twice or Ctrl-C, Ctrl-C

References:
Node.js
Jasmine
JsRender
5 reasons to give node.js some love

Execute client side script in IFrame from parent page

To execute a script within in IFRAME from the parent page

Seems simple right? Sure it is... unless you want something that works in IE, Firefox, Chrome, and Safari. There are tons of blog posts, and articles on how to execute the script from the IFRAME on the parent, but surprisingly few articles on the opposite.

At the end of the day, this code should work in all 4 browsers:
function fnEvalFrame(iframe, command) {
if (!iframe.eval && iframe.execScript) {
iframe.execScript("null");
}
iframe.eval(command);
}

Also, when referring to your frames, use self.frames (or self.frames[], window.frames[], top.frames[], parent.frames[]) and not document.frames

References:
Firefox and document.frames
SSRS And Firefox
JavaScript eval in iframes