Client-side rendering using mustache.js   BHASHKAR SHARMA 01 Oct' 11
About me <ul><li>Core Team Member at MobStac </li></ul><ul><li>Working on mobile web for 1.5 years </li></ul><ul><li>Love ...
TouchSite
The Classical web Server Client n th  request Server Client (n+1) th  request template data page page template data Load p...
The AJAX web Server Client n th  request Server Client (n+1) th  request template data page markup template data Load page...
Rendering on the server markup template data Rendering on the client markup template data server server server client
The client-rendered web Server Client n th  request Server Client (n+1) th  request template data Render, Add markup to pa...
JQuery Mobile <ul><ul><li>Fixed page layout </li></ul></ul><ul><ul><li>Request full page, break it down and load it via AJ...
Enter mustache.js  
Why mustache <ul><ul><li>High performance </li></ul></ul><ul><ul><li>Available in multiple languages </li></ul></ul><ul><u...
Benefits of client-side rendering <ul><ul><li>Data independent of layout </li></ul></ul><ul><ul><li>Unified data API </li>...
A mustache template <ul><li><div> </li></ul><ul><li>This will {{action}} once. </li></ul><ul><li><ul> </li></ul><ul><li>{{...
Data <ul><li>{ </li></ul><ul><li>“ action” : “print”, </li></ul><ul><li>“ repeat” : [ </li></ul><ul><li>{ “count” : “1”, “...
Rendered template <ul><li><div> </li></ul><ul><li>This will print once. </li></ul><ul><li><ul> </li></ul><ul><li><li>The c...
DEMO
Code Examples <ul><li>def  getTemplateJson (request): </li></ul><ul><li>template_json = { </li></ul><ul><li>'contents'  : ...
Code Examples <ul><li>def  articleView (request, article_id): </li></ul><ul><li>article = get_object_or_404(Article, pk=ar...
The Future <ul><ul><li>Allow readers to customize layout by picking themes or repositioning elements </li></ul></ul><ul><u...
My handle is @bhashkarsharma and I'm not a terrorist geek Speed-Post: bhashkar@mobstac.com Thank You! We are looking for c...
Upcoming SlideShare
Loading in...5
×

Client side rendering using mustache.js

5,744

Published on

My jsfoo presentation describing how to use client-side rendering using mustache.js and the use we put it to, for making TouchSites.

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,744
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
34
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Client side rendering using mustache.js

  1. 1. Client-side rendering using mustache.js   BHASHKAR SHARMA 01 Oct' 11
  2. 2. About me <ul><li>Core Team Member at MobStac </li></ul><ul><li>Working on mobile web for 1.5 years </li></ul><ul><li>Love front-end development and studying User Experience </li></ul><ul><li>B. Tech. from College Of Engineering Roorkee </li></ul>
  3. 3. TouchSite
  4. 4. The Classical web Server Client n th request Server Client (n+1) th request template data page page template data Load page Load page
  5. 5. The AJAX web Server Client n th request Server Client (n+1) th request template data page markup template data Load page Add markup to page
  6. 6. Rendering on the server markup template data Rendering on the client markup template data server server server client
  7. 7. The client-rendered web Server Client n th request Server Client (n+1) th request template data Render, Add markup to page template data page Load page
  8. 8. JQuery Mobile <ul><ul><li>Fixed page layout </li></ul></ul><ul><ul><li>Request full page, break it down and load it via AJAX (counter-intuitive) </li></ul></ul><ul><ul><li>Too much overhead overriding default behavior </li></ul></ul>
  9. 9. Enter mustache.js  
  10. 10. Why mustache <ul><ul><li>High performance </li></ul></ul><ul><ul><li>Available in multiple languages </li></ul></ul><ul><ul><li>Similar to django templates </li></ul></ul>Ruby, JavaScript, Python, Erlang, PHP, Perl, Objective-C, Java, .NET, Android, C++, Go, Lua, ooc, ActionScript, ColdFusion, Scala, Clojure, Fantom, CoffeeScript, D, and node.js {
  11. 11. Benefits of client-side rendering <ul><ul><li>Data independent of layout </li></ul></ul><ul><ul><li>Unified data API </li></ul></ul><ul><ul><li>Can cache responses </li></ul></ul><ul><ul><li>Save server cycles </li></ul></ul><ul><ul><li>Save bandwidth </li></ul></ul>server tablet fone Browser same data Websites AND native apps
  12. 12. A mustache template <ul><li><div> </li></ul><ul><li>This will {{action}} once. </li></ul><ul><li><ul> </li></ul><ul><li>{{#repeat}} </li></ul><ul><li><li>The count is {{count}} and the word is {{word}}.</li> </li></ul><ul><li>{{/repeat}} </li></ul><ul><li></ul> </li></ul><ul><li>{{#blank}} </li></ul><ul><li>This would not be displayed. </li></ul><ul><li>{{/blank}} </li></ul><ul><li></div> </li></ul>
  13. 13. Data <ul><li>{ </li></ul><ul><li>“ action” : “print”, </li></ul><ul><li>“ repeat” : [ </li></ul><ul><li>{ “count” : “1”, “word” : “Apple” }, </li></ul><ul><li>{ “count” : “2”, “word” : “Gravity” }, </li></ul><ul><li>{ “count” : “3”, “word” : “Newton” } </li></ul><ul><li>] </li></ul><ul><li>} </li></ul>
  14. 14. Rendered template <ul><li><div> </li></ul><ul><li>This will print once. </li></ul><ul><li><ul> </li></ul><ul><li><li>The count is 1 and the word is Apple.</li> </li></ul><ul><li><li>The count is 2 and the word is Gravity.</li> </li></ul><ul><li><li>The count is 3 and the word is Newton.</li> </li></ul><ul><li></ul> </li></ul><ul><li></div> </li></ul>
  15. 15. DEMO
  16. 16. Code Examples <ul><li>def getTemplateJson (request): </li></ul><ul><li>template_json = { </li></ul><ul><li>'contents' : getTemplate( 'ajax_contents.html' ), </li></ul><ul><li>'article' : getTemplate( 'ajax_article.html' ) </li></ul><ul><li>} </li></ul><ul><li>return HttpResponseJSON(simplejson.dumps(template_json)) </li></ul>
  17. 17. Code Examples <ul><li>def articleView (request, article_id): </li></ul><ul><li>article = get_object_or_404(Article, pk=article_id) </li></ul><ul><li>return HttpResponseJSON(simplejson.dumps(article, ensure_ascii=False, cls=CustomJSONEncoder)) </li></ul>
  18. 18. The Future <ul><ul><li>Allow readers to customize layout by picking themes or repositioning elements </li></ul></ul><ul><ul><li>Make elements more interactive </li></ul></ul><ul><ul><li>Use client-side rendering for mobile phones (based on device capability) </li></ul></ul>(Python with mustache)
  19. 19. My handle is @bhashkarsharma and I'm not a terrorist geek Speed-Post: bhashkar@mobstac.com Thank You! We are looking for code buddhas to join our team
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×