Сборка клиентских JavaScript шаблонов

[smashercosmo]

хм… и где тут прекомпиляция?

[Upward]

под прекомпиляцией имелось в виду сжатие шаблонов и сборка их в один файл, решение например в handlebars мне кажется избыточным, хоть мы и получаем выигрыш в размере библиотеки (с 33KB до 3KB), размер скомпилируемых шаблонов растет очень сильно

[anmi]

Прекомпиляция вообще говоря подразумевает какие-то специальные инструкции для препроцессора и создание нового уровня абстракций хоть на каком-то уровне, т.е. генерация кода для другого процессора.

В вашем случае простая сериализация группы файлов в один файл.

[smashercosmo]

Суть прекомпиляции — создание из текста шаблона готовой функции для рендринга. Это процедура весьма затратна, если делать ее на клиенте.

[ActiveObject]

Поддерживаю. Прекомпиляции не вижу, только конкатенация и быстрый доступ посредством глобальной переменной.

[Upward]

возможно выбрал не совсем точный термин, но мне кажется он более точно и емко описывает то, что происходит

[ActiveObject]

На своих проектах использую brunch + handlebars + live reload plugin. В результате все шаблоны скомпилированы, brunch следит за изменениями, а live reload прямо перегружает браузер. Очень удобно!

По поводу доступа. Все шаблоны лежат в папке app/templates. В скомпилированом коде это просто javascript функции, которые доступны как CommonJS модули.

Для примера есть шаблон app/templates/main-layout.hbs. В програмном коде пишем:

var mainLayoutTmpl = require('templates/main-layout');
var renderedTmpl   = mainLayoutTmpl({ title: 'Hello world!' });

Простой доступ и никаких глобальных переменных.

[Upward]

можете поделить, какой размер шаблонов до и после прекомпиляции получается?

[ActiveObject]

Все шаблоны собираються вместе с кодом приложения в один файл app.js. Но если взять отдельный шаблон, тогда получается так: исходный шаблон — 1.4 КБ, скомпилированный — 3,8 КБ.

Да, размер на самом деле больше. Вы заставили меня задуматся. Правда у меня сейчас не так много шаблонов, что б волноватся за их размер.

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

[Upward]

ясно, спасибо, добавил в статью пример обертки для шаблонизатора, чтобы скрыть работу с глобальными переменными.

[smashercosmo]

Ну и к тому же файл с шаблонами все равно кэшируется браузером, так что некоторое увеличение размера мне кажется непринципиально, а скорость отрисовки страницы будет выше.

[Upward]

Можете расценивать это как оптимизацию первоначальной загрузки страницы, в конечном счете все зависит от проекта, handlebars отличное решение, я не раз о нем упоминаю, но разницу в скорости отрисовки шаблонов не прибегая к тесам заметить очень сложно.

[anatolyrozhkov]

Парни, а никто попрекомпилировать не хочет в славном офисе с хорошей з/п и пряниками в районе м. Аэропорт :)? Очень ищу хорошего прекомпилятора JS ;)

[kosiasik]

Вам бы дизайнеров для начала ;)

[it_positive]

просто оставлю ссылку как LinkedIn выбирал шаблонизатор
engineering.linkedin.com/frontend/client-side-templating-throwdown-mustache-handlebars-dustjs-and-more

[Upward]

Изменил заголовок поста в виду комментариев выше.

[zandroid]

А работа с «некомпилированными» шаблонами либа поддерживает? Т.е. я хочу, чтобы в dev режиме шаблоны можно было применять с таким же синтаксисом, но при этом текст шаблона грузился из его source-файла, а вот при подготовке production производилась сборка всех шаблонов в один файл.

[Upward]

Я так понимаю, что это нужно для дебага, или какой юзкейс? Возможно вам подойдет опция --watch, в этом случае вы просто подключаете скомпилированный файл и при любом изменении оригинальных шаблонов он сам пересобирается. Если нужно, могу дописать функционал который будет генерировать файлы с такой же иерархией как оригинальные, только экранировал бы окончание строк и присваивал шаблон какой то переменной, другого варианта не вижу, но не совсем понятна область применения.

[zandroid]

Вопрос пока чисто более теоретический, чем практический. У меня, например, сейчас треубемые шаблоны подгружаются посредством AJAX (один из вариантов), т.о. я могу перезагрузить какой-нибудь шаблон в runtime для дебага. Это пример юзкейса. А спрашиваю пока из чистого интереса к проекту и как возможная идея дополнения функциональности, а не то чтобы мне это прям очень надо.

[Upward]

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

[kosiasik]

Hogan сам умеет компилироваться в функции, зачем лишние действия?

[Upward]

У хогана есть готовая утилита? Что то не нашел, или все таки прийдется немного пописать на ноде?

[meettya]

А я вот eco шаблоны собираю stitch-ем — ну получаются шаблоны после прекомпиляции толще, но так на то и gzip, чтоб о размере заботится.