Comparing HTML Preprocessor Features

Publikováno: 30.9.2021

The post Comparing HTML Preprocessor Features appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

Celý článek

(This is a sponsored post.)

Of the languages that browsers speak, I’d wager that the very first one that developers decided needed some additional processing was HTML. Every single CMS in the world (aside from intentionally headless-only CMSs) is essentially an elaborate HTML processor: they take content and squoosh it together with HTML templates. There are dozens of other dedicated HTML processing languages that exist today.

The main needs of HTML processing being:

Compose complete HTML documents from parts
Template the HTML by injecting variable data

There are plenty of other features they can have, and we’ll get to that, but I think those are the biggies.

This research is brought to you by support from Frontend Masters, CSS-Tricks’ official learning partner.

Need front-end development training?

Frontend Masters is the best place to get it. They have courses on all the most important front-end technologies, from React to CSS, from Vue to D3, and beyond with Node.js and Full Stack.

Diagram showing partials and {{ data }} turning into a complete HTML document.

Consider PHP. It’s literally a “Hypertext Preprocessor.” On this very website, I make use of PHP in order to piece together bits of templated HTML to build the pages and complete content you’re looking at now.

<h2>
  <?php the_title(); // Templating! ?>
</h2>

<?php include("metadata.php"); // Partials! ?>

In the above code, I’ve squooshed some content into an HTML template, which calls another PHP file that likely contains more templated HTML. PHP covers the two biggies for HTML processing and is available with cost-friendly hosting — I’d guess that’s a big reason why PHP-powered websites power a huge chunk of the entire internet.

But PHP certainly isn’t the only HTML preprocessor around, and it requires a server to work. There are many others, some designed specifically to run during a build process before the website is ever requested by users.

Pug

PHP

Go html/template

Let’s go language-by-language and look at whether or not it supports certain features and how. When possible the link of the preprocessor name links to relevant docs.

Does it allow for templating?

Can you mix in data into the final HTML output?

Processor	Example
Pug	✅ `- var title = "On Dogs: Man's Best Friend"; - var author = "enlore"; h1= title p Written with love by #{author}`
ERB	✅ `<%= title %> <%= description %> <%= @logged_in_user.name %>`
Markdown	❌
PHP	✅ `<?php echo $post.title; ?> <?php echo get_post_description($post.id) ?>`Also has HEREDOC syntax.
Slim	✅ `tr td.name = item.name`
Haml	✅ `<h1><%= post.title %></h1> <div class="subhead"><%= post.subtitle %></div>`
Liquid	✅ `Hello {{ user.name }}!`
Go html/template	✅ `{{ .Title }} {{ $address }}`
Handlebars	✅ `{{firstname}} {{lastname}}`
Mustache	✅ `Hello {{ firstname }}!`
Twig	✅ `{{ foo.bar }}`
Nunjucks	✅ `<h1>{{ title }}</h1>`
Kit	✅ `<!-- $myVar = We finish each other's sandwiches. --> <p> <!-- $myVar --> </p>`
Sergey	❌

Does it do partials/includes?

Can you compose HTML from smaller parts?

Processor	Example
Pug	✅ `include includes/head.pug`
ERB	✅ `<%= render 'includes/head' %>`
Markdown	❌
PHP	✅ `<?php include 'head.php'; ?> <?php include_once 'meta.php'; ?>`
Slim	⚠️ If you have access to the Ruby code, it looks like it can do it, but you have to write custom helpers.
Haml	✅ `.content =render 'meeting_info'`
Liquid	✅`{% render head.html %} {% render meta.liquid %}`
Go html/template	✅`{{ partial "includes/head.html" . }}`
Handlebars	⚠️ Only through registering a partial ahead of time.
Mustache	✅`{{> next_more}}`
Twig	✅`{{ include('page.html', sandboxed = true) }}`
Nunjucks	✅`{% include "missing.html" ignore missing %} {% import "forms.html" as forms %} {{ forms.label('Username') }}`
Kit	✅`<!-- @import "someFile.kit" --> <!-- @import "file.html" -->`
Sergey	✅`<sergey-import src="header" />`

Does it do local variables with includes?

As in, can you pass data to the include/partial for it to use specifically? For example, in Liquid, you can pass a second parameter of variables for the partial to use. But in PHP or Twig, there is no such ability—they can only access global variables.

Processor	Example
PHP	❌
ERB	✅`<%= render( partial: "card", locals: { title: "Title" } ) %>`
Markdown	❌
Pug	❌
Slim	❌
Haml	✅`.content = render :partial => 'meeting_info', :locals => { :info => @info }`
Liquid	✅`{% render "name", my_variable: my_variable, my_other_variable: "oranges" %}`
Go html/template	✅`{{ partial "header/site-header.html" . }}`(The period at the end is “variable scoping.”)
Handlebars	✅`{{> myPartial parameter=favoriteNumber }}`
Mustache	❌
Twig	❌
Nunjucks	✅`{% macro field(name, value='', type='text') %} <div class="field"> <input type="{{ type }}" name="{{ name }}" value="{{ value \| escape }}" /> </div> {% endmacro %}`
Kit	❌
Sergey	❌

