В наше время существует уже немалое количество таковых, не правда ли? Они даже неплохо справляются со своей работой, если надо, к примеру, сформировать HTML за сотые доли секунды – это довольно быстро, и пользователь не чувствует этой задержки. И почему же мы все не кидаемся вовсю использовать шаблонизацию на стороне клиента? Ну вот к примеру несколько пунктов:
– генерировать страницу (бОльшую её часть) становится таки уже накладно;
– если у вас используется смешанная шаблонизация (шаблоны и на javascript, и на вашем любимом скриптовом языке), то возникнет ситуация, когда они у вас дублируются;
Вот о втором пункте мне бы и хотелось поговорить, его решение прямо повлияет на решение первой проблемы — производительности.
Про то, что дублирование шаблонов — это плохо, объяснять не надо? Идея само собой не нова, но ввиду нетривиальности реализации, не пользуется популярностью (по крайней мере, не трубят об этом способе столько, сколько о шаблонизаторах на серверных языках).
Так вот, пишем шаблон, который умеет подхватывать и javascript, и наш любимый perl / php / python / и т.д. Всё логично, все мы это понимаем, хотим, но готовых вариантов не пруд пруди, придется наверняка писать самому, но вот прям сейчас времени в обрез, а потом как-то забывается.
Работа программиста — это 90% времени проектирование, проведение пробных тестов, и 10% времени — написание кода пока нас никто не видит, и не мешает нам. Давайте рассуждать, чего нам надо от шаблонизатора, а потом уже сами напишем его.
На простеньком примере посмотрим на схему в целом.
Шаблон:
Данные в виде JSON:
Результирующий html
В результате обработки нашего шаблона парсером шаблонизатора, на выходе у нас должна быть js библиотечка и модуль к нашему скриптовому языку.
Я опущу часть про то, в каком виде должен быть код для нашего любимого скриптового языка, отметим лишь то, что если ему скормить наш массив хэшей, он должен оперативненько выдать html.
А вот теперь про библиотеку javascript. Если бы мы получали что-то похожее на это (напоминаю — это результирующий код шаблонизатора, и в принципе нам его читабельность что шла, что ехала):
То уже на стороне клиента мы бы сделали так:
И вот, мы получили то, что хотели:
– генерацию html по шаблону и входному JSON;
– шаблоны у нас используются и скриптовым языком и javascript'ом, отсюда нет дублирования онных;
– за счет того, что у нас шаблоны превращаются в нативный код (скриптового языка и javascript), мы получаем максимально возможную скорость генерации;
Отметим:
– Генерация происходит за счет конкатенации чередующихся между собой переменных и статических данных(строк по сути) шаблона.
– Приведенный шаблон и код, это вершинка айсебрга возможностей нашего будущего шаблонизатора. Здесь будут все плюшки и перелести нашего серверного шаблонизатора, по мере возможности, как то многоуровневая вложенность переменных, рекурсии, и даже подобие кэширования.
Что господа думают о таком развитии событий? Целесообразность сего действа?
– генерировать страницу (бОльшую её часть) становится таки уже накладно;
– если у вас используется смешанная шаблонизация (шаблоны и на javascript, и на вашем любимом скриптовом языке), то возникнет ситуация, когда они у вас дублируются;
Вот о втором пункте мне бы и хотелось поговорить, его решение прямо повлияет на решение первой проблемы — производительности.
Про то, что дублирование шаблонов — это плохо, объяснять не надо? Идея само собой не нова, но ввиду нетривиальности реализации, не пользуется популярностью (по крайней мере, не трубят об этом способе столько, сколько о шаблонизаторах на серверных языках).
Так вот, пишем шаблон, который умеет подхватывать и javascript, и наш любимый perl / php / python / и т.д. Всё логично, все мы это понимаем, хотим, но готовых вариантов не пруд пруди, придется наверняка писать самому, но вот прям сейчас времени в обрез, а потом как-то забывается.
Работа программиста — это 90% времени проектирование, проведение пробных тестов, и 10% времени — написание кода пока нас никто не видит, и не мешает нам. Давайте рассуждать, чего нам надо от шаблонизатора, а потом уже сами напишем его.
На простеньком примере посмотрим на схему в целом.
Шаблон:
<ul>
{%topics}
<li class="{?#id == 1}first{|}other{/?}">{#title}</li>
{/%topics}
</ul>
* This source code was highlighted with Source Code Highlighter.
Данные в виде JSON:
[{title: 'Новость',id: 1},{title: 'Статья',id: 2},{title: 'Фото',id: 3},{title: 'Видео',id: 4},{title: 'Аудио',id: 5}]
* This source code was highlighted with Source Code Highlighter.
Результирующий html
<ul>
<li class="first">Новость</li>
<li class="other">Статья</li>
<li class="other">Фото</li>
<li class="other">Видео</li>
<li class="other">Аудио</li>
</ul>
* This source code was highlighted with Source Code Highlighter.
В результате обработки нашего шаблона парсером шаблонизатора, на выходе у нас должна быть js библиотечка и модуль к нашему скриптовому языку.
Я опущу часть про то, в каком виде должен быть код для нашего любимого скриптового языка, отметим лишь то, что если ему скормить наш массив хэшей, он должен оперативненько выдать html.
А вот теперь про библиотеку javascript. Если бы мы получали что-то похожее на это (напоминаю — это результирующий код шаблонизатора, и в принципе нам его читабельность что шла, что ехала):
(function(){
zTpl = function(options) {
this.init(options);
return this;
};
zTpl.prototype = {
init: function(options) {
this.opt = options
},
topics: function(data) {
var out = '<ul>';
for (var i=0; i< data.length; i++) {
out += '<li class="';
if (data[i].id == 1) {
out += 'first';
} else {
out += 'other';
}
out += '">'+data[i].title+'</li>';
}
out += '</ul>';
return out;
}
};
})();
* This source code was highlighted with Source Code Highlighter.
То уже на стороне клиента мы бы сделали так:
var d = [{title: 'Новость',id: 1},{title: 'Статья',id: 2},{title: 'Фото',id: 3},{title: 'Видео',id: 4},{title: 'Аудио',id: 5}];
var tpl = new zTpl();
var html = tpl.topics(d);
* This source code was highlighted with Source Code Highlighter.
И вот, мы получили то, что хотели:
– генерацию html по шаблону и входному JSON;
– шаблоны у нас используются и скриптовым языком и javascript'ом, отсюда нет дублирования онных;
– за счет того, что у нас шаблоны превращаются в нативный код (скриптового языка и javascript), мы получаем максимально возможную скорость генерации;
Отметим:
– Генерация происходит за счет конкатенации чередующихся между собой переменных и статических данных(строк по сути) шаблона.
– Приведенный шаблон и код, это вершинка айсебрга возможностей нашего будущего шаблонизатора. Здесь будут все плюшки и перелести нашего серверного шаблонизатора, по мере возможности, как то многоуровневая вложенность переменных, рекурсии, и даже подобие кэширования.
Что господа думают о таком развитии событий? Целесообразность сего действа?