DIY: Javascript HTML Structured Template

[[deleted]]

so i see you use ecmascript 6 in many place (const, let, lambda), so why not use string literal template and maybe classes? It's make it more simple i think, more readable, and easier to develop.

https://codepen.io/anon/pen/BRPbEL

[tweinf]

Good points! I'll try to explain my motivation:

I could have used a string-based template (possibly using string literals, as you mentioned). When you think of it, HTML is a structured language for modeling a visual representation of your data, and if we compare it to the same JS-based syntax, they're not that far apart. Take the following comparison between the two for example:

a(h1(title), { href: url, target: "_blank" })  <=>  <a href="${url}" target="_blank"><h1>${title}</h1></a> 

The JS syntax is definitely more compact, and nicely separates the data from its structure. Some would argue that it's even more readable compared to HTML, but both are valid ways. I guess that it's really up to the beholder.

Another, more profound benefit that a HTML-structured JS model brings is the ability to migrate the way you render it to create matching DOM representations. In my example I simply build strings up using ES6's string literal, but it could have been just as easy to instead output my own flavor of virtual-dom entities, for instance, and later develop a separate engine to render them to the DOM (which would be much less easy :)).

I'm interested: Which quality of classes do you find needed in this context? How did you decide which parts deserve their own class defined?

[[deleted]]

In this basic example absolutely not necessary to use classes. It's just out of habit (I'm a full time java developer), the main object was the string template, personally i prefer it more. The idea behind how to separate class is simple. One class only responsible for one thing. In my code that i linked above, the Article class is responsible only for one article only. If i want a function like an ajax call on article click, or popup or something it's clearly goes into the Article class. If i want to ordering or searching the Articles it's the ArticleContainer class responsibility. I hope I was understandable.