Chief Technology OfficerBlueliner NY www.bluelinerny.comwww.mahbubblog.com

Md. Mahbubur Rahman

?What is Rich Internet Applications, Btw

Rich Internet Applications

Templates Again ?

Why JavaScript Templates ?JavaScript templates are rendered and cached client-side without sending an HTTP request to the server — in other words, they’re lightning fast. Speed benefits aside, JavaScript templates also afford us the opportunity to abstract the administrative UI into a simple JavaScript API.

Rich and Faster User Experience

Decrease the load on Server [ increase scalability ]

Easy to Manage

And.. Because the modern web browsers are very powerful

Pushing Some loads to Client’s Computer

Flow of how JavaScript Templates work

HOW DO JAVASCRIPT TEMPLATES LOOK LIKE

HTML

JSON

<div class="entry"> <h1>{{title}}</h1>

{{#with author}} <h2>By {{firstName}} {{lastName}}</h2> {{/with}}</div>

{ title: "My first post!", author: { firstName: "Charles", lastName: "Jolley" }}

HOW DO JAVASCRIPT TEMPLATES LOOK LIKE - 2

<script id="movieTemplate" type="text/x-jquery-tmpl"><tr>

<td>{{=Title}}</td><td>

{{#if Languages}}Alternative languages: <em>{{=Languages}}</em>.

{{else Subtitles}}Original language only... <br/>Subtitles in

<em>{{=Subtitles}}</em>.{{else}}

Original version only, without subtitles.{{/if}}

</td></tr>

</script>

HOW DO JAVASCRIPT TEMPLATES LOOK LIKE - 3

<script type="text/javascript">var movies = [{ Title: "Meet Joe Black", Languages: "English and French", Subtitles: "English"}, { Title: "Eyes Wide Shut", Subtitles: "French and Spanish"}, { Title: "The Mighty"}, { Title: "City Hunter", Languages: "Mandarin and Chinese"}];$("#movieList").html($("#movieTemplate").render(movies));

</script>

HOW DO JAVASCRIPT TEMPLATES LOOK LIKE – 4

Ways of Using Visitor’s PCs.

Adobe Flash / Flex

Google Gears

Microsoft Silverlight

HTML5

Let some computation be done by Client

Right AJAX Data Transport

XML

JSON

HTML

Same Template for Server side and Client Side

Ex. Mustache, Handlebar JS

Available in Ruby, JavaScript, Python, Erlang,

PHP, Perl, Objective-C, Java, .NET, Android, C++,

Go, Lua, ooc, ActionScript, ColdFusion,

Scala, Clojure, Fantom, CoffeeScript, D, and for node.js.

Same Template for Server side and Client Side (Contd.)

JS Templating Good when

Loading all data from the server especially in rich list displays

Adding or updating new items in lists

Anywhere you need to add new complex content to the page

Anything that requires client side HTML rendering

JavaScript Templating best suited for

Stock Related appsWeb Admin PanelLive ScoreWeb DesktopsAny AJAX Intensive app

Some JavaScript Templating Engines

jQuery.View (https://github.com/BorisMoore/jsviews)

jQuery View Renderer (https://github.com/BorisMoore/jsrender)

Mustache (http://mustache.github.com/)

EJS (http://embeddedjs.com/)

PURE (http://beebole.com/pure/)

HandlebarJS (http://www.handlebarsjs.com/)

UnderscoreJS (http://documentcloud.github.com/underscore/)