SlideShare una empresa de Scribd logo
1 de 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

Más contenido relacionado

La actualidad más candente

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
 

La actualidad más candente (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
 

Similar a 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
 

Similar a 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
 

Último

IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
Enterprise Knowledge
 

Último (20)

The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfThe Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024
 
A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024
 
The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxThe Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptx
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
 
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
 
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
 
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
 
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
 
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreterPresentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreter
 
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
 
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
 
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptxFactors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
 

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