Pull to refresh

Велосипедим, или Django-like Javascript Templates

Reading time1 min
Views4.1K
Одним из компонентов нашего проекта Shopium.ua является административный интерфейс, который строится как полностью выполняющийся на клиенте rich internet application.

Для отрисовки данных приходящих с сервера в HTML нам часто нужен Javascript-шаблонизатор.

Различных шаблонизаторов для Javascript существует предостаточно. Даже в библиотеке ExtJS которую мы используем для своего проекта их целых два, однако их синтаксис и возможности каждого далеки от идеала.

К хорошему быстро привыкаешь, и мы быстро привыкли к синтаксису шаблонов Jinja2 который мы используем для генерации HTML на стороне сервера. И захотели такой же, но с перламутровыми пуговицамино для Javascript.

И сформировали к нему такие требования:
  1. Django/Jinja-подобный синтаксис
  2. компиляция шаблона в JS код (как в Closure Templates)
  3. автоэкранирование HTML
  4. простота (разработки, использования, внедрения)

Обыскав интернет и не найдя ничего похожего, мы воскликнули «Да разработчики мы или нет, в конце концов!», и написали свой.

Шаблонизатор состоит из одного исполняемого файла. Алгоритм работы очень прост:
  1. С помощью pyparsing разбираем исходный код шаблона, и строим синтаксическое дерево.
  2. Рекурсивно пробегаемся по дереву, и транслируем его в Javascript.

На выходе получаем файл .js с кодом шаблона.

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

Исходный код проекта под лицензией MIT доступен в моём репозитории на BitBucket. Там-же есть краткий пример использования шаблонизатора.

На данный момент весь код очень экспериментальный, и написался буквально за один день. В наших планах довести его до стабильного состояния и использовать везде и повсюду.
Tags:
Hubs:
Total votes 27: ↑24 and ↓3+21
Comments19

Articles