Written by Parvin.

In this article, I will talk about which templating engine we use, why we chose it and how we use it.

For our project, we decided to use Handlebars as our main templating engine. Now you might be asking yourself "what is a templating engine?', well let me explain. A template engine enables you to use static files inside of your API. With a template engine, you can use all different sorts of values directly from your Javascript. Also, you can for example create one footer and easily put it at the bottom of every page by just typing one line in your HTML. This helps you easily create realistic and nice websites.

Handlebars is a templating engine like any other, but it's popular because the code you write inside of your HTML looks a lot like the Javascript you write in your index.js.

We chose Handlebars because, as talked about in the previous part, it looks a lot like JavaScript. Nathan had been using EJS, another templating engine, so we needed to discuss which one we wanted to use. Nathan was alright with both choices, Parvin liked Handlebars and Romy didn't yet research which one she liked best. We discussed this and we got to the conclusion that Romy could do her research and she would deside for our group. After she did some research she decited to use Handlebars. Ejs's documentation is pretty scarce; it consists of one webpage with basic instructions and code examples. The documentation of Handlebars is much more extensive and the engine also gets updated more frequently. Because Parvin already used Handlebars, Nathan is our pro developer who doesn't mind using Handlebars and Romy had the least experience, the most obvious choice was Handlebars.

We use handlebars to push live data to the static HTML. This looks like this in our code:

 <h1>{{ info.name }}, your choices are:</h1>
    <h3>1: {{ info.movieChoice1 }}</h3>
    <img class="poster" src="{{ movie.Poster }}" alt=" Movie Poster of {{ info.movieChoice1 }}">
    <p>Year: {{ movie.Year }}</p>
    <p>Decription: {{ movie.Plot }}</p>
    <p>IMDB Rating: {{ movie.Ratings.0.Value }}</p>
    <h3>2: {{ info.movieChoice2 }} </h3>
    <img class="poster" src="{{ movie1.Poster }}" alt=" Movie Poster of {{ info.movieChoice2 }}">
    <p>Year: {{ movie1.Year }}</p>
    <p>Decription: {{ movie1.Plot }}</p>
    <p>IMDB Rating: {{ movie1.Ratings.0.Value }}</p>
 

Above you see a part of the code of our project. The code within {{ these handlebars ;) }} is the code where you use the templating engine. The code inside these Handlebars is the code which comes directly from the server.js. This is a very nice way to get the Javascript variables inside of the HTML.

Handlebars. (z.d.). Geraadpleegd op 20 juni 2020, van https://handlebarsjs.com

Using template engines with Express. (z.d.). Geraadpleegd op 20 juni 2020, van https://expressjs.com/en/guide/using-template-engines.html