Swig — JavaScript шаблонизатор с Django Template синтаксисом

Заметил, что на Хабре никто не писал про отличный JavaScript шаблонизатор Swig ^[1].

JavaScript в поледнее время становится все более популярным и находит новые неожиданные сферы применения. Вот и меня не обошел этот тренд, так что при just-for-fun разработке одного проекта я не удержался и решил попробовать использовать JS одновременно на сервере (Node.JS), веб-клиенте (Backbone.js — все серьезно :) ) и в мобильном приложении (PhoneGap). Следующим шагом для меня стал выбор шаблонизатора, причем поддержка как node, так и браузера была обязательным критерием. До этого я имел дело в основном в Django Template Language, так что выбор пал на Swig.

Особенности Swig:

• Django Template подобный синтаксис
• Крайне высокая скорость работы (бенчмарки ^[2])
• Поддержка node.js и основных браузеров
• Совместимость с Express ^[3]
• Открытый исходный код

Node quickstart

Установка

npm install swig

Создание шаблона

<h1>{{ pagename|title }}</h1>
<ul>
  {% for author in authors %}
    <li{% if loop.first%} class="first"{% endif %}>
      {{ author }}
    </li>
  {% else %}
    <li>There are no authors.</li>
  {% endfor %}
</ul>

Рендеринг

var template  = require('swig');
var tmpl = template.compileFile('/path/to/template.html');
tmpl.render({
    pagename: 'awesome people',
    authors: ['Paul', 'Jim', 'Jane']
});

Результат

<h1>Awesome People</h1>
<ul>
  <li class="first">Paul</li>
  <li>Jim</li>
  <li>Jane</li>
</ul>

В браузере

Использование в Swig в браузере принципиально не отличается от использования в node, за исключением двух моментов:

• Вместо swig.compileFile необходимо всегда использовать swig.compile
• Для корректного использования extends, import и include следует указывать templateKey:

  swig.compile(templateString, { filename: templateKey });
  

Подключаем

<script type='text/javascript" src="//path/to/swig/swig.js">

Подготавливаем шаблон

var template = swig.compile('<p>{% block content %}{% endblock %}</p>', { filename: 'main' });
var mypage = swig.compile('{% extends "main" %}{% block content %}Oh hey there!{% endblock %}', { filename: 'mypage' });

Рендерим

console.log(mypage.render({}));

И получаем

<p>Oh hey there!</p>

Страница проекта ^[1]
Документация ^[4]
Проект на Github ^[5]

Автор: gasya

Источник ^[6]