Шаблонизатор

Что такое шаблонизатор в SEO

Шаблонизаторы (механизмы создания шаблонов JavaScript) позволяют добавлять динамическую логику к статическим HTML-страницам. Например, вы можете объявить переменную, которую механизм заменяет фактическим значением при выполнении. Таким же образом можно использовать условные выражения, циклы, фильтры, миксины, другие конструкции.

Шаблонные движки JavaScript ускоряют интерфейсную разработку, упрощают и ускоряют отладку, обслуживание. Каждый движок имеет собственный синтаксис, который необходимо изучить. Однако кривая обучения обычно довольно плоская, поскольку синтаксисы шаблонов целенаправленно просты, легко запоминаются.

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

Сегодня доступно несколько шаблонизаторов. Популярные из них — Pug (fka Jade), Handlebars, EJS, Mustache, Swig и другие.

Nunjucks

Nunjucks — это высокопроизводительный полнофункциональный шаблонизатор JavaScript, вдохновленный механизмом Jinja2 для Python. Он разработан и поддерживается Mozilla, которая также использует Nunjucks для своих собственных продуктов (Firefox Marketplace и Mozilla Webmaker). Nunjucks имеет множество расширенных функций: встроенные фильтры, аргументы ключевых слов, наследование, асинхронные шаблоны и др.

Вы можете добавить Nunjucks в свой проект либо с помощью npm, либо путем добавления библиотеки nunjucks.js на HTML-страницу. Nunjucks поддерживает все современные браузеры, однако необходимо использовать ES5-shim для поддержки Internet Explorer 11.

Pug

Pug ранее был известен как Jade. Команде разработчиков пришлось переименовать его, когда выяснилось, что Jade — зарегистрированная торговая марка. Pug позволяет быстро писать статические шаблоны. Синтаксис Pug включает в себя условные выражения, фильтры, включения, итерации, миксины, интерполяцию и другие логические конструкции.

Он полностью интегрируется с Express.js в качестве поддерживаемого механизма просмотра. Если вы хотите использовать свои шаблоны Pug при разработке React, можно перенести их в JSX, используя плагин Babel. Вы можете разрабатывать темы WordPress, используя шаблоны Pug с помощью плагина Wordless. Он добавляет Pug, Sass, CoffeeScript и Webpack в вашу тему WordPress.

Mustache.js

Mustache.js — это JavaScript-реализация популярной системы шаблонов {{mustache}}. Помимо JavaScript, {{mustache}} также доступен в Ruby, PHP, C # /. NET, Android, C ++ и многих других языках программирования. Это хороший выбор для разработчиков, которые кодируют на нескольких языках, так как синтаксис нужно осваивать только один раз.

Шаблоны, созданные с помощью {{mustache}}, не имеют логики, поскольку синтаксис не имеет операторов if-else, циклов for и аналогичной логики — только теги шаблонов. Чтобы использовать Mustache.js, нужно определить объект представления для данных и шаблон. Mustache.js используется многими известными компаниями: Linkedin, Twitter, PayPal, Buzzfeed.

Handlebars

Handlebars позволяет строить смысловые шаблоны, похожие на шаблоны усов. В большинстве случаев можно использовать шаблоны Mustache и Handlebars взаимозаменяемо, однако есть и некоторые исключения. Синтаксис Handlebars — это надмножество Mustache — он расширяет синтаксис Mustache дополнительными функциями, которые упрощают создание шаблонов.

С Handlebars можно использовать вложенные пути, в то время как Mustache поддерживает только простые пути. Функция Block Expression позволяет создавать помощников, которые вызывают шаблон в разных контекстах. Можно передавать помощникам в качестве аргументов литеральные значения, включая строки, числа, логические значения, null и undefined. Согласно тестам производительности, текущая версия Handlebars (Handlebars 4) в 5&ndash7 раз быстрее, чем его эквивалент Mustache.

Template7

Template7 — это механизм создания шаблонов JavaScript, который следует подходу, ориентированному на мобильные устройства. Он создан и поддерживается командой, стоящей за популярным мобильным фреймворком Framework7, который позволяет создавать приложения для iOS и Android. Template7 также используется в качестве механизма шаблонов по умолчанию в Framework7. Он имеет синтаксис, аналогичный Handlebars, но примерно в 2&ndash3 раза быстрее. Template7 также довольно легкий — уменьшенная и сжатая с помощью gzip версия весит всего 1 КБ.

С Template7 вы можете встраивать выражения Handlebars в обычные файлы HTML. Он также имеет встроенные помощники, которые упрощают динамическую обработку контента. Например, вы можете использовать {{#each}}&hellip {{else}} .. {{/ each}}, {{#if}}&hellip {{else}}&hellip {{/ if}}, {{# if}}&hellip {{else}}&hellip {{/ except}} и другие выражения блока в качестве вспомогательных функций. Template7 позволяет определять настраиваемые помощники и повторно использовать шаблоны через частичные файлы.

JsRender

JsRender — это расширяемый механизм шаблонов JavaScript, который можно использовать по-разному. Он позволяет отображать шаблоны как на сервере (Node.js), так и в браузере. Загрузить его можно с помощью jQuery или без него. Версия Node.js также предоставляет встроенную интеграцию с Express, Hapi и Browserify.

JsRender использует синтаксис, похожий на усы, нужно вставить теги шаблона в пару двойных фигурных скобок {{&hellip}}. Синтаксис включает вычисления, частичные, условные выражения, циклы, итерации и другие логические конструкции.

Можно создавать собственные теги и расширять теги шаблонов по умолчанию, например, тег {{for}}. Синтаксис JsRender содержит помощники, преобразователи (например, преобразователь в верхний регистр), а также богатые выражения для облегчения создания сложной логики.

doT.js

Механизм создания шаблонов JavaScript doT.js делает упор на скорость, производительность. Использовать его можно с npm, либо добавив библиотеку JS на свою HTML-страницу. doT.js не имеет зависимостей, нагрузок даже при больших шаблонах — все выполняется довольно быстро. Вы можете выбирать между оценкой времени выполнения и оценкой времени компиляции. Если данные не меняются при каждом запуске, выбрайте последний.

Синтаксис doT по умолчанию ссылается на данные с именем переменной it. Однако вы можете изменить его, отредактировав файл настроек компиляции. Синтаксис позволяет использовать частичные выражения, условные выражения, массивы, интерполяцию, циклы и другую логику. Многие разработчики также используют doT вместе с Express.js.

Шаблонные движки JavaScript могут сэкономить вам много времени. В качестве альтернативы используйте литералы шаблонов ES6. Большинство из них имеют гораздо больше опций, возможностей.

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