ES6 templates, empty HTML vs creating tags in a template

ES6 templates, empty HTML vs creating tags in a template
0

#1

When doing projects, specially using APIs, I find myself sometimes creating empty HTML where I know I will add later my API requests results. Now ES6 gives us the possibility to create big chunks of HTML easily so I find myself not knowing which is the best approach now. Imagine the API returns a header, a paragraph and an image, should I create those tags in html, give them a class or an id and leave them there empty to later append the API results? Or should I simply create a template and append all that to a parent element?

Thanks for any feedback.


#2

I always recommend handlebars for templating. There is no benefit to writing your HTML out in JavaScript, so creating templates that you compile with handlebars is a great solution. I’ve got a simple example with your usecase here:


#4

I’ve heard about that, I’m actually doing a test for a job position, I have to use the Github API to create a simple API to search for users: I got that working and I have to deliver it Monday with Unit testing which I know nothing about and I’m currently studying that on full speed : ) , I can’t really get myself to learn how to use handlebars right now but I appreciate the feedback, I’ll check it in the future.

basically to display a list of the user repos I’m doing:

   const li = document.createElement("LI");

   li.innerHTML = `<h3> ${responseObj[i].name} </h3> <span> <i class='fa fa-star' aria-hidden='true'></i> ${responseObj[i].stargazers_count} <i class='fa fa-code-fork' aria-hidden='true'> </i> ${responseObj[i].forks_count} </span> `;

   list.appendChild(li);

Is that horrible? (I have to say I like to use templates like this, but I don’t know if it’s frowned upon).


#5

No, template strings are just fine, especially for something as simple as an interview question. I actually got this same sort of question in a recent interview. I did just what you’re doing and got the job.


#6

Ah well it’s a project I have to deliver actually : ) But good to know, thanks again.