Пользователь
0,0
рейтинг
25 марта 2013 в 20:10

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

Заметил, что на Хабре никто не писал про отличный 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
Игорь Лифарь @gasya
карма
3,0
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Разработка

Комментарии (11)

  • +1
    Меня оттолкнул SWIG отсутствием (и нежеланием автора) добавить возможность вызывать функции в шаблонах
    После чего перешел на atpl (тот же синтаксис, но работает вызов функций и автор адекватно реагирует на Feature Request)
    • +3
      Насчет вызова функций — это скорее вопрос идеологии, нежели нежелание автора. В Django решили что незачем верстальщикам давать возможность вызывать функции, я с этим согласен, учитывая наличие удобной системы кастомных фильтров и тегов.

      К тому же atpl не поддерживает работу в браузере, если не ошибаюсь.
  • +1
    Использовал в двух довольно приличных проектах, в таком же примерно окружении (только PhoneGap) не было, очень доволен.
    • 0
      <удалено>
  • 0
    Как-то странно. На сайте проекта много разных сравнений с конкурентными библиотеками которые в явных аутсайдерах, однако про Google Closure забыли.
  • 0
    Меня в свиге неприятно удивил тот момент, что настройка пути к шаблонам одна и та же на весь модуль. Это означает, что в одном инстансе node-процесса нельзя крутить два варианта вёрстки / два вебсайта, они обязаны шарить один и тот же путь к шаблонам. Почему нельзя сделать инстанцируемый движок шаблонов с отдельными настройками для каждой инстанции — для меня загадка.
    • 0
      к сожалению вообще очень много модулей написано в таком стиле
  • +1
    Прочитал как Swing в JavaScript :)
  • 0
    а я underscore пользуюсь
  • 0
    Кроме Swig еще есть 2 реализации Twig.js:
    1. github.com/justjohn/twig.js
    2. github.com/schmittjoh/twig.js

    Вторая интересна тем, что шаблон компилируется в нативный js-код и результат компиляции можно кешировать.
  • 0
    А чем лучше plate?

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.