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

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

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

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

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

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> 

Страница проекта
Документация
Проект на Github