Welcome to this review of the Pluralsight course JavaScript Templating with Handlebars by Ryan Lewis.

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

Ryan says the infrastructure needed to render a template in JavaScript can be very cumbersome.

Handlebars fully complies with the Mustache specification, but approaches it with an understanding of the JavaScript development lifecycle.

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.
They enable us to add functionality by registering our own JavaScript functions that run in the context of our templates. The third module in this course will be all about Helpers.

Another feature that Ryan describes as powerful is Nested Paths for simplifying tags.

What It’s All About

Handlebars is a JavaScript library used to take templates (strings) and populate them with data.

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

Installing Bower

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.

Hello Handlebars

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 only thing we have in the body is a div with the id “app”, and a script block containing JavaScript to compile our Hello Handlebars template.

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