This document discusses JavaScript template engines, which allow separating HTML and JavaScript code to improve maintainability. It describes when to use template engines, such as for large projects or to decouple code. Various client-side and server-side template engines are listed, including Mustache.js, Handlebars.js, and Jade. Factors for choosing a template engine include speed, support for logic or not, pre-compilation, and community support. Handlebars is highlighted as a popular option that supports features like expressions, data contexts, compilation, block helpers and partials.

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

2. Javascript Template Engine?

3. Javascript Template Engine?
Output = Template( input, data )

4. Input
Data
Output

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

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. Client-side Templates
•
•
•
•
•
•
•
•
•
Mustache.js
Handlebars.js
EJS
Underscore.js
JsRender
Hogan.js by Twitter
Dust.js by Linkedin
jQuery templates
etc, etc…

8. Server-side Templates
• Jade
• Slim
• etc, etc…

9. Templates Type
• Logical templates
• Logicless templates

10. Logical Templates

11. Logicless Templates

12. Choosing Right Template
•
•
•
•
•
•
•
Speed
Logic or Logicless
Pre-compilation
Active development
Community support
File size
Client or Server side

13. Mustache

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. Handlebars
•
•
•
•
•
Expressions
Data or context
Compiler
Block helpers
Partials

16. Expressions

17. Data

18. Compile

19. Block Helper

20. Get hands dirty
( Check sample.html )

21. @prabhakaran_v
Karan.prabhu@gmail.com