4 Templating Systems to Write Quicker, Cleaner HTML

Alternatives to vanilla HTML

Image for post

HTML is the first language that many developers learn. While learners of CSS and JavaScript soon encounter tools to augment these languages — such as Sass (for CSS) or Babel (for JavaScript) — the same is rarely true of HTML.

So, in this article, we’ll explore four of the most popular templating engines for HTML. We’ll look into why you might choose to use them, and where you’re likely to encounter them in other tech-stacks.

We have HTML in other languages

There are several technology-specific solutions to writing HTML.

  • React.js has JSX,
  • Ruby has eRuby (or ERB),
  • PHP has, well, “HTML in PHP”.
  • Java has JSP (JavaServer Pages), and
  • ASP.NET uses so-called Razor syntax to demarcate HTML code.

and the list goes on.

These solutions solve many of the limitations of vanilla HTML, mainly by allowing the possibility of loops, conditionals, and other programming-language features.

The problem with vanilla HTML

HTML stands for Hypertext Markup Language, and as a markup language, it does not have the functionality of a typical programming language. Markup languages are designed to be easy-to-read by humans as well as machines, and they typically use tags to define elements within a document.

But what makes HTML easy-to-read is also one of its limitations:

  • Any interactive elements, such as the onclick event, must be defined in the language in advance; in vanilla HTML, new events cannot be added by users.
  • It is not simple to add dynamic data into vanilla HTML.
  • If you want to generate repeated elements, there are no in-built shortcuts in the form of loops (for, while and so on). Nor is there an in-built method for handling conditionals (if … else or switch statements).
  • Vanilla HTML doesn’t allow users to define new, re-usable tag types.
  • Lastly, even though HTML is simple to read, it could be faster to write. Opening and closing tags can be a pain to type again and again, and parts of HTML may seem verbose, e.g. <button type="button" /> .

No templating system or HTML-like syntax solves all of these issues — in part because there’s no need for HTML to become a complete programming language. But these systems do intend to make writing HTML faster and more capable!

2. HAML

Underlying Language: Ruby

HAML stands for HTML Abstraction Markup Language. Like Pug, it uses indentations to define nested elements. It was developed as an alternative to Ruby’s ERB, but it can also be used in place of PHP, ASP, and — of course — vanilla HTML.

The main difference between HAML and Pug.js is that programming in HAML is done via Ruby. So, if you’re using JavaScript-based tech stack, Pug may be the safer choice.

In order to loop through items in HAML, we’d need to borrow from Ruby syntax, like so:

- (1..10).each do |i|
%div #{i}

This prints the numbers 1 to 10, each in a separate div.

Or, to demonstrate a simple conditional, we could use the following. Notice that all the logic is preceded by a dash - .

- isSunny = false
- if isSunny
%p Let's go outside!
- else
%p I'd rather stay inside.

Other alternatives being

1. Pug (a.k.a Jade)

Underlying Language: JavaScript

2. HAML

Underlying Language: Ruby

3. Slim

Underlying Language: Ruby

4. Markdown

Experience with Front-end Technologies and MERN / MEAN Stack. Working on all Major UI Frameworks like React, Angular.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store