SlideShare une entreprise Scribd logo
1  sur  19
Client-side rendering using mustache.js   BHASHKAR SHARMA 01 Oct' 11
About me ,[object Object],[object Object],[object Object],[object Object]
TouchSite
The Classical web Server Client n th  request Server Client (n+1) th  request template data page page template data Load page Load page
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
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 page template data page Load page
JQuery Mobile ,[object Object],[object Object],[object Object]
Enter mustache.js  
Why mustache ,[object Object],[object Object],[object Object],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 {
Benefits of client-side rendering ,[object Object],[object Object],[object Object],[object Object],[object Object],server tablet fone Browser same data Websites AND native apps
A mustache template ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Data ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Rendered template ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
DEMO
Code Examples ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Code Examples ,[object Object],[object Object],[object Object]
The Future ,[object Object],[object Object],[object Object],(Python with mustache)
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

Contenu connexe

Tendances

Kansas City WordCamp - Website Performance
Kansas City WordCamp - Website PerformanceKansas City WordCamp - Website Performance
Kansas City WordCamp - Website Performance
Kevin Potts
 
Architecting single-page front-end apps
Architecting single-page front-end appsArchitecting single-page front-end apps
Architecting single-page front-end apps
Zohar Arad
 

Tendances (20)

Sencha At Xero
Sencha At XeroSencha At Xero
Sencha At Xero
 
Kansas City WordCamp - Website Performance
Kansas City WordCamp - Website PerformanceKansas City WordCamp - Website Performance
Kansas City WordCamp - Website Performance
 
Html Templating - DOT JS
Html Templating - DOT JSHtml Templating - DOT JS
Html Templating - DOT JS
 
Tf ffccjs
Tf   ffccjsTf   ffccjs
Tf ffccjs
 
Tf frccjs
Tf frccjsTf frccjs
Tf frccjs
 
Tf ffccjs
Tf ffccjsTf ffccjs
Tf ffccjs
 
Expressive objects
Expressive objectsExpressive objects
Expressive objects
 
Architecting single-page front-end apps
Architecting single-page front-end appsArchitecting single-page front-end apps
Architecting single-page front-end apps
 
technology@web
technology@webtechnology@web
technology@web
 
LatJUG. Google App Engine
LatJUG. Google App EngineLatJUG. Google App Engine
LatJUG. Google App Engine
 
Introduction about-ajax-framework
Introduction about-ajax-frameworkIntroduction about-ajax-framework
Introduction about-ajax-framework
 
#1 of HTML and CSS3
#1 of HTML and CSS3 #1 of HTML and CSS3
#1 of HTML and CSS3
 
Introducing project spartan
Introducing project spartanIntroducing project spartan
Introducing project spartan
 
Introduction to html class-1
Introduction to html class-1Introduction to html class-1
Introduction to html class-1
 
Presentation
PresentationPresentation
Presentation
 
Browser Hacks and Nth-chind class selectors
Browser Hacks and Nth-chind class selectorsBrowser Hacks and Nth-chind class selectors
Browser Hacks and Nth-chind class selectors
 
Introduction to ajax
Introduction to ajaxIntroduction to ajax
Introduction to ajax
 
Haml. New HTML? (RU)
Haml. New HTML? (RU)Haml. New HTML? (RU)
Haml. New HTML? (RU)
 
rel=alternate, hreflang=x - International Duplicate Content Issues
rel=alternate, hreflang=x - International Duplicate Content Issuesrel=alternate, hreflang=x - International Duplicate Content Issues
rel=alternate, hreflang=x - International Duplicate Content Issues
 
Boosting Your Productivity, with Backbone & RactiveJS
Boosting Your Productivity, with Backbone & RactiveJS Boosting Your Productivity, with Backbone & RactiveJS
Boosting Your Productivity, with Backbone & RactiveJS
 

Similaire à Client side rendering using mustache.js

Taking Advantage of Client Side / JavsScript Templates in Rich Internet Appli...
Taking Advantage of Client Side / JavsScript Templates in Rich Internet Appli...Taking Advantage of Client Side / JavsScript Templates in Rich Internet Appli...
Taking Advantage of Client Side / JavsScript Templates in Rich Internet Appli...
Mahbubur Rahman
 
Doing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code Camp
Doing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code CampDoing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code Camp
Doing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code Camp
Chris Love
 
Single Page WebApp Architecture
Single Page WebApp ArchitectureSingle Page WebApp Architecture
Single Page WebApp Architecture
Morgan Cheng
 
My Presentation On Ajax
My Presentation On AjaxMy Presentation On Ajax
My Presentation On Ajax
Ghaffar Khan
 

Similaire à Client side rendering using mustache.js (20)

Javazone 2010-lift-framework-public
Javazone 2010-lift-framework-publicJavazone 2010-lift-framework-public
Javazone 2010-lift-framework-public
 
I Know It Was MEAN, But I Cut the Cord to LAMP Anyway
I Know It Was MEAN, But I Cut the Cord to LAMP AnywayI Know It Was MEAN, But I Cut the Cord to LAMP Anyway
I Know It Was MEAN, But I Cut the Cord to LAMP Anyway
 
Taking Advantage of Client Side / JavsScript Templates in Rich Internet Appli...
Taking Advantage of Client Side / JavsScript Templates in Rich Internet Appli...Taking Advantage of Client Side / JavsScript Templates in Rich Internet Appli...
Taking Advantage of Client Side / JavsScript Templates in Rich Internet Appli...
 
I Know It Was MEAN, But I Cut the Cord to LAMP Anyway
I Know It Was MEAN, But I Cut the Cord to LAMP AnywayI Know It Was MEAN, But I Cut the Cord to LAMP Anyway
I Know It Was MEAN, But I Cut the Cord to LAMP Anyway
 
JBUG 11 - Django-The Web Framework For Perfectionists With Deadlines
JBUG 11 - Django-The Web Framework For Perfectionists With DeadlinesJBUG 11 - Django-The Web Framework For Perfectionists With Deadlines
JBUG 11 - Django-The Web Framework For Perfectionists With Deadlines
 
"Progressive Web Apps" by Riza Fahmi (Hacktiv8)
"Progressive Web Apps" by Riza Fahmi	(Hacktiv8)"Progressive Web Apps" by Riza Fahmi	(Hacktiv8)
"Progressive Web Apps" by Riza Fahmi (Hacktiv8)
 
Progressive Web Apps. What, why and how
Progressive Web Apps. What, why and howProgressive Web Apps. What, why and how
Progressive Web Apps. What, why and how
 
Doing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code Camp
Doing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code CampDoing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code Camp
Doing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code Camp
 
Web II - 01 - Introduction to server-side development
Web II - 01 - Introduction to server-side developmentWeb II - 01 - Introduction to server-side development
Web II - 01 - Introduction to server-side development
 
Html javascript
Html javascriptHtml javascript
Html javascript
 
Ajax to the Moon
Ajax to the MoonAjax to the Moon
Ajax to the Moon
 
Single Page WebApp Architecture
Single Page WebApp ArchitectureSingle Page WebApp Architecture
Single Page WebApp Architecture
 
I Feel Pretty
I Feel PrettyI Feel Pretty
I Feel Pretty
 
Boston Computing Review - Java Server Pages
Boston Computing Review - Java Server PagesBoston Computing Review - Java Server Pages
Boston Computing Review - Java Server Pages
 
Web Development for UX Designers
Web Development for UX DesignersWeb Development for UX Designers
Web Development for UX Designers
 
AJAX - An introduction
AJAX - An introductionAJAX - An introduction
AJAX - An introduction
 
JAVASRIPT and PHP Basics# Unit 2 Webdesign
JAVASRIPT and PHP Basics# Unit 2 WebdesignJAVASRIPT and PHP Basics# Unit 2 Webdesign
JAVASRIPT and PHP Basics# Unit 2 Webdesign
 
Grown-up javascript with AngularJS
Grown-up javascript with AngularJSGrown-up javascript with AngularJS
Grown-up javascript with AngularJS
 
My Presentation On Ajax
My Presentation On AjaxMy Presentation On Ajax
My Presentation On Ajax
 
Introduction to JSF
Introduction toJSFIntroduction toJSF
Introduction to JSF
 

Dernier

Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
panagenda
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
WSO2
 

Dernier (20)

Exploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusExploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with Milvus
 
CNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In PakistanCNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In Pakistan
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
 
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 AmsterdamDEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
 
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsMS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectors
 
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
 
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
 
Vector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptxVector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptx
 
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot ModelMcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdfRising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..
 
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
 
[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf
 
Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 

Client side rendering using mustache.js

  • 1. Client-side rendering using mustache.js   BHASHKAR SHARMA 01 Oct' 11
  • 2.
  • 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. 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. Rendering on the server markup template data Rendering on the client markup template data server server server client
  • 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.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15. DEMO
  • 16.
  • 17.
  • 18.
  • 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