This document provides an introduction to HTML templating. It discusses what templates are, common repeating elements in HTML that can be templated, and use cases for templating like menus, cart items, images etc. It compares templating approaches to traditional methods of preparing entire HTML on the server. Popular templating engines like Underscore, Mustache, Handlebars are listed and how templating works by binding templates with data to generate markup is explained. Best practices, challenges and demos of different templating engines are also covered.

1. HTML Templating – Introduction
- Nagaraju Sangam

2. How many patterns you see here????

3. ????

4. What?
• Template is a repeated markup from an html page
• Key is to identify and isolate the pattern.
• Bind the template with data and write to screen as html

5. What are the repeating elements in HTML?
 tables:
tr
td
 ul/ol
li
 select
options
 Any element can be repeated….!!!

6. HTML Template usecases?
 Menu Items
 Items in a cart
 Images in carousels
 Search results
 Popup dialogs
 Advertisements
 Discussions ( request/response)
 Mail items
 Records in a report
 Windows Tiles
 News Items
 Announcements
 UI Widgets
 List is huge……

7. World without templating?
 Templating world:
Fetch Template & data from the server, build html out of this data & template
on fly and render it on browser. Templating can be used both on server side and client
side.
Client Server
HTML
 Traditional approach:
Entire html is prepared at server side and fetched to browser for rendering.
Client Server
HTML Template
Data

8. Mixing the template and data...!!!
Template
(text)
Data
(JSON)
Markup
(text)
<div>
Name: <b> {{name}</b>
Phone: <b> {{phone}}</b>
Mobile: <b> {{mobile}}</b>
</div>
{
name: ‘Nagaraju,
phone: ‘080-12345’,
mobile: ‘8095410410’
}
Name: Nagaraj
Phone: 080-12345
Mobile: 8095410410

9. Advantages
 Separation of concerns: UI from data
 Reduce server load: Client Side processing. Templates can be loaded from CDNs.
 Low bandwidth usage: template is loaded once and cached on client.
 User Experience: Using ajax to load data and templates
 Reusability: of templates
 Flexibility : to load temaplates from CDNs/resource servers and data from
restful/soap based web services
 Many options: Number of engines available in market
 We can build offline applications: load template & data and cache it on client

10. Disadvantages
 Not Search Engine friendly.
 Not History friendly

11. How templating works?
TemplateFunction = engine.template(txtHTMLTemplate);
Markup = TemplateFunction(data);
Template
Engine
functiondata
markup

12. HTML Templating Engines
Underscore.js
Mustache.js
Handlebars.js
EJS.js
doT.js
jQuery
Jade.js
Knockout.js
Pure.Js
Dust.js
Swig
JUST
ECO.js
Hogan.js
Temp.js
Kendo.js
Contenmplate.js
CoffeeKup
Fest.js
Gaikan
Liquor
JUST
QEJS
Atpl
Whiskers
Walrus
Toffee
jazz

13. Classification
 Embedded JavaScript Vs logic-less.
More logic – more complex, but flexible
No logic – simple, but not flexible
 Client side Vs Server side
All server side templating engines can be used on client side, but not vice versa.
 DOM based Vs Text Based
 FW agnostic Vs FW built in

14. Things to consider for choosing a templating engines:
• Performance
• Flexibility
• Maturity
• Lightweight
• Server side/client side?
• Support and documentation.
• Package Manager Support (npm,bower etc)
• Framework Agnostic.
• Module system support(CommonJS, AMD, globals)
– http://garann.github.io/template-chooser/
– https://github.com/Deathspike/template-benchmark
– http://jsperf.com/js-template-engines-performance/95

15. Challenges…???
Syntax :
There is a learning curve when we adopt to a new templating engine
– Template Syntax (HAML/Jade Vs Dot/EJS)
- HTML or CoffeeScript based syntax
– Method name are different but they do the same, this has to be standardized across all 
- dot.template(), _.template(),
- swig.compile() , Hogan.compile(), dust.compile, Handlebars.compile()
- Mustache.to_html()
– Binding Syntax: <% prop %>, {{=prop}}, {prop}, {{prop}}
– Comments:
- html comments are understood by all templating engines.
- Own syntax for some templating engines ( e.g. dust: {# comments #} )

16. Challenges…???
Loading Templates:
- Including templates in pages (internal templates)
- script tag: <script type=“text/html” src=“url”/>
- template tag of HTML5
- Use Ajax to load template & data
- Use engine built-in feature: e.g. new EJS({url: '/template.ejs'}).render(data)
Data Binding:
- One-way/Two-way (e.g. Knockout allows both bindings)
Handling Template Inheritance:
- Master/Slave page kind of implementation
Error Handling/Debugging:
- Some templating engines properly reports errors (EJS will give error line no.)

17. Best Practices
• Optimize your markup for better performance.
• Separate script and styles for readability.
• Load your templates and images from CDN server.
• innerHTML can cause memory leaks, so use appendChild method.
• Use precompile templates via build system to improve performance
• Re-use DOMs instead of disposing and recreating. (cache in DomPool object)
• Manipulate Dom off the document (via document fragments)
• Preventing injections via dataContext
- Use escape() utility methods
• Do not loop thru html collections, its slower.
• Don’t leak teamplates, use CSRF token on the form to avoid XSS attacks.
• If you want to sandbox styles and dom, use WebComponents.
• Common scripts across templates should be defined outside templates under a
template utility script so the template becomes readable.

18. Demos…!!!
• Demo1: Client Side templating with the following engines
- EJS
- Mustache
- Handlebars
- dot.js
- dust
- Hogan
- swig
- underscore
• Demo2: Server Side Templating with Jade and Express

19. QA
No questions
please…???