Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Javascript Template Engine

Prabhakaran
UX Developer, Reportbee
Executive Member, RIA-RUI Society
Javascript Template Engine?
Javascript Template Engine?

Output = Template( input, data )
Input

Data

Output
Why & When to use?
• Decouple HTML and JS
• Code maintainability
• For large projects
Why & When to use?
•
•
•
•

When you think you are JS Ninja
When you need to work on your code again
Good value for your r...
Client-side Templates
•
•
•
•
•
•
•
•
•

Mustache.js
Handlebars.js
EJS
Underscore.js
JsRender
Hogan.js by Twitter
Dust.js ...
Server-side Templates
• Jade
• Slim

• etc, etc…
Templates Type
• Logical templates
• Logicless templates
Logical Templates
Logicless Templates
Choosing Right Template
•
•
•
•
•
•
•

Speed
Logic or Logicless
Pre-compilation
Active development
Community support
File ...
Mustache
Handlebars?
• Has advanced features and can satisfy almost all
kinds of requirement
• Has most active community
• Its a lo...
Handlebars
•
•
•
•
•

Expressions
Data or context
Compiler
Block helpers
Partials
Expressions
Data
Compile
Block Helper
Get hands dirty
( Check sample.html )
@prabhakaran_v
Karan.prabhu@gmail.com
Upcoming SlideShare
Loading in …5
×

Javascript Template Engine - Getting Started

873 views

Published on

An introduction to Javascript Template Engine

Published in: Technology, Business
  • Be the first to comment

Javascript Template Engine - Getting Started

  1. 1. Javascript Template Engine Prabhakaran UX Developer, Reportbee Executive Member, RIA-RUI Society
  2. 2. Javascript Template Engine?
  3. 3. Javascript Template Engine? Output = Template( input, data )
  4. 4. Input Data Output
  5. 5. Why & When to use? • Decouple HTML and JS • Code maintainability • For large projects
  6. 6. Why & When to use? • • • • When you think you are JS Ninja When you need to work on your code again Good value for your resume Follow the trend
  7. 7. Client-side Templates • • • • • • • • • Mustache.js Handlebars.js EJS Underscore.js JsRender Hogan.js by Twitter Dust.js by Linkedin jQuery templates etc, etc…
  8. 8. Server-side Templates • Jade • Slim • etc, etc…
  9. 9. Templates Type • Logical templates • Logicless templates
  10. 10. Logical Templates
  11. 11. Logicless Templates
  12. 12. Choosing Right Template • • • • • • • Speed Logic or Logicless Pre-compilation Active development Community support File size Client or Server side
  13. 13. Mustache
  14. 14. Handlebars? • Has advanced features and can satisfy almost all kinds of requirement • Has most active community • Its a logicless templating engine • Lot of frameworks use Handlebars by default
  15. 15. Handlebars • • • • • Expressions Data or context Compiler Block helpers Partials
  16. 16. Expressions
  17. 17. Data
  18. 18. Compile
  19. 19. Block Helper
  20. 20. Get hands dirty ( Check sample.html )
  21. 21. @prabhakaran_v Karan.prabhu@gmail.com

×