11 шаблонизаторов для фронтенда

Какой шаблонизатор страниц для своего веб-проекта выбрать из всего этого зоопарка? Обо всем этом в нашем новом материале.

doT.js

Быстрый и лаконичный JavaScript-шаблонизатор для Node.js и браузера.

Пример кода

<div>Hi {{=it.name}}!</div>
<div>{{=it.age || ''}}</div>

Dust.js

Dust.js – JavaScript-шаблонизатор от Linkedin. Он происходит от семейства ctemplate и спроектирован, чтобы работать асинхронно как на сервере, так и в браузере. Главное достоинство Dust в том, что он позволяет сильно сократить объем логики в шаблоне. Вместо типичного вида шаблона:

{@eq key="userExists" value="true"}
  {@eq key="passwordOK" value="true"}
    {@gt key="userLevel" value=3}
      {@eq key="accountActive" value="true"}
        Welcome!
      {/eq}
    {/gt}
  {/eq}
{/eq}

Dust позволяет делать так:

{#userAuthenticated}
  Welcome!
{/userAuthenticated}

dōmo

dōmo позволяет совмещать html-разметку и css в JavaScript-логике и делать это как в браузере, так и на сервере.

Пример кода

<!doctype html>
<script src="domo.js"></script>
<script>
  function opacity(pct) {
    return {opacity: String(pct / 100), filter: "alpha(opacity=" + pct + ")"}
  }

  HTML({lang: "en"},
    HEAD(
      TITLE("Welcome to dōmo"),
      STYLE({type: "text/css"},
        STYLE.on("body", {textAlign: "center", fontSize: 50}),
        STYLE.on("h1", opacity(50), {background: "#000", color: "#fff"})
      )
    ),

    BODY(H1("Welcome to dōmo"))
  )
</script>

HyperScript

Этот шаблонизатор позволяет создавать JavaScript-шаблоны страницы и на сервере, и на клиенте, а также обладает чистым синтаксисом.

Пример кода

var h = require('hyperscript')
h('div#page',
  h('div#header',
    h('h1.classy', 'h', { style: {'background-color': '#22f'} })),
  h('div#menu', { style: {'background-color': '#2f2'} },
    h('ul',
      h('li', 'one'),
      h('li', 'two'),
      h('li', 'three'))),
    h('h2', 'content title',  { style: {'background-color': '#f22'} }),
    h('p',
      "so it's just like a templating engine,\n",
      "but easy to use inline with javascript\n"),
    h('p',
      "the intention is for this to be used to create\n",
      "reusable, interactive html widgets. "))

Marco

Marco – это легковесный и быстрый html-шаблонизатор от eBay. Он работает на Node.js и поддерживает потоковую передачу данных, асинхронный рендеринг и пользовательские теги.

Пример кода

class {
    onCreate() {
        this.state = { count:0 };
    }
    increment() {
        this.state.count++;
    }
}

style {
    .count {
        color:#09c;
        font-size:3em;
    }
    .example-button {
        font-size:1em;
        padding:0.5em;
    }
}

<div.count>
    ${state.count}
</div>
<button.example-button on-click('increment')>
    Click me!
</button>

Простой однофайловый компонент, который срендерит кнопку и счетчик, он будет показывать, сколько раз на кнопке кликнули.

Mustache

Шаблонизатор с малым количеством логики. Работает с огромным количеством языков и фреймворков, вроде Node.js, а также поддерживается многими известными редакторами кода, например Emacs, Atom и Vim.

Пример кода

<h1>{{header}}</h1>
{{#bug}}
{{/bug}}

{{#items}}
  {{#first}}
    <li><strong>{{name}}</strong></li>
  {{/first}}
  {{#link}}
    <li><a href="{{url}}">{{name}}</a></li>
  {{/link}}
{{/items}}

{{#empty}}
  <p>The list is empty.</p>
{{/empty}}

Handlebars.js

Handlebars.js – самое известное расширение Mustache. Оно обратно совместимо с Mustache, и, так же как и родитель, разделяет основную логику и разметку.

Пример кода

var source = "<p>Hello, my name is {{name}}. I am from {{hometown}}. I have " +
             "{{kids.length}} kids:</p>" +
             "<ul>{{#kids}}<li>{{name}} is {{age}}</li>{{/kids}}</ul>";
var template = Handlebars.compile(source);

var data = { "name": "Alan", "hometown": "Somewhere, TX",
             "kids": [{"name": "Jimmy", "age": "12"}, {"name": "Sally", "age": "4"}]};
var result = template(data);

// Срендерится следующее:
// <p>Hello, my name is Alan. I am from Somewhere, TX. I have 2 kids:</p>
// <ul>
//   <li>Jimmy is 12</li>
//   <li>Sally is 4</li>
// </ul>

Nunjucks.js

Наиболее сложный, расширяемый и функциональный из современных JavaScript-шаблонизаторов. Разработан Mozilla, совместим с Node.js.

Пример кода

{% extends "base.html" %}

{% block header %}
<h1>{{ title }}</h1>
{% endblock %}

{% block content %}
<ul>
  {% for name, item in items %}
  <li>{{ name }}: {{ item }}</li>
  {% endfor %}
</ul>
{% endblock %}

Template7

В JavaScript-шаблонизаторе Template7 основное внимание уделяется разработке под мобильные платформы, а его синтаксис напоминает синтаксис Handlebars.

Пример кода

<div class="list-block">
  <ul>
    {{#each items}}
    <li class="item-content">
      <div class="item-inner">
        <div class="item-title">{{title}}</div>
      </div>
    </li>
    {{/each}}
  </ul>
</div>

Haml

Главный принцип шаблонизатора Haml (HTML abstraction markup language) – разметка должна быть красивой.

Пример кода

%section.container
  %h1= post.title
  %h2= post.subtitle
  .content
    = post.content

Pug (ex Jade)

Бывший шаблонизатор Jade, ныне известный как Pug, обладает самым чистым синтаксисом среди перечисленных в этой подборке. Он вдохновлен Haml, но имеет меньшее количество служебных символов, а вложенность в нем регулируется так же как и в Python – отступами.

Пример кода

doctype html
html(lang="en")
  head
    title= pageTitle
    script(type='text/javascript').
      if (foo) bar(1 + 5)
  body
    h1 Pug - node template engine
    #container.col
      if youAreUsingPug
        p You are amazing
      else
        p Get on it!
      p.
        Pug is a terse and simple templating language with a
        strong focus on performance and powerful features.

Другие статьи по теме

Фронтенд и бэкенд: о самом главном

Освоить основы фронтенда за 12 часов: большая видеоподборка

ЛУЧШИЕ СТАТЬИ ПО ТЕМЕ