+201223538180

Web site Developer I Advertising I Social Media Advertising I Content material Creators I Branding Creators I Administration I System SolutionComparing HTML Preprocessor Options | CSS-Tips

Web site Developer I Advertising I Social Media Advertising I Content material Creators I Branding Creators I Administration I System SolutionComparing HTML Preprocessor Options | CSS-Tips

Web site Developer I Advertising I Social Media Advertising I Content material Creators I Branding Creators I Administration I System Answer

Of the languages that browsers converse, I’d wager that the very first one that builders determined wanted some further processing was HTML. Each single CMS on the earth (apart from 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 this time.

The essential wants of HTML processing being:

  • Compose full HTML paperwork from components
  • Template the HTML by injecting variable knowledge

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

This analysis is dropped at you by assist from Frontend Masters, CSS-Tips’ official studying associate.

Want front-end improvement coaching?

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

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

Contemplate PHP. It’s actually a “Hypertext Preprocessor.” On this very web site, I make use of PHP as a way 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 possible accommodates 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 an enormous cause 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 numerous 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 take a look at whether or not or not it helps sure options and the way. When attainable the hyperlink of the preprocessor identify hyperlinks to related docs.

Does it permit for templating?

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

ProcessorInstance
Pug
- var title = "On Canine: Man's Finest Pal";
- 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.identify
Haml
<h1><%= submit.title %></h1>
<div class="subhead"><%= submit.subtitle %></div>
Liquid
Good day {{ person.identify }}!
Go html/template
{{ .Title }}
{{ $handle }}
Handlebars
{{firstname}} {{lastname}}
Mustache
Good day {{ firstname }}!
Twig
{{ foo.bar }}
Nunjucks
<h1>{{ title }}</h1>
Package
<!-- $myVar = We end one another's sandwiches. -->
<p> <!-- $myVar --> </p>
Sergey

Does it do partials/contains?

Are you able to compose HTML from smaller components?

ProcessorInstance
Pug
embrace contains/head.pug
ERB
<%= render 'contains/head' %>
Markdown
PHP
<?php embrace 'head.php'; ?>
<?php include_once 'meta.php'; ?>
Slim⚠️
When you’ve got entry to the Ruby code, it appears to be like 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 "contains/head.html" . }}
Handlebars⚠️
Solely by means of registering a partial forward of time.
Mustache{{> next_more}}
Twig{{ embrace('web page.html', sandboxed = true) }}
Nunjucks{% embrace "lacking.html" ignore lacking %}
{% import "kinds.html" as kinds %}
{{ kinds.label('Username') }}
Package<!-- @import "someFile.equipment" -->
<!-- @import "file.html" -->
Sergey<sergey-import src="https://css-tricks.com/comparing-html-preprocessor-features/header" />

Does it do native variables with contains?

As in, are you able to cross knowledge to the embrace/partial for it to make use of particularly? For instance, in Liquid, you possibly can cross a second parameter of variables for the partial to make use of. However in PHP or Twig, there isn’t any such skill—they will solely entry international variables.

ProcessorInstance
PHP
ERB<%= render(
partial: "card",
locals: {
title: "Title"
}
) %>
Markdown
Pug
Slim
Haml.content material
= render :partial => 'meeting_info', :locals => { :data => @data }
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 subject(identify, worth="", sort="textual content") %}
<div class="subject">
<enter sort="{{ sort }}" identify="{{ identify }}" worth="{ escape }" />
</div>
{% endmacro %}
Package
Sergey

Does it do loops?

Typically you simply want 100 <div>s, ya know? Or extra possible, that you must loop over an array of knowledge and output HTML for every entry. There are many several types of loops, however having not less than one is good and you may typically make it work for no matter that you must loop.

ProcessorInstance
PHPfor ($i = 1; $i <= 10; $i++) {
echo $i;
}
ERB<% for i in 0..9 do %>
<%= @customers[i].identify %>
<% finish %>
Markdown
Pugfor (var x = 1; x < 16; x++)
div= x
Slim- 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 known for philosophically being “logic-less”. So typically it’s fascinating to have a templating language that doesn’t combine in every other performance, forcing you to cope with what you are promoting logic in one other layer. Typically, a little bit logic is simply what you want in a template. And truly, even Mustache has some primary logic.

ProcessorInstance
Pug#person
if person.description
h2.inexperienced Description
else if authorised
h2.blue Description
ERB<% 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 discovered
Hamlif knowledge == true
%p true
else
%p false
Liquid{% if person %}
Good day {{ 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 sort 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 may possibly 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 technique to output content material, however change it on the way in which out. For instance, escape particular characters or capitalize textual content.

ProcessorInstance
Pug⚠️
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:
"whats up James!".upcase #=> "HELLO JAMES!"
Markdown
PHP$str = "Mary Had A Little Lamb";
$str = strtoupper($str);
echo $str; // Prints MARY HAD A LITTLE LAMB
Slim⚠️
Non-public solely?
Haml⚠️
Very particular one for whitespace elimination. Largely for embedding different languages?
Liquid
A number of them, and you should use a number of.
{ prepend: "Good day " }
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 need to 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 change("pressure", "forth") %}
might the pressure be with you
{% endfilter %}
Package
Sergey

Does it have math?

Typically 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 possibly can write JavaScript in Pug, which might do math.

ProcessorAssist
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{ 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 can be full of content material ought to it’s accessible. It’s conceptually just 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 a whole web page. Vue is known for having slots, an idea that made its technique to net elements.

ProcessorInstance
PHP
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 a little bit (an area is an area, however 80 areas can also be… an area), it’s not likely a whitespace dependant language like Pug or Python. Altering these items up is a language alternative. If all of the language does is add in additional syntax, however in any other case, you write HTML as regular HTML, I’m contemplating that not a particular syntax. If the language modifications the way you write regular HTML, that’s particular syntax.

ProcessorInstance
PHP
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 https://css-tricks.com/comparing-html-preprocessor-features/(#link).

- Listing
- Listing

> Quote

Pug
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 infrequently craft full pages. Additionally they can do many/a lot of the options listed right here. Them, and the various different JavaScript-based-frameworks like them, are additionally typically able to working on a server or throughout a construct step and producing HTML, even when it typically seems like an afterthought (however not at all times). Additionally 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 primarily craft the DOM. They’re centered on issues like knowledge retrieval and manipulation, state administration, interactivity, and such. They aren’t actually centered 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 might be accomplished. For instance, mixing Markdown and JSX or mixing Vue templates and Pug.

I didn’t even put native net elements 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 that you must assist?
  • Server or Construct – Does it require an online server working to work? Or can it’s run as soon as throughout a construct course of? Or each?

Superchart

TemplatingConsists ofNative VariablesLoopsLogicFiltersMathSlotsParticular Syntax
PHP
ERB⚠️
Markdown
Pug⚠️
Slim⚠️⚠️
Haml⚠️
Liquid
Go html/template⚠️
Handlebars⚠️
Mustache
Twig
Nunjucks
Package⚠️
Sergey⚠️

Supply hyperlink

Leave a Reply