Evaluating HTML Preprocessor Options

No Comments

(This can be a sponsored submit.)

Of the languages that browsers converse, I’d wager that the very first one that builders determined wanted some extra processing was HTML. Each single CMS on this planet (other than deliberately headless-only CMSs) is basically an elaborate HTML processor: they take content material and squoosh it along with HTML templates. There are dozens of different devoted HTML processing languages that exist at present.

The major wants of HTML processing being:

Compose full HTML paperwork from partsTemplate the HTML by injecting variable information

There are many different options they’ll have, and we’ll get to that, however I believe these are the biggies.

This analysis is delivered to you by help from Frontend Masters, CSS-Methods’ official studying associate.

Want front-end growth coaching?

Frontend Masters is the perfect place to get it. They’ve programs on all a very powerful front-end applied sciences, from React to CSS, from Vue to D3, and past with Node.js and Full Stack.

Contemplate PHP. It’s actually a “Hypertext Preprocessor.” On this very web site, I make use of PHP to be able to piece collectively bits of templated HTML to construct the pages and full content material you’re now.

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

<?php embrace(“metadata.php”); // Partials! ?>

Within the above code, I’ve squooshed some content material into an HTML template, which calls one other PHP file that seemingly comprises extra templated HTML. PHP covers the 2 biggies for HTML processing and is on the market with cost-friendly internet hosting — I’d guess that’s a giant purpose why PHP-powered web sites energy an enormous chunk of your entire web.

However PHP definitely isn’t the one HTML preprocessor round, and it requires a server to work. There are various others, some designed particularly to run throughout a construct course of earlier than the web site is ever requested by customers.

Let’s go language-by-language and have a look at whether or not or not it helps sure options and the way. When potential the hyperlink of the preprocessor identify hyperlinks to related docs.

Does it enable for templating?

Are you able to combine in information into the ultimate HTML output?

ProcessorExamplePug
– var title = “On Canine: Man’s Greatest Buddy”;
– var creator = “enlore”;
h1= title
p Written with love by #{creator}ERB
<%= title %>
<%= description %>

<%= @logged_in_user.identify %>Markdown❌PHP
<?php echo $submit.title; ?>
<?php echo get_post_description($submit.id) ?>Additionally has HEREDOC syntax.Slim
tr
td.identify = merchandise.identifyHaml
<h1><%= submit.title %></h1>
<div class=”subhead”><%= submit.subtitle %></div>Liquid
Hey {{ person.identify }}!Go html/template
{{ .Title }}
{{ $tackle }}Handlebars
{{firstname}} {{lastname}}Mustache
Hey {{ firstname }}!Twig
{{ foo.bar }}Nunjucks
<h1>{{ title }}</h1>Package
<!– $myVar = We end one another’s sandwiches. –>
<p> <!– $myVar –> </p>Sergey

Does it do partials/consists of?

Are you able to compose HTML from smaller elements?

ProcessorExamplePug
embrace consists of/head.pugERB
<%= render ‘consists of/head’ %>Markdown❌PHP
<?php embrace ‘head.php’; ?>
<?php include_once ‘meta.php’; ?>Slim⚠️
If in case you have entry to the Ruby code, it appears prefer it can do it, however you need to write customized helpers.Haml✅
.content material
=render ‘meeting_info’Liquid✅{% render head.html %}
{% render meta.liquid %}Go html/template✅{{ partial “consists of/head.html” . }}Handlebars⚠️
Solely by way of registering a partial forward of time.Mustache✅{{> next_more}}Twig✅{{ embrace(‘web page.html’, sandboxed = true) }}Nunjucks✅{% embrace “lacking.html” ignore lacking %}
{% import “varieties.html” as varieties %}
{{ varieties.label(‘Username’) }}Package✅<!– @import “someFile.equipment” –>
<!– @import “file.html” –>Sergey✅<sergey-import src=”header” />

Does it do native variables with consists of?

As in, are you able to move information to the embrace/partial for it to make use of particularly? For instance, in Liquid, you may move a second parameter of variables for the partial to make use of. However in PHP or Twig, there isn’t a such capacity—they’ll solely entry international variables.

ProcessorExamplePHP❌ERB✅<%= render(
partial: “card”,
locals: {
title: “Title”
}
) %>Markdown❌Pug❌Slim❌Haml✅.content material
= render :partial => ‘meeting_info’, :locals => { :information => @information }Liquid✅{% render “identify”, my_variable: my_variable, my_other_variable: “oranges” %}Go html/template✅{{ partial “header/site-header.html” . }}
(The interval on the finish is “variable scoping.”)Handlebars✅{{> myPartial parameter=favoriteNumber }}Mustache❌Twig❌Nunjucks✅{% macro area(identify, worth=”, kind=’textual content’) %}
<div class=”area”>
<enter kind=”{{ kind }}” identify=”{{ identify }}” worth=”{ escape }” />
</div>
{% endmacro %}Package❌Sergey❌

