SlideShare a Scribd company logo

Taking Advantage of Client Side / JavsScript Templates in Rich Internet Applications

•Download as PPT, PDF•
•
Mahbubur Rahman
Mahbubur Rahman

JavaScript templates render and cache HTML client-side without server requests, improving page speed. They also allow abstracting UI logic into a JavaScript API. By pushing some processing to the client, templates decrease server load and improve scalability while providing a rich user experience. Templates use tags in HTML-like code to insert data values and control flow. Common template engines like Mustache support multiple languages and platforms.

1 of 19
Chief Technology Officer Blueliner NY www.bluelinerny.com www.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=&quot;entry&quot;> <h1> {{title}} </h1> {{#with author}} <h2>By {{firstName}} {{lastName}} </h2> {{/with}} </div> { title: &quot;My first post!&quot;, author: { firstName: &quot;Charles&quot;, lastName: &quot;Jolley&quot; } }
HOW DO JAVASCRIPT TEMPLATES LOOK LIKE - 2 <script id=&quot;movieTemplate&quot; type=&quot;text/x-jquery-tmpl&quot;> <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 = &quot;text/javascript&quot; > var movies = [{ Title : &quot;Meet Joe Black&quot; , Languages : &quot;English and French&quot; , Subtitles : &quot;English&quot; }, { Title : &quot;Eyes Wide Shut&quot; , Subtitles : &quot;French and Spanish&quot; }, { Title : &quot;The Mighty&quot; }, { Title : &quot;City Hunter&quot; , Languages : &quot;Mandarin and Chinese&quot; }]; $ ( &quot;#movieList&quot; ). html ( $ ( &quot;#movieTemplate&quot; ). 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 apps Web Admin Panel Live Score Web Desktops Any 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/)

More Related Content

Taking Advantage of Client Side / JavsScript Templates in Rich Internet Applications

  • 1. Chief Technology Officer Blueliner NY www.bluelinerny.com www.mahbubblog.com Md. Mahbubur Rahman
  • 2. ? What is Rich Internet Applications, Btw
  • 5. 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
  • 6. Pushing Some loads to Client’s Computer
  • 7. Flow of how JavaScript Templates work
  • 8. HOW DO JAVASCRIPT TEMPLATES LOOK LIKE HTML JSON <div class=&quot;entry&quot;> <h1> {{title}} </h1> {{#with author}} <h2>By {{firstName}} {{lastName}} </h2> {{/with}} </div> { title: &quot;My first post!&quot;, author: { firstName: &quot;Charles&quot;, lastName: &quot;Jolley&quot; } }
  • 9. HOW DO JAVASCRIPT TEMPLATES LOOK LIKE - 2 <script id=&quot;movieTemplate&quot; type=&quot;text/x-jquery-tmpl&quot;> <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>
  • 10. HOW DO JAVASCRIPT TEMPLATES LOOK LIKE - 3 < script type = &quot;text/javascript&quot; > var movies = [{ Title : &quot;Meet Joe Black&quot; , Languages : &quot;English and French&quot; , Subtitles : &quot;English&quot; }, { Title : &quot;Eyes Wide Shut&quot; , Subtitles : &quot;French and Spanish&quot; }, { Title : &quot;The Mighty&quot; }, { Title : &quot;City Hunter&quot; , Languages : &quot;Mandarin and Chinese&quot; }]; $ ( &quot;#movieList&quot; ). html ( $ ( &quot;#movieTemplate&quot; ). render ( movies )); </ script >
  • 11. HOW DO JAVASCRIPT TEMPLATES LOOK LIKE – 4
  • 12. Ways of Using Visitor’s PCs. Adobe Flash / Flex Google Gears Microsoft Silverlight HTML5
  • 13. Let some computation be done by Client
  • 14. Right AJAX Data Transport XML JSON HTML
  • 15. 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 .
  • 16. Same Template for Server side and Client Side (Contd.)
  • 17. 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
  • 18. JavaScript Templating best suited for Stock Related apps Web Admin Panel Live Score Web Desktops Any AJAX Intensive app
  • 19. 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/)