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.

Html templating introduction


Published on

HTML templating

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Html templating introduction

  1. 1. HTML Templating – Introduction - Nagaraju Sangam
  2. 2. How many patterns you see here????
  3. 3. ????
  4. 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. 5. What are the repeating elements in HTML?  tables: tr td  ul/ol li  select options  Any element can be repeated….!!!
  6. 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. 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. 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. 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. 10. Disadvantages  Not Search Engine friendly.  Not History friendly
  11. 11. How templating works? TemplateFunction = engine.template(txtHTMLTemplate); Markup = TemplateFunction(data); Template Engine functiondata markup
  12. 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. 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. 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) – – –
  15. 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. 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. 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. 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. 19. QA No questions please…???