Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
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...
Prochain SlideShare
Chargement dans…5
×

Client side rendering using mustache.js

6 360 vues

Publié le

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

Publié dans : Technologie
  • Soyez le premier à commenter

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

×