Imagine we have an autocomplete input on our website, which, when the user types something in, we take that value, send it off to our backend server and then display the results from the server on the page.
Which might look something like this:
A fairly simple piece of functionality. We receive an array from our server in the
success function and we then use a
for loop on the array and build up a string of HTML inside the
append function which puts it into the DOM, with the value concatenated into the middle. Now this example, although small and rudimentary, can hopefully illustrate that if we develop more complex features, this might turn into spaghetti code.
So before we move on to how templating might aid us here, it might be worth looking at what, potentially, might trip us up or slow us down in the future.
For today’s post, I’m going to be using the Handlebars templating engine in all the examples, to keep it simple. Handlebars happens to be one of the most widely used and praised choices out there for templating, so we’re in good hands.
Lets start by illustrating how Handlebars works (which is similar to the rest), then we’ll build up to a more realistic development workflow using Handlebars.
type attribute to something other than
results array from our server, and then outputting an
<li> for each, and then saying we want the
item property from each object in the
The code for this is as follows:
That should serve as a basic intro to templating, however, if you’d like to see more of what you can do with Handlebars, including registering your own functions (like the
#each you saw above), then head on over to the docs and have a go with some more of the advanced uses and features of Handlebars.
Hold on to your butts
So I said at the start, that it would be excellent if we could house our HTML in separate files, and work on them without having to put them in script tags. But how? Well, we’re going to use our knowledge of dependency management and Handlebars pre-compilation.
Handlebars pre-compilation means that you don’t have to compile the template in the browser, it’s actually sent to the browser already compiled and ready to go, which improves the performance, which is always nice.
In terminal, within your new project directory, create an
main.js and a
gulpfile.js. Into the gulpfile, paste the below:
Once you’ve done that, type into terminal
npm install gulp -g, when that’s finished, type in
npm install gulp handlebars hbsfy jquery. This will tell npm (Node.js’ own package manager) to install gulp on your system and the rest into your project directory. We’ll come back to that gulp file in a second.
Next I’d like you to create a sub-directory called
templates and create a file inside called
sample.html. Fill it with this content:
<p>I'm from the template!</p>
and into the
index.html file, place the content below:
Now, in your
main.js place this content:
and then open up terminal and type in
gulp. Now all being well, you should be able to visit the
index.html page in a web browser and see the contents of your
sample.html file on the page.
Now, to run through everything we’ve just done. First off, we used Gulp, which as I mentioned, we won’t delve too much into now, but it’s a build system. You tell it tasks to perform, and it performs them. We defined a
scripts task in our
gulpfile.js above and told Gulp to run that task, whenever we run
main.js and then we tell it to “transform” our file as it’s being processed. In our case, as we’re using Handlebars, what this will do is scan our
main.js and find the
require function which points to a
.html file (our template!) and says, “when you find one of these, please pre-compile it with Handlebars”. Then Browserify continues as normal and outputs a new file:
built.js. This new file will contain all the HTML content from our
.html template, ready for when we run this line:
So by now, you’re armed with a basic understanding of how templating works, and it’s advantages. You know how to use Handlebars, and you can now develop using separate