@spmbt18 апр 2014 в 07:00

15 шаблонизаторов для фронтенд-разработки

4 мин

188K

Веб-разработка * JavaScript * HTML *

Перевод

+25

Комментарии 52

@xiWera 18 апр 2014 в 07:24

в копилку: embeddedjs.com/

@k12th 18 апр 2014 в 08:33

Последний коммит в 2009 году — нет уж, плавали, знаем. Посвежее.

НЛО прилетело и опубликовало эту надпись здесь

@1101_debian 18 апр 2014 в 07:51

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

@shsmad 18 апр 2014 в 08:10

Да и сравнение возможностей и недостатков было бы кстати.

@spmbt 18 апр 2014 в 08:16

Об этом автор специально упомянул в конце: «Я не пытался приводить примеры, потому что множество ссылок на официальные страницы содержат демонстрации.» И это действительно так, если походить по ссылкам. А демонстрации с живыми примерами типа. как сделано в jsFiddle — гораздо удобнее, чем масса текстов, которые всё равно полными не будут.

Чего здесь не хватает — это ссылок на статьи, относящиеся к перечисленным шаблонизаторам. Даже на Хабре о части из них есть много интересных статей. Например:
Итератор в шаблонизаторе doT.js по объектам с фильтрацией 2013,
Как использовать Handlebars, 2014,
Сборка клиентских JavaScript шаблонов (Hogan) 2012,
Вышло обновление JavaScript шаблонизатора ECT 2012,
Навигация без перезагрузки используя expressjs, jade и History.js 2012

@1101_debian 18 апр 2014 в 08:57

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

@spmbt 18 апр 2014 в 10:39

Сервис публикации статей скриншоты поддерживает, а живые виджеты — нет (самое большее из кодов — я бы хотел увидеть перечисление синтаксических конструкций для каждого из 15). По рисункам главных страниц можно увидеть, насколько интересны первые страницы и, в частности, есть ли на них живые примеры. Иногда по скриншоту видно, что есть. Да и вступительные слова, которые всегда есть на главной, перепечатывать не надо.

Ещё, что могло бы быть интересным — это сравнительные бенчмарки шаблонизаторов. Но чтобы сделать массированный бенчмарк или хотя бы проверить имеющийся, нужно потратить несколько часов, а интерес к ним — весьма частичный. Как пример, могу привести случай в комментариях к статье "Пишем свой JavaScript шаблонизатор" — там сравнивались (Mustache, JsRender, Underscore JS, doT.js, MaskJS, последнее сравнение), когда привели по шаблонизаторам бенчмарк с неправильными показателями. Это меня заинтересовало, и я прошёлся по шаблонам, сделал исправления и проверки по 5-6 шаблонизаторам. Они проверяли какой-то простой частный шаблон. Но, всё же, зто — слишком частный вопрос и предмет отдельной статьи — сравнение скоростей.

@AterCattus 18 апр 2014 в 07:57

А как насчет twig.js?

@sergiirocks 19 апр 2014 в 08:07

Если для фронтенда, то лучше использовать nunjucks. Меньше и есть возможность прекомпиляции.

@AterCattus 19 апр 2014 в 13:21

Ну я из всех названий в посте слышал только про Mustache да Handlebars. И то только названия, а не что это такое :) Вот и весьма удивился, что библиотека «на слуху» вообще не попала в список рассматриваемых.

@spmbt 19 апр 2014 в 15:09

То же самое можно сказать про DoT.js. К тому же, он и на бекенде, и с поддержкой модульности.

НЛО прилетело и опубликовало эту надпись здесь

@SowingSadness 18 апр 2014 в 10:47

doT плагин: plugins.jetbrains.com/plugin/7327?pr=webStorm

Он конечно не подхватывает scoupe данных, но хотя бы подсвечивает корректно исходник.

НЛО прилетело и опубликовало эту надпись здесь

@IonDen 18 апр 2014 в 08:31

Синтаксис Handlebars и Mustache поддерживается IDE от JetBrains из коробки (WebStorm, PhpStorm, IntellyJ)

@GubkaBob 18 апр 2014 в 08:34

jsrender недостаточно популярен, видимо )

@Slavenin999 18 апр 2014 в 10:21

Действительно странно, что он не упомянут, на мой взгляд, крайне удобная, быстрая и надёжная вещь.

