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

http://codecondo.com/15-javascript-template-engines/
  • Перевод

Число JS-библиотек ни в коей мере не уменьшается; наоборот, оно растёт с каждым днём. Когда мы доходим до приложений JS, лучшим выбором оказываются шаблоны, чем полноценные библиотеки, потому что это приводит к более чистому базовому коду и лучшему процессу работы с ними.

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


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

Если вы разрабатываете на Javascript, то узнаете ряд движков, но можно узнать и о некоторых новых. Я с удовольствием продолжу этот список вместе, и надеюсь, что он вас порадует.

ICanHaz.js




Очень простая библиотека для работы с шаблонами Mustache, другой, более быстрый движок. С ним можно определять фрагменты шаблонов в тегах скриптов с type=”text/html” и вызывать их через id, с валидацией.

Hogan.js




Twitter стремится быть частью опенсорс-сообщества. Hogan.js можно использовать как компоновщик промежуточных шаблонов, для компиляции их заранее, чтобы браузер обрабатывал эти шаблоны динамически.

Содержит то же, что и Mustache, но делает всё быстрее и эффективнее.

Handlebars.js




Handlebars — расширение шаблонизатора Mustache, созданный Крисом Ванстратом (Chris Wanstrath). Эти шаблонизаторы — имеют языки, не перегруженные логикой, разделяющие код и представление, совпадающие с нашими лучшими ожиданиями.

mustache.js




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

Transparency




Transparency — клиентский движок шаблонизации, связывающий данные в DOM. Пишется на нём просто, понятно, простой нативный HTML и такой же JS. Нет необходимости изучать синтаксис шаблонов, всё очевидно и просто в использовании.

doT.js




Хорошо подходит для Node.js-сообщества. Быстрый, малоразмерный, без зависимостей. Героически добился баланса скорости и гибкости. (Во многом унаследовал качества Underscore.js-шаблонизатора (компонента этой библиотеки — перев.)).

Walrus




В современных веб-приложениях участвует много логики представления. Эта логика не относится к коду приложения и моделям, это — уровень представления. Язык шаблонизатора — хорошее место для неё.

Эта цель преследуется так концентрированно, что скорость шаблонизации не приоритетна; скорее, Walrus ориентирован на облегчение разработки шаблонов веб-приложений.

chibi.js




Chibi даёт всё для экономии траффика и времени для отображения шаблона, небольшая и лёгкая библиотека, которая поможет лучше шаблонизировать приложение. Больше фокусируется на CSS вместо использования анимации. (Дословная «вода» автора — перев.)

templayed.js




Это — самый маленький шаблонизатор, с которым вы столкнётесь, гарантированно (Nano — перев.). Он построен на основе Mustache, прост в использовании и понимании. Сайт имеет большой демо-пример, в котором можно запускать и тестировать код.

ECT




Подобно templayed, ECT тоже имеет демо-страницы установки на сайте, с которыми можно «поиграться» и понаблюдать живые результаты. Он сделан для скорости, и заявляет о себе как о самом быстром шаблонизаторе для JS (построен на Coffeescript). Совместим с Node.js и имеет понятный синтаксис. На Github есть бенчмарки и модульные тесты, показывающие эффективность этой библиотеки.

Pithy.js




Имеется внутренний DSL для генерации HTML в JavaScript. Это отлично для небольших фронтенд-проектов, но не рекомендуется для тяжёлых HTML-страниц.

T.js




T.js использует простую структуру данных Javascript для представления данных HTML / XML.

Nunjucks




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

Jade




Jade рассчитан прежде всего для серверных шаблонов в node.js, но может работать во многих других средах. Он сделан только для XML-подобных документов (HTML, RSS, ...), поэтому не используйте его для оформления простого текста, markdown, CSS и подобных документов.

Dust.js




Dust расширяет Mustache и предлагает высокое качество исполнения по сравнению с другими решениями из этого списка. Содержит очень простой и понятный API.

Движки шаблонизации Javascript


Я не пытался приводить примеры, потому что множество ссылок на официальные страницы содержат демонстрации.

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

