SlideShare ist ein Scribd-Unternehmen logo
1 von 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

Weitere ähnliche Inhalte

Was ist angesagt?

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
 

Was ist angesagt? (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
 

Ähnlich wie 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
 

Ähnlich wie 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
 

Kürzlich hochgeladen

Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
Joaquim Jorge
 

Kürzlich hochgeladen (20)

Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
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
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
 
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 future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 
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)
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
 
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
 
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
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
 
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
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
 
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
 

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