Last weekend I went up to Cambridge, MA for the ’09 jQuery Conference. Two days of great jQuery/JavaScript goodness! I gotta say that was the best conference I’ve been to in awhile.

There were a couple presentations I had to skip but the breakout sessions more then made up for them. All in all I took home some great tips & tricks for:

• writting efficient jQuery code
• using custom events for single page web apps
• speeding up page load with tools like labjs
• building iPhone apps via jQTouch
• and the biggest tip of all… get a hotel within a mile from conference

The conference was held at the Microsoft New England Research & Development Center aka MS NERD. Took this panoramic shot of Boston from the lunch area duing conference…

Great venue!! The wifi was sick! Looking forward to the next event @ MS NERD Center.

Check out the presentation slides from the conference. Make sure you go next year!

Ok, if your like me then you hate all templating langauges- they suck, they really suck. I hate them because I hate the rules they enforce upon me, they are slow, and they slow me down. Because of this, usually I end up making code that looks like this:

UGLY:

1
2
3
4

function display(data) {
   var output = "<div>" + data.text + "</div>";
   element.innerHTML=output;
}

How horrible is that? That’s probably worse than using a bad templating langauge.

Well, after disappointments with other jQuery templating plugins, I decided to make my own:

The Solution: PureJSTemplate

With PureJSTemplate you use old fashioned javascript in your template. You simply surround the javascript in special tags. Here’s an example of what you can do:

1
2
3

<# for(var i=0; i<10; i++) { #>
   <#=i#><br/>
<#}#>

That will output the numbers 0 through 9. Easy, isn’t it?

Using it:

You simply surround your template code with a textarea tag:

1
2
3
4
5

<textarea id="tpl" style="display:none">
 
<!-- TEMPLATE CODE HERE -->
 
</textarea>

and call it from javascript like so:

1
2
3
4

$("output").pureJSTemplate({
   id   : "tpl",
   data : {}
});

That’s it.

Get the Code:

Visit a demo/benchmark page here. Get the js here.