Intro to HTML5 Templates

HTML5 template is NOT a new data binding tool and its not a new MV* framework; it’s part of the html spec. Since it’s in the spec you may be curious about the process of getting into the w3 spec, and what exactly that means.

  1. Developers gripe about html/css missing a feature, W3 doesn’t listen. If the w3 listened to every complaint we would have millions of weird features.
  2. People build libraries to solve the problem. The W3 starts to watch but takes no action. If the problem is legitimate then more and more libraries will be created to solve the problem.
  3. One library or framework rises to the top, W3 learns from it, and creates a new spec.
  4. Once in the w3 spec all browsers should support this feature, and it should function the same across all browsers.

Templating is old hat for most programming languages- consider for example razor syntax in c# or erb in ruby. If you are living in the webs front-end you are probably familiar with mustach.js or one of its less popular friends like hogan.js, handlesbars.js, Walrus, DoT.js, or Dust.js. If you are familiar with any JS front end framework you probably understand how templating works.

The general idea behind templating is that you have something that you would like implemented multiple times with slight variants. A template lets you write it once, and switch the variants every time. For example, If you have a list of projects you worked on in your portfolio and the only thing that changes per item is the picture, title, and description. You COULD copy and paste 1 working block of code for each item, or you could use a template.

If you have avoided using any of the current js templates, and are curious how they work, they give the ability to build small little views that you can reuse. The advantage they have over copy and pasting code is that if a change is required to each set, AFTER you copy and paste, you need to do some text editor kung fu to not end up rewriting everything.

Lets jump into some code!!! The following is an example of what a simple template that displays a persons picture, their name, and a card that holds all the styling for that card.

<template id='profileCardTemplate'>  
    <div class='profileCard'>
       <img src=”” alt='Profile Image'>
       <h4 class='personName'></div>
    </div>
</template>  

The first thing you may notice is the new