STAN — самый короткий шаблонный движок

Холодным Апрельским днем когда на Урале еще не растаял снег. Смеркалось. Я игрался с микро-шаблонами. К примеру: ejohn.org/blog/javascript-micro-templating/ Они все были сверхпроизводительны на пcевдо тестах, но в тоже время в них отсутствовал хоть какой либо более или менее серьезный функционал.

Последней каплей стало то что я пропустил js1k. One thing led to another. И в голову мне пришла интересная идея. Почему бы максимально не использовать возможности JS? Использовать синтаксис JS в шаблоне ( что позволит с помощью JS движка парсить шаблоны ) и использовать все возможности JS.

И получился шаблонный движок с довольно простым синтаксисом:

[TAG] raw( data: String ) | variable [TAG]  [TAG].b [TAG].e [TAG] raw( data: String )

Что выглядит приблизительно так:

function _template() {     div.b;     span.context.value.span;     span.raw(11).span;     div.e;     hr;     raw('plain text') } 

 div.b -> открывающийся тэг -> <div> div.e -> закрывающийся тэг  -> </div>  div.context.value.div -> <div>{{ context.value }}</div>  hr -> самозакрывающийся тэг -> <hr/> 

Получается своего рода DSL.

И какого размера код?

30 строчек кода 🙂 Я уж не говорю про минифицированную версию.

Пример?

// Данные - на самом деле в шаблон можно передать  // любой JS обьект ( включая примитивы ) var data = [     { name: 'STAN' },     { name: 'Ai_boy' },     { name: 'IceFrog' } ];  // Главный шаблон function _template(){          // Через [ ] можно передать атрибуты нашему XML тегу      h1['class="head"'].raw('List of names').h1;      for (var i = 0; i < context.length; i++) {         // вызываем подшаблон         partial(_item, context[i]);     } }  // Partial - подшаблон function _item(){     b[args({style: 'color: blue', class: 'test'})].raw("Name:").b;     div.context.name.div;     hr; }  // Написание кастомных helper функций никогда // небыло настолько простым - просто пишем js function args(obj){    var result = '';   for (var key in obj) {     if (obj.hasOwnProperty(key)) {       result += key + '="' + obj[key] + '" ';     }   }   return result; }  document.body.innerHTML = STAN.run(STAN.compile(_template), data); 

Как начать?

Можно зайти на сайт и поиграться в Sandbox
aiboy.github.io/STAN/sandbox.html

Либо зайти на GitHub страницу и следовать инструкции в README.md
github.com/aiboy/STAN
(использовать шаблонизатор можно как в браузере так и в Node.js )

В чем плюс?

Главных приемущества ровно четыре:

1) Полная поддержка JS синтаксиса и всех его возможностей ( CoffeeScript, ClosureScript, TypeScript… ect )

2) Доступ к DOM в момент рендеринга шаблона.

3) Полная поддержка всех JS библиотек внутри шаблона ( lodash, underscore, jquery… ect )

4) Поддержка шаблонов в любом текстовом редакторе — ибо они на самом деле представляют из себя чистый JS синтаксис

А скорость?

jsperf.com/stan-speed-test

Скорость «скомпилированного» шаблона ( который потом вручную или автоматически превращен в обычный js файл ) приблизительно равна скорости JavaScript 🙂 Что весьма и весьма не плохо. Если динамически компилировать шаблоны то скорости увы не такие большие.

Почему не Zen Coding?

Потому что Zen Coding не возможно выразить в рамках JS синтаксиса — тоесть Zen Coding — не может быть валидным JS.

Это шутка?

Несмотря на безумность/глупость ( нужное подчеркнуть ) идеи. Все весьма и весьма серьезно. Проект будет развиваться. Обрастать тестами, более правильным синтаксисом и многими другими плюшками. Заходите на GitHub страничку — оставляйте ваши пожелания, найденные баги и все прочее.

PS: На самом деле я немного кревлю душой когда пишу что данный шаблонизатор состоит всего из 30 строк. Если честно отформатировать код то получится строк 40-50. Но для меня это больше психологический барьер которого я стараюсь придерживаться.

PPS: буду рад любым замечаниям по поводу «корректности и грамотности заметки» ( но будет лучше если все это будет написанно в личку )