Html Templating - DOT JS
Download as PPTX, PDF0 likes3,540 views
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.
Html Templating - DOT JS
- 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
- 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