Does it do loops?

Sometimes you just need 100 <div>s, ya know? Or more likely, you need to loop over an array of data and output HTML for each entry. There are lots of different types of loops, but having at least one is nice and you can generally make it work for whatever you need to loop.

Processor	Example
PHP	✅`for ($i = 1; $i <= 10; $i++) { echo $i; }`
ERB	✅`<% for i in 0..9 do %> <%= @users[i].name %> <% end %>`
Markdown	❌
Pug	✅`for (var x = 1; x < 16; x++) div= x`
Slim	✅`- for i in (1..15) div #{i}`
Haml	✅`(1..16).each do \|i\| %div #{i}`
Liquid	✅`{% for i in (1..5) %} {% endfor %}`
Go html/template	✅`{{ range $i, $sequence := (seq 5) }} {{ $i }}: {{ $sequence } {{ end }}`
Handlebars	✅`{{#each myArray}} <div class="row"></div> {{/each}}`
Mustache	✅`{{#myArray}} {{name}} {{/myArray}}`
Twig	✅`{% for i in 0..10 %} {{ i }} {% endfor %}`
Nunjucks	✅`{% set points = [0, 1, 2, 3, 4] %} {% for x in points %} Point: {{ x }} {% endfor %}`
Kit	❌
Sergey	❌

Does it have logic?

Mustache is famous for philosophically being “logic-less”. So sometimes it’s desirable to have a templating language that doesn’t mix in any other functionality, forcing you to deal with your business logic in another layer. Sometimes, a little logic is just what you need in a template. And actually, even Mustache has some basic logic.

Processor	Example
Pug	✅`#user if user.description h2.green Description else if authorised h2.blue Description`
ERB	✅`<% if show %> <% endif %>`
Markdown	❌
PHP	✅`<?php if (value > 10) { ?> <?php } ?>`
Slim	✅`- unless items.empty?`If you turn on logic less mode: `- article h1 = title -! article p Sorry, article not found`
Haml	✅`if data == true %p true else %p false`
Liquid	✅`{% if user %} Hello {{ user.name }}! {% endif %}`
Go html/template	✅`{{ if isset .Params "title" }} <h4>{{ index .Params "title" }}</h4> {{ end }}`
Handlebars	✅`{{#if author}} {{firstName}} {{lastName}} {{/if}}`
Mustache	✅ It’s kind of ironic that Mustache calls itself “Logic-less templates”, but they do kinda have logic in the form of “inverted sections.” `{{#repo}} {{name}} {{/repo}} {{^repo}} No repos :( {{/repo}}`
Twig	✅`{% if online == false %} Our website is in maintenance mode. {% endif %}`
Nunjucks	✅`{% if hungry %} I am hungry {% elif tired %} I am tired {% else %} I am good! {% endif %}`
Kit	✅ It can output a variable if it exists, which it calls “optionals”: `<dd class='<!-- $myVar? -->'> Page 1 </dd>`
Sergey	❌

Does it have filters?

What I mean by filter here is a way to output content, but change it on the way out. For example, escape special characters or capitalize text.

Processor	Example
Pug	⚠️ Pug thinks of filters as ways to use other languages within Pug, and doesn’t ship with any out of the box.
ERB	✅ Whatever Ruby has, like: `"hello James!".upcase #=> "HELLO JAMES!"`
Markdown	❌
PHP	✅`$str = "Mary Had A Little Lamb"; $str = strtoupper($str); echo $str; // Prints MARY HAD A LITTLE LAMB`
Slim	⚠️ Private only?
Haml	⚠️ Very specific one for whitespace removal. Mostly for embedding other languages?
Liquid	✅ Lots of them, and you can use multiple. `{{ "adam!" \| capitalize \| prepend: "Hello " }}`
Go html/template	⚠️ Has a bunch of functions, many of which are filter-like.
Handlebars	⚠️ Triple-brackets do HTML escaping, but otherwise, you’d have to register your own block helpers.
Mustache	❌
Twig	✅`{% autoescape "html" %} {{ var }} {{ var\|raw }} {# var won't be escaped #} {{ var\|escape }} {# var won't be doubled-escaped #} {% endautoescape %}`
Nunjucks	✅`{% filter replace("force", "forth") %} may the force be with you {% endfilter %}`
Kit	❌
Sergey	❌

Does it have math?

Sometimes math is baked right into the language. Some of these languages are built on top of other languages, and thus use that other language to do the math. Like Pug is written in JavaScript, so you can write JavaScript in Pug, which can do math.

Processor	Support
PHP	✅`<?php echo 1 + 1; ?>`
ERB	✅`<%= 1 + 1 %>`
Markdown	❌
Pug	✅`- const x = 1 + 1 p= x`
Slim	✅`- x = 1 + 1 p= x`
Haml	✅`%p= 1 + 1`
Liquid	✅`{{ 1 \| plus: 1 }}`
Go html/template	✅ `{{add 1 2}}`
Handlebars	❌
Mustache	❌
Twig	✅`{{ 1 + 1 }}`
Nunjucks	✅`{{ 1 + 1 }}`
Kit	❌
Sergey	❌

Does it have slots / blocks?

The concept of a slot is a template that has special areas within it that are filled with content should it be available. It’s conceptually similar to partials, but almost in reverse. Like you could think of a template with partials as the template calling those partials to compose a page, and you almost think of slots like a bit of data calling a template to turn itself into a complete page. Vue is famous for having slots, a concept that made its way to web components.

Processor	Example
PHP	❌
ERB	❌
Markdown	❌
Pug	✅ You can pull it off with “mixins”
Slim	❌
Haml	❌
Liquid	❌
Go html/template	❌
Handlebars	❌
Mustache	❌
Twig	✅`{% block footer %} © Copyright 2011 by you. {% endblock %}`
Nunjucks	✅`{% block item %} The name of the item is: {{ item.name }} {% endblock %}`
Kit	❌
Sergey	✅`<sergey-slot />`

Does it have a special HTML syntax?

HTML has <angle> <brackets> and while whitespace matters a little (a space is a space, but 80 spaces is also… a space), it’s not really a whitespace dependant language like Pug or Python. Changing these things up is a language choice. If all the language does is add in extra syntax, but otherwise, you write HTML as normal HTML, I’m considering that not a special syntax. If the language changes how you write normal HTML, that’s special syntax.

Processor	Example
PHP	❌
ERB	In Ruby, if you want that you generally do Haml.
Markdown	✅ This is pretty much the whole point of Markdown. `# Title Paragraph with [link](#link). - List - List > Quote`
Pug	✅
Slim	✅
Haml	✅
Liquid	❌
Go html/template	❌
Handlebars	❌
Mustache	❌
Twig	❌
Nunjucks	❌
Kit	⚠️ HTML comment directives.
Sergey	⚠️ Some invented HTML tags.

Wait wait — what about stuff like React and Vue?

I’d agree that those technologies are component-based and used to do templating and often craft complete pages. They also can do many/most of the features listed here. Them, and the many other JavaScript-based-frameworks like them, are also generally capable of running on a server or during a build step and producing HTML, even if it sometimes feels like an afterthought (but not always). They also have other features that can be extremely compelling, like scoped/encapsulated styles, which requires cooperation between the HTML and CSS, which is an enticing feature.

I didn’t include them because they are generally intentionally used to essentially craft the DOM. They are focused on things like data retrieval and manipulation, state management, interactivity, and such. They aren’t really focused on just being an HTML processor. If you’re using a JavaScript framework, you probably don’t need a dedicated HTML processor, although it absolutely can be done. For example, mixing Markdown and JSX or mixing Vue templates and Pug.

I didn’t even put native web components on the list here because they are very JavaScript-focused.

Other considerations

Speed — How fast does it process? Do you care?
Language — What was in what is it written in? Is it compatible with the machines you need to support?
Server or Build – Does it require a web server running to work? Or can it be run once during a build process? Or both?

Superchart

	Templating	Includes	Local Variables	Loops	Logic	Filters	Math	Slots	Special Syntax
PHP	✅	✅	❌	✅	✅	✅	✅	❌	❌
ERB	✅	✅	✅	✅	✅	✅	✅	❌	⚠️
Markdown	❌	❌	❌	❌	❌	❌	❌	❌	✅
Pug	✅	✅	❌	✅	✅	⚠️	✅	✅	✅
Slim	✅	⚠️	❌	✅	✅	⚠️	✅	❌	✅
Haml	✅	✅	✅	✅	✅	⚠️	✅	❌	✅
Liquid	✅	✅	✅	✅	✅	✅	✅	❌	❌
Go html/template	✅	✅	✅	✅	✅	⚠️	✅	❌	❌
Handlebars	✅	⚠️	✅	✅	✅	❌	❌	❌	❌
Mustache	✅	✅	❌	✅	✅	❌	❌	❌	❌
Twig	✅	✅	❌	✅	✅	✅	✅	✅	❌
Nunjucks	✅	✅	✅	✅	✅	✅	✅	✅	❌
Kit	✅	✅	❌	❌	✅	❌	❌	❌	⚠️
Sergey	❌	✅	❌	❌	❌	❌	❌	✅	⚠️

The post Comparing HTML Preprocessor Features appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.