Templates to Stroke Your Beard to
Front-end frameworks are an easy way for any developer to design and implement front-ends to any website. Some of the more popular ones are AngularJS, React and Vue.JS. But we are ignoring the heavy-hitters for now and will be instead stepping down onto what’s called an HTML template.
An HTML/Front-End template is a series of packages and files that lighten a developers load when making front-ends to webpages. The two we will be comparing are Mustache.JS and Handlebars.JS.
Mustache, published in 2012, is a front-end template that allows users to implement logic-less syntax onto html pages. Mustache uses objects to contain the data needed to pass onto the HTML page and uses the keys to render the required fields onto the page. The values of the keys are always rendered as a string so the number 3 would render as the string “ 3 ”. Implementation of the template can be seen as follows:
// Render.JS
function renderHello() {
var template = document.getElementById('template').innerHTML;
var rendered = Mustache.render(template, { name: 'Luke' });
document.getElementById('target').innerHTML = rendered;
}// HTML
<body onload="renderHello()">
<div id="target">Loading...</div>
<script id="template" type="x-tmpl-mustache">
Hello {{ name }}!
</script>
As you see in the example above, the HTML file contains an “onload” attribute that calls the function in the HTML. The Javascript then passes the object “rendered” containing the key of “name” onto the HTML where it takes the key of “name” and displays the value of it. Any value sent by Mustache is considered a string meaning that the number 3 will be always be the string “3”. In terms of simplicity Mustache is as simple as it gets.
Now Handlebars is a very similar front-end template. They are both logic-less and use curly braces ({}) to denote values contained within the HTML. One major difference between the two is that Handlebars allows the use of loops within the HTML called Each loops which allows the html to cycle through all the data given and display them all. This allows the programmer to dynamically implement repeatable elements onto the HTML file that may be difficult otherwise. For example,
{{#each users}}<div class="card text-center" style="min-width: 18rem; max-width: 18rem; outline:black"><div class="card-header">{{username}}</div><img class="card-img-top" src="{{profPic}}" alt="profile-pic"><hr><div class="card-body"><p class="card-text">{{bio}}</p></div></div>{{/each}}
In the code above, users is an object containing several different users with data fields stored as keys. You can see some of those fields being displayed such as Username, ProfPic, and Bio. Those fields are generating as many cards as there are users contained within the Users object. Now Mustache is able to do this as well. But the logic and the syntax needed to do so are far more complicated than the conventions Handlebars uses.
JUST TELL ME WHICH ONE IS BETTER! — The answer is Handlebars. With its very easy to use syntax and easy learning curve it is a must have for template implementation for developers.