HTML Preprocessor

Introduction

A preprocessor is a program that converts one data input form into another input data form. In the case of HTML and CSS, Haml and Sass are among the more popular preprocessor languages.

Popular HTML Preprocessors

Here are some of the most used HTML preprocessors: -

• Pug
• Haml
• Slim
• Handlebars
• Nunjucks

Let's discuss them in detail.

Pug

Pug (previously called Jade) is a preprocessor that simplifies the challenge of writing long HTML codes. It additionally provides a ton of functionality, which includes JavaScript objects, conditionals, loops, mixins, and templates.

Example: Let's look at the Syntax of Pug, which is not that different from HTML. It doesn't have opening and closing tags as well as it uses indentation for nesting HTML tags.

Output:

The example shows that the syntax is arguably a load purifier to examine. It could be an actual time-saver while running with quite a few variations in HTML (particularly frameworks that include Bootstrap, Foundation, etc.).

Advantage:

• Clean Syntax - One of the distinguishing capabilities of Jade is its smooth syntax. Elements are created with CSS selector syntax, which makes the template constant together along with your fashion sheet and JavaScript detail selector library.
• Reusability - you can reuse Jade templates in Scala, PHP, Ruby, Python, JavaScript, and Java.

Disadvantage:

• The structure is decided through the indentation. That way, the indentation errors will destroy the result; frequently, it isn't easy to discover the error. Indentation errors are easily added through copy-pasting, by rearranging code, and through working in a group where every person doesn't use the identical indentation style. (E.g tabs vs. spaces.)

Haml

Haml, called HTML abstraction markup language, is a markup language with the single purpose of providing the capacity to write down beautiful markup. Serving as its very own markup language, code written in Haml is later processed to HTML.

Haml promotes DRY(Don't Repeat yourself, i.e., removing all the unnecessary repetition of code) and properly structured markup, supplying a pleasant experience for anybody having to write down or read it.

Let's understand a basic HAML code for the header:

In the following example, we will create a heading using HAML and also write the same code in HTML.

Now let's understand it with the HTML code and compare the difference.

Output:

From the above example, we can see that the readability of code is easy and the length of code in HAML is reduced syntactically than in HTML.

Advantage:

It is easy to learn as lots of resources are available online.

Disadvantage:

Haml makes use of indentation to outline structure instead of closing tags. Though this, in maximum cases, makes code extra efficient to write, it can sometimes cause problems. Bringing changes to one area can cause an error or alter the structure of the code. The rendering time with Haml is slower than its competitors.

Slim

Slim is a template language whose purpose is to lessen the view syntax to the critical components without turning it into cryptic. It commenced as an exercise to peer how a lot can be eliminated from a standard HTML template (<, >, remaining tags, etc...).

Here is the syntax of how Slim works.

From the above example, we can see that there are no opening or closing tags used.

Advantage:

• The Slim syntax doesn't require many unique symbols, making it tough to read. Instead, it's very easy and readable syntax even for humans who haven't worked on it before.
• Slim's documentation is properly prepared and detailed, each idea is very well defined, and it's highly beneficial for each customer, even for those who are beginners.
• Slim is minimal, and that may be an issue in case you need to begin from there. It can be smoothly extended or even help famous programs which are used in Laravel (like IlluminateDatabase (eloquent)).
• Allows to quickly create the code, available for a mess around or trying out. Especially useful if you don't have an auto-complete or auto-close plugin.

Disadvantage:

Slim's use of indentation in its syntax and the reality that it would not use any HTML tags could make it appear a bit odd to designers, who are no longer used to this type of syntax.

Handlebars

Handlebars offer the power essential to allow you to construct semantic templates efficaciously without frustration.

Handlebars generally look like as shown in the following syntax:

We use{{where some content is added in between}}.

Let's add name and age in these double curly brackets. The following defines two handlebar expressions: name and age.

Handlebars are largely suited for Mustache templates. In maximum cases, it's far viable to change out Mustache with Handlebars and maintain the use of your new templates.

Advantage:

• By layout logic-less templates pressure you to split worries, consequently assisting you to keep away from destiny issues with refactoring. It additionally permits templates for use with more than one programming language without changes.
• Handlebars is to be had as a JavaScript library, a Django module in addition to Java, Ruby, Scala & PHP libraries. This means that you could use it for frontend and backend templates in the language of your choice.

Disadvantage:

Handlebars don't seem to have many text editors that support things like auto-complete, syntax highlighting, or error checking for it.

Nunjucks

Another {{token-based system}} with all the logic, looping, and variable manipulation that different engines provide. But similarly, it helps a few extra superior web page composition factors, e.g. block inheritance, includes, format inheritance, custom tags, and macros — all genuinely best for a CMS( Content Management System) in which pages are normally composed of a chain of “building blocks”.

Here is the template for Nunjunks.

From the above template, we see that nunjunks have both opening and closing tags that are block and end blocks.

Advantage:

• Async support
• Extensive format inheritance
• Macros support
• Plain vintage college includes
• Filters support
• White area control
• Operating on undeniable HTML, no large white area
• Could be used for matters aside from HTML, e.g., config files, JSON.
• Custom tags support

Disadvantage:

No streaming support

Comparing HTML Preprocessor Features

Let's check what features these HTML preprocessors support.

• ✅ - Support
• ❌ - Doesn't Support.
• ⚠️ - It supports but have certain issues.

Pros and Cons of using HTML preprocessors

Let's understand the advantages and disadvantages of using preprocessors.

Advantages:

• Makes our code looks cleaner and makes them easy for the programmer to read and understand the code.
• The code is well indented, which improves the appearance of the code.
• Preprocessors generally use DRY, i.e., Don't Repeat Yourself, where the code is not repeated again and again.

Disadvantages:

• There are very few text editors that support preprocessors. So, it is not used prominently.
• Indentation destroys the results due to errors. These errors generally occur due to copy-pasting the code.