UPD: комментаторы статьи-оригинала добавили:
  • "Pure — Simple and ultra-fast templating tool to generate HTML from JSON data
  • Dust.js is used by PayPal, and default in their Kraken.js framework.
  • Swig — A simple, powerful, and extendable JavaScript Template Engine.

UPD2: упомянуты в комментариях к этой статье:
  • Twig — JS implementation of the Twig Templating Language
  • EJS Embedded JavaScript templates for node

Только зарегистрированные пользователи могут участвовать в опросе. Войдите, пожалуйста.

Какой из перечисенных шаблонизаторов вы использовали? А ещё?
Какой из перечисенных шаблонизаторов вам понравился?
Поделиться публикацией
Ой, у вас баннер убежал!

Ну. И что?
Реклама
Комментарии 52
  • +1
    в копилку: embeddedjs.com/
    • +3
      Последний коммит в 2009 году — нет уж, плавали, знаем. Посвежее.
    • –7
      можно бы было bem включить в список
      • +35
        Примеры кода были бы гораздо полезнее и уместнее, нежели скрины сайтов.
        • +11
          Да и сравнение возможностей и недостатков было бы кстати.
          • –10
            Об этом автор специально упомянул в конце: «Я не пытался приводить примеры, потому что множество ссылок на официальные страницы содержат демонстрации.» И это действительно так, если походить по ссылкам. А демонстрации с живыми примерами типа. как сделано в jsFiddle — гораздо удобнее, чем масса текстов, которые всё равно полными не будут.

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

                Ещё, что могло бы быть интересным — это сравнительные бенчмарки шаблонизаторов. Но чтобы сделать массированный бенчмарк или хотя бы проверить имеющийся, нужно потратить несколько часов, а интерес к ним — весьма частичный. Как пример, могу привести случай в комментариях к статье "Пишем свой JavaScript шаблонизатор" — там сравнивались (Mustache, JsRender, Underscore JS, doT.js, MaskJS, последнее сравнение), когда привели по шаблонизаторам бенчмарк с неправильными показателями. Это меня заинтересовало, и я прошёлся по шаблонам, сделал исправления и проверки по 5-6 шаблонизаторам. Они проверяли какой-то простой частный шаблон. Но, всё же, зто — слишком частный вопрос и предмет отдельной статьи — сравнение скоростей.
          • +2
            А как насчет twig.js?
            • 0
              Если для фронтенда, то лучше использовать nunjucks. Меньше и есть возможность прекомпиляции.
              • 0
                Ну я из всех названий в посте слышал только про Mustache да Handlebars. И то только названия, а не что это такое :) Вот и весьма удивился, что библиотека «на слуху» вообще не попала в список рассматриваемых.
                • +1
                  То же самое можно сказать про DoT.js. К тому же, он и на бекенде, и с поддержкой модульности.
              • +1
                Очень нравится doT.js, но очень огорчало отсутствие плагина под WebStorm (Intellij idea), хотя бы для подсветки синтаксиса.
                Появился вот такой плагин (правда еще сыроват), может кому-то пригодится.
              • +1
                Синтаксис Handlebars и Mustache поддерживается IDE от JetBrains из коробки (WebStorm, PhpStorm, IntellyJ)
                • +4
                  jsrender недостаточно популярен, видимо )
                  • 0
                    Действительно странно, что он не упомянут, на мой взгляд, крайне удобная, быстрая и надёжная вещь.
                  • +2
                    Странно, что не упомянуты решения с поддержкой двухстороннего связывания, как то: rivets.js, ractive.js.
                    • 0
                      Ractive.js смотрел на днях — это вообще чума! Он вроде покруче чем rivets.js.
                      • 0
                        Я пока имел практический опыт только с rivets, и, видимо, буду переходить на ractive, потому что подводных камней очень много.
                        • +1
                          Если будет возможность напишите потом об ощущениях от работы с ним. Если не хватит на статью то хотя бы тут. Спасибо.
                          • 0
                            А Вы на размер файла ractive посмотрите.
                            • 0
                              Всмысле ~91kb несжатый gzip? Размер файла ни о чем не говорит, в зависимости от проекта можно загружать его в нужное время и хорошенько закэшировать, а вот функционал и api дают очень многое.
                  • –3
                    А BEM (http://bem.info/) почему стороной обошли?
                    • 0
                      Статья была бы еще лучше, если бы по каждому шаблонизатору был пример кода.
                      • 0
                        Было бы огромным плюсом к статье иметь сравнения по скорости отрисовки каждым шаблонизатором.
                        • 0
                          В копилку: Kendo UI (шаблонизатор часть фреймворка)
                          • 0
                            Просто для полноты: Meteor.js из коробки использует Spacebars, «вдохновлённый» Handlebars.
                            • 0
                              Кстати, с некоторых пор KendoUI стал бесплатным и опенсоурс =) www.telerik.com/download/kendo-ui-core. Правда не все там есть, но то что открыли ядро это уже круто.
                              • 0
                                Сменили лицензию с GPL3 на Apache, попутно выпилив из opensource: treeview, uploader, grid, editor и sheduler (это для меня самое важное). Так что теперь Kendo UI это OpenSource шаблонизатор с несколькими базовыми компонентами.
                              • +2
                                По моему субъективному опыту, на десятках очень сложных одностраничных приложний, от любых шаблонизаторов оказывалось больше тормозов, чем пользы. Я один такой? Что я не понимаю в этом мире?
                                • 0
                                  Тссс.
                                  • 0
                                    Это потому что большинство шаблонизаторов со строками работают?
                                    • 0
                                      Обычно гораздо быстрее изменить одно-два свойства в DOM, чем ререндерить весь шаблон. Ну и да, конкатенация строк во многих браузерах иногда тоже прилично съедает. Плюс имхо DOM это более «программистский» путь, можно создать множество своих абстракций, использовать наследование, миксины, другие плюшки. Но это лишь моё мнение из «чужого монастыря» :)
                                      • 0
                                        ReactJS от Facebook оперирует не строками и очень шустрая штука.
                                        • 0
                                          Мне больше нравится ractive.js. Я просто хотел уточнить.
                                    • НЛО прилетело и опубликовало эту надпись здесь
                                      • +1
                                        ECT.js отлично показал себя при разработке на node.js, Ractive.js, как упоминалось уже выше в комментариях это красивая реализация нескольких стоящих идей в одном проекте — data-binding, animations, events, atomic updates, strings -> dom templates. Рекоммендую к размышлению и разработке.
                                        • +1
                                          Еще очень хорош paularmstrong.github.io/swig/

                                          Удобно, когда и бекэнд(python+jinja, php+twig) и фронтэнд могут использовать одно и тоже.
                                          • 0
                                            А как же EJS?
                                            • 0
                                              Извините за оффтоп, речь пойдёт про Java.
                                              К слову, первая картинка взята из документации FreeMarker. Это очень интересная альтернатива JSP, я пользуюсь с удовольствием.
                                              • +2
                                                Еще одни очень интересный шаблонизатор plates. Он не очень популярный но его идея привязки данных к HTML уникальна. Думаю что Knockout.js взял от туда много. Я сам ни когда им не пользовался, не удавалось но очень хотелось бы. При таком подходе, в шаблонах вообще нет ни чего лишнего и ни какого намека на <% или {{ все выглядит как просто голый HTML.
                                                • 0
                                                  Раньше массовое изобретение шаблонизаторов было уделом php-программистов.
                                                  • +1
                                                    chibi каким местом шаблонизатор? Пролистал всю доку, судя по ней, это jQuery-подобная либа для траверсинга дома, навешивания обработчиков и AJAX. Proof me wrong.
                                                    • 0
                                                      Про nunjucks стоит сказать, что он почти полностью такой же, как шаблонизатор Jinja2 из Python, который очень популярен.
                                                      • 0
                                                        Также, как skim, slim и jade довольно близки.
                                                      • 0
                                                        Форк Smarty на js ещё забыли
                                                        github.com/umakantp/jsmart
                                                        • 0
                                                          Спасибо.

                                                          Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                                                          Самое читаемое