@k12th 18 апр 2014 в 08:35

Странно, что не упомянуты решения с поддержкой двухстороннего связывания, как то: rivets.js, ractive.js.

НЛО прилетело и опубликовало эту надпись здесь

@k12th 18 апр 2014 в 14:05

Я пока имел практический опыт только с rivets, и, видимо, буду переходить на ractive, потому что подводных камней очень много.

НЛО прилетело и опубликовало эту надпись здесь

@metamorph 19 апр 2014 в 14:11

А Вы на размер файла ractive посмотрите.

НЛО прилетело и опубликовало эту надпись здесь

@metamorph 19 апр 2014 в 14:45

Мы точно об одном и том же ractive говорим?
Runtime minified — 109.339 kb
ractive minified — 136.931 kb

Несжатые там что-то типа 300+ кб

НЛО прилетело и опубликовало эту надпись здесь

@JCHouse 18 апр 2014 в 08:57

А BEM (http://bem.info/) почему стороной обошли?

@karudo 18 апр 2014 в 11:16

Статья была бы еще лучше, если бы по каждому шаблонизатору был пример кода.

@fustic 18 апр 2014 в 11:24

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

@VikentiyR 18 апр 2014 в 11:42

В копилку: Kendo UI (шаблонизатор часть фреймворка)

@huze 18 апр 2014 в 11:44

Просто для полноты: Meteor.js из коробки использует Spacebars, «вдохновлённый» Handlebars.

@xGromMx 18 апр 2014 в 11:53

Кстати, с некоторых пор KendoUI стал бесплатным и опенсоурс =) www.telerik.com/download/kendo-ui-core. Правда не все там есть, но то что открыли ядро это уже круто.

@Zazza 18 апр 2014 в 14:50

Сменили лицензию с GPL3 на Apache, попутно выпилив из opensource: treeview, uploader, grid, editor и sheduler (это для меня самое важное). Так что теперь Kendo UI это OpenSource шаблонизатор с несколькими базовыми компонентами.

@rboots 18 апр 2014 в 12:07

По моему субъективному опыту, на десятках очень сложных одностраничных приложний, от любых шаблонизаторов оказывалось больше тормозов, чем пользы. Я один такой? Что я не понимаю в этом мире?

НЛО прилетело и опубликовало эту надпись здесь

@rboots 18 апр 2014 в 14:59

Обычно гораздо быстрее изменить одно-два свойства в DOM, чем ререндерить весь шаблон. Ну и да, конкатенация строк во многих браузерах иногда тоже прилично съедает. Плюс имхо DOM это более «программистский» путь, можно создать множество своих абстракций, использовать наследование, миксины, другие плюшки. Но это лишь моё мнение из «чужого монастыря» :)

@xGromMx 18 апр 2014 в 15:55

ReactJS от Facebook оперирует не строками и очень шустрая штука.

НЛО прилетело и опубликовало эту надпись здесь

@garfik 18 апр 2014 в 17:41

Еще очень хорош paularmstrong.github.io/swig/

Удобно, когда и бекэнд(python+jinja, php+twig) и фронтэнд могут использовать одно и тоже.

@kelegorm 18 апр 2014 в 19:14

А как же EJS?

@Owheee 18 апр 2014 в 20:13

Извините за оффтоп, речь пойдёт про Java.
К слову, первая картинка взята из документации FreeMarker. Это очень интересная альтернатива JSP, я пользуюсь с удовольствием.

@Serhioromano 19 апр 2014 в 20:26

Еще одни очень интересный шаблонизатор plates. Он не очень популярный но его идея привязки данных к HTML уникальна. Думаю что Knockout.js взял от туда много. Я сам ни когда им не пользовался, не удавалось но очень хотелось бы. При таком подходе, в шаблонах вообще нет ни чего лишнего и ни какого намека на <% или {{ все выглядит как просто голый HTML.

@aps 21 апр 2014 в 10:24

Раньше массовое изобретение шаблонизаторов было уделом php-программистов.

@StreetStrider 21 апр 2014 в 12:27

chibi каким местом шаблонизатор? Пролистал всю доку, судя по ней, это jQuery-подобная либа для траверсинга дома, навешивания обработчиков и AJAX. Proof me wrong.