For information on deciding between Angular JS and Handlebars see this StackOverflow question.
Why Are Templates Needed?
We have used HTML since the early 1990s.
Using a template pattern allows us to write our markup once and then populating it with different data,
is something that can increase application stability and decrease markup redundancy.
The Client-side vs. Server-side Debate
Ryan describes this as one of the great flame wars.
Should we do our templating on the client or the server?
With server side rendering, the complete HTML is delivered to the browser.
With client side rendering, both templates and data are delivered to the browser.
Arguments against client-side rendering:
– All browsers are not powerful enough
– Page initially renders without markup
– Poor Search Engine Optimisation
Arguments against server-side rendering:
– Uses too much bandwidth
– Wait time for server response is longer
– New request after each action is slow
Ryan believes the best solution uses a combination of the two different approaches.
Rendering on both sides, with the initial page request rendered by the server and subsequent pages rendered on the client
The Mustache Philosophy
The Mustache templating specification was released around 2009 and was first implemented in Ruby.
It’s since been used in almost ever mainstream programming language.
Handlebars is an implementation of the Mustache specification which incorporates much of the philosophy and syntax of the original Mustache.js
The philosophy is to keep logic out of your templates.
Ryan explains this is all about separation of concerns – keeping the presentation separate from your application logic.
Birth of Handlebars
Anything that Mustache can do, Handlebars can do.
Ryan talks about some of the features of Handlebars. There’s a compile function for precompiling templates and speeding up the rendering of them.
In the last module of this course we’ll look at including this as part of a build pipeline.
There are also Helpers, which Ryan describes as a killer feature.
Another feature that Ryan describes as powerful is Nested Paths for simplifying tags.
What It’s All About
We can use Templates with HTML, XML or plain text.
The data that Handlebars takes can be an object, an array or a function.
It’s platform agnostic: typically used in the browser, but can also be used for server-side rendering with Node.JS
Ryan discusses the pros and cons of the following options for client-side dependencies:
– Use a CDN (no control over request)
– Manually Download Code (pollutes source code)
– Use a Package Manager (best method)
Ryan explains how to install Bower here.
In this course Ryan uses the Atom editor, the Terminal of OSX and the Vivaldi Browser https://vivaldi.com/
We see the commands for installing handlebars using Bower.
In Atom, we write the basic HTML that we need, including a script tag for loading handlebars.min.js
The steps are:
1. compile the template using Handlebars
2. store a reference to the DOM element where we want to insert the rendered template
3. do the insertion by calling the compiled template as if it is a function, and pass in the data that we need to render the HTML.
This simple app outputs “Hello Handlebars”. Not much, but Ryan explains this simple technique is the basis for much bigger things.
In Part Two, we will look at the Building Blocks of Handlebars