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

Одним з компонентів нашого проекту 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. Там є короткий приклад використання шаблонізатора.

На даний момент весь код дуже експериментальний, і написався буквально за один день. У наших планах довести його до стабільного стану і використовувати скрізь і всюди.