Does it do loops?

Generally you simply want 100 <div>s, ya know? Or extra seemingly, you’ll want to loop over an array of knowledge and output HTML for every entry. There are many several types of loops, however having a minimum of one is sweet and you’ll typically make it work for no matter you’ll want to loop.

ProcessorExamplePHP✅for ($i = 1; $i <= 10; $i++) {
echo $i;
}ERB✅<% for i in 0..9 do %>
<%= @customers[i].identify %>
<% finish %>Markdown❌Pug✅for (var x = 1; x < 16; x++)
div= xSlim✅- for i in (1..15)
div #{i}Haml✅(1..16).every do |i|
%div #{i}Liquid✅{% for i in (1..5) %}
{% endfor %}Go html/template✅{{ vary $i, $sequence := (seq 5) }}
{{ $i }}: {{ $sequence }
{{ finish }}Handlebars✅{{#every myArray}}
<div class=”row”></div>
{{/every}}Mustache✅{{#myArray}}
{{identify}}
{{/myArray}}Twig✅{% for i in 0..10 %}
{{ i }}
{% endfor %}Nunjucks✅{% set factors = [0, 1, 2, 3, 4] %}
{% for x in factors %}
Level: {{ x }}
{% endfor %}Package❌Sergey❌

Does it have logic?

Mustache is legendary for philosophically being “logic-less”. So generally it’s fascinating to have a templating language that doesn’t combine in some other performance, forcing you to cope with your enterprise logic in one other layer. Generally, somewhat logic is simply what you want in a template. And really, even Mustache has some fundamental logic.

ProcessorExamplePug✅#person
if person.description
h2.inexperienced Description
else if authorised
h2.blue DescriptionERB✅<% if present %>
<% endif %>Markdown❌PHP✅<?php if (worth > 10) { ?>
<?php } ?>Slim✅- except objects.empty?If you happen to activate logic much less mode:
– article
h1 = title
-! article
p Sorry, article not foundHaml✅if information == true
%p true
else
%p falseLiquid✅{% if person %}
Hey {{ person.identify }}!
{% endif %}Go html/template✅{{ if isset .Params “title” }}
<h4>{{ index .Params “title” }}</h4>
{{ finish }}Handlebars✅{{#if creator}}
{{firstName}} {{lastName}}
{{/if}}Mustache
It’s form of ironic that Mustache calls itself “Logic-less templates”, however they do kinda have logic within the type of “inverted sections.”
{{#repo}}
{{identify}}
{{/repo}}
{{^repo}}
No repos 🙁
{{/repo}}Twig✅{% if on-line == false %}
Our web site is in upkeep mode.
{% endif %}Nunjucks✅{% if hungry %}
I’m hungry
{% elif drained %}
I’m drained
{% else %}
I’m good!
{% endif %}Package
It might output a variable if it exists, which it calls “optionals”:
<dd class='<!– $myVar? –>’> Web page 1 </dd>Sergey❌

Does it have filters?

What I imply by filter here’s a strategy to output content material, however change it on the way in which out. For instance, escape particular characters or capitalize textual content.

ProcessorExamplePug⚠️
Pug thinks of filters as methods to make use of different languages inside Pug, and doesn’t ship with any out of the field. ERB✅
No matter Ruby has, like:
“hi there James!”.upcase #=> “HELLO JAMES!”Markdown❌PHP✅$str = “Mary Had A Little Lamb”;
$str = strtoupper($str);
echo $str; // Prints MARY HAD A LITTLE LAMBSlim⚠️
Personal solely?Haml⚠️
Very particular one for whitespace elimination. Principally for embedding different languages?Liquid
Numerous them, and you should use a number of.
{ capitalize }Go html/template⚠️
Has a bunch of capabilities, lots of that are filter-like.Handlebars⚠️
Triple-brackets do HTML escaping, however in any other case, you’d must register your individual block helpers.Mustache❌Twig✅{% autoescape “html” %}
{{ var }}
{uncooked } {# var will not be escaped #}
{escape } {# var will not be doubled-escaped #}
{% endautoescape %}Nunjucks✅{% filter exchange(“drive”, “forth”) %}
might the drive be with you
{% endfilter %}Package❌Sergey❌

Does it have math?

Generally math is baked proper into the language. A few of these languages are constructed on high of different languages, and thus use that different language to do the mathematics. Like Pug is written in JavaScript, so you may write JavaScript in Pug, which may do math.

ProcessorSupportPHP✅<?php echo 1 + 1; ?>ERB✅<%= 1 + 1 %>Markdown❌Pug✅- const x = 1 + 1
p= xSlim✅- x = 1 + 1
p= xHaml✅%p= 1 + 1Liquid✅{ plus: 1 }Go html/template
{{add 1 2}}Handlebars❌Mustache❌Twig✅{{ 1 + 1 }}Nunjucks✅{{ 1 + 1 }}Package❌Sergey❌

Does it have slots / blocks?

The idea of a slot is a template that has particular areas inside it which might be crammed with content material ought to or not it’s out there. It’s conceptually much like partials, however nearly in reverse. Like you would consider a template with partials because the template calling these partials to compose a web page, and also you nearly consider slots like a bit of knowledge calling a template to show itself into an entire web page. Vue is legendary for having slots, an idea that made its strategy to internet parts.

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

Does it have a particular HTML syntax?

HTML has <angle> <brackets> and whereas whitespace issues somewhat (an area is an area, however 80 areas can be… an area), it’s probably not a whitespace dependant language like Pug or Python. Altering this stuff up is a language selection. If all of the language does is add in further syntax, however in any other case, you write HTML as regular HTML, I’m contemplating that not a particular syntax. If the language adjustments the way you write regular HTML, that’s particular syntax.

ProcessorExamplePHP❌ERBIn Ruby, if you’d like that you just typically do Haml.Markdown✅
That is just about the entire level of Markdown.
# Title
Paragraph with [link](#hyperlink).

– Listing
– Listing

> QuotePug✅Slim✅Haml✅Liquid❌Go html/template❌Handlebars❌Mustache❌Twig❌Nunjucks❌Package⚠️
HTML remark directives.Sergey⚠️
Some invented HTML tags.

Wait wait — what about stuff like React and Vue?

I’d agree that these applied sciences are component-based and used to do templating and sometimes craft full pages. In addition they can do many/many of the options listed right here. Them, and the various different JavaScript-based-frameworks like them, are additionally typically able to operating on a server or throughout a construct step and producing HTML, even when it generally looks like an afterthought (however not all the time). In addition they produce other options that may be extraordinarily compelling, like scoped/encapsulated types, which requires cooperation between the HTML and CSS, which is an attractive characteristic.

I didn’t embrace them as a result of they’re typically deliberately used to basically craft the DOM. They’re targeted on issues like information retrieval and manipulation, state administration, interactivity, and such. They aren’t actually targeted on simply being an HTML processor. If you happen to’re utilizing a JavaScript framework, you in all probability don’t want a devoted HTML processor, though it completely could be finished. For instance, mixing Markdown and JSX or mixing Vue templates and Pug.

I didn’t even put native internet parts on the record right here as a result of they’re very JavaScript-focused.

Different issues

PaceHow briskly does it course of? Do you care? Language — What was in what’s it written in? Is it appropriate with the machines you’ll want to help?Server or Construct – Does it require an internet server operating to work? Or can or not it’s run as soon as throughout a construct course of? Or each?

Superchart

TemplatingIncludesLocal VariablesLoopsLogicFiltersMathSlotsSpecial SyntaxPHP✅✅❌✅✅✅✅❌❌ERB✅✅✅✅✅✅✅❌⚠️Markdown❌❌❌❌❌❌❌❌✅Pug✅✅❌✅✅⚠️✅✅✅Slim✅⚠️❌✅✅⚠️✅❌✅Haml✅✅✅✅✅⚠️✅❌✅Liquid✅✅✅✅✅✅✅❌❌Go html/template✅✅✅✅✅⚠️✅❌❌Handlebars✅⚠️✅✅✅❌❌❌❌Mustache✅✅❌✅✅❌❌❌❌Twig✅✅❌✅✅✅✅✅❌Nunjucks✅✅✅✅✅✅✅✅❌Package✅✅❌❌✅❌❌❌⚠️Sergey❌✅❌❌❌❌❌✅⚠️

The submit Evaluating HTML Preprocessor Options appeared first on CSS-Methods. You possibly can help CSS-Methods by being an MVP Supporter.

    About Marketing Solution Australia

    We are a digital marketing company with a focus on helping our customers achieve great results across several key areas.

    Request a free quote

    We offer professional SEO services that help websites increase their organic search score drastically in order to compete for the highest rankings even when it comes to highly competitive keywords.

    Subscribe to our newsletter!

    More from our blog

    See all posts

    Leave a Comment