Иван Сотников 17 января 2023

🔝ТОП-10 шаблонизаторов для фронтенд-разработки

Шаблонизаторы применяют в разработке фронтенда для создания компонентов. Они позволяют создать более чистую и удобную для обслуживания кодовую базу, избавляя программиста от необходимости писать повторяющийся код несколько раз. В статье рассмотрим десять популярных во фронтенд-разработке шаблонизаторов и способы создания простых шаблонов.
1
🔝ТОП-10 шаблонизаторов для фронтенд-разработки

Для чего нужны шаблонизаторы

Шаблонизаторы позволяют использовать одну и ту же html-разметку в любых местах веб-приложения и вставлять в эту разметку свои данные. Возьмем для примера элемент интерфейса Яндекс Музыки. Перед нами типичный компонент страницы, который, в свою очередь, сам состоит из компонентов.

В чем плюсы компонентов.

  1. Они независимы друг от друга.
  2. Их можно использовать в любом месте приложения.
Пример компонента приложения Яндекс музыка
Пример компонента приложения Яндекс музыка

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

Примечание
Для работы с шаблонами могут понадобиться сборщики и node.js. Будьте внимательны, так как некоторые версии шаблонизатора могут не работать со старой версией или последним релизом node.js.

1. mustache.js

Как установить в проект

Используйте команду npm install mustache --save

Как сделать простой шаблон

1. Создаем файл render.js.

Пример файла рендера
        function renderHello() {
  let template = document.getElementById('template').innerHTML;
  let rendered = Mustache.render(template, { name: 'Luke' });
  document.getElementById('target').innerHTML = rendered;
}

    

2. Добавляем файл на html-страницу.

Пример вывода шаблона на html-страницу
        <html>
  <body onload="renderHello()">
    <div id="target">Loading...</div>
    <script id="template" type="x-tmpl-mustache">
      Hello {{ name }}!
    </script>

    <script src="https://unpkg.com/mustache@latest"></script>
    <script src="render.js"></script>
  </body>
</html>

    

2. Hogan.js

Компилятор языка шаблонов Mustache, разработанный компанией Twitter.

Как установить в проект

Используйте команду npm install hogan.js.

Или используйте ссылку на страницу

<script src="http://twitter.github.com/hogan.js/builds/3.0.1/hogan-3.0.1.js"></script>

Как сделать простой шаблон

Код шаблона Hogan.js
        var data = {
  screenName: "dhg",
}; // объект, значение которого будет вставляться в шаблон.

var template = Hogan.compile("Follow @{{screenName}}.");// компилирование шаблона 
var output = template.render(data);//рендеринг шаблона

// prints "Follow @dhg."
console.log(output);// вывод, который получится благодаря шаблону.

    
Больше полезных материалов вы найдете на нашем телеграм-канале «Библиотека фронтендера»

3. Handlebars.js

Как установить в проект

Используйте команду npm install handlebars или yarn add handlebars

Можно воспользоваться CDN — cdnjs.com/libraries/handlebars.js

Шаблоны вставляются прямо в html-теги. Пример самого простого шаблона можно найти в документации Handlebars.

Как сделать простой шаблон

1. Написать файл шаблона и сохранить его с расширением .hbs.

Пример простого шаблона Handlebars
        //назовите файл data.hbs 
<p>{{data}}</p>
    

2. Добавить любым способом на html-страницу скрипт.

Пример файла, который добавляет шаблон Handlebars на веб-страницу
        import data from './data.hbs';
 
let template = Handlebars.compile(data);
 
export default data({
 data: 'Handlebars',
});

    

4. Pug

Как установить в проект

Используйте команду npm install pug.

Как сделать простой шаблон

1. Создаем шаблон с расширением .pug.

Пример файла шаблона pug
        //- template.pug
p #{name}'s Pug source code!

    

2. Создаем js-файл и добавляем его любым способом на html-страницу.

Пример файла, который добавляет шаблон Pug на веб-страницу
        const pug = require('pug');

// Compile the source code
const compiledFunction = pug.compileFile('template.pug');

// Render a set of data
console.log(compiledFunction({
  name: 'Timothy'
}));
// "<p>Timothy's Pug source code!</p>"

// Render another set of data
console.log(compiledFunction({
  name: 'Forbes'
}));
// "<p>Forbes's Pug source code!</p>"

    

5. Transparency

Шаблонизатор сопоставляет объекты JSON с элементами DOM по идентификатору, классу и атрибутам привязки данных.

Внимание
Последние коммиты в репозитории шаблонизатора были 7 лет назад.

Как установить в проект

Используйте команду npm install transparency

Как сделать простой шаблон

1. Создаем html-страницу с таким кодом.

Пример фрагмента html-страницы
        <div id="template">
  <span class="greeting"></span>
  <span data-bind="name"></span>
</div>

    

2. Создаем скрипт.

Пример скрипта шаблона
        let hello = {
  greeting: 'Hello',
  name:     'world!'
};

$('#template').render(hello);

    

3. На выходе получаем такой код.

Пример результата работы шаблонизатора Transparency
        <div id="template">
  <span class="greeting">Hello</span>
  <span data-bind="name">world!</span>
</div>

    

6. doT.js

Движок шаблонов javascript для nodejs и браузеров.

Как установить в проект

Используйте команду npm install dot@beta

Пример простого шаблона здесь: github.com/olado/doT/tree/master/examples/express

Как сделать простой шаблон

1. Создать шаблон.

Пример шаблона doT.js
        {{##def.macro:param:
    <div>{{=param.foo}}</div>
#}}

{{#def.macro:myvariable}}

    

2. Скомпилировать файлы .def, .dot, .jst, по указанному пути.

Пример компилятора шаблона doT.js
        var dots = require("dot").process({path: "./views"});
 dots.mytemplate({foo:"hello world"});

    

7. Walrus

Как пишут создатели, вдохновение при создании шаблонизатора они получали от handlebars и mustashe.

Как установить в проект

Просто скачайте и распакуйте все файлы репозитория в свой проект.

Как сделать простой шаблон

1. Возьмите свой шаблон и проанализируйте его.

Пример шаблона Walrus
        var template = Walrus.Parser.parse( $( '#my-template' ).html( ) );

    

2. Шаблон — это объект JavaScript. Он выводит некоторый текст.

Пример файла, который выводит шаблон на страницу
        let htmlGoodness = template.compile( { data : 'foo bar baz' } );

    

8. Templayed.js

Библиотека шаблонов размером 1806 байт.

Как установить в проект

Используйте тег <script src="path/to/templayed.js" type="text/javascript"></script> на вебстранице.

Или команду npm install templayed

Как сделать простой шаблон

Создать файл.

Пример шаблона Templayed
        template  = "<ul>{{#names}}<li>{{../fullName}}</li>{{/names}}</ul>",
variables = {
  names: [{firstName: "Paul", lastName: "Engel"}, {firstName: "Chunk", lastName: "Norris"}],
  fullName: function() {
    return this.lastName + ", " + this.firstName;
  }
};
templayed(template)(variables); //=> "<ul><li>Engel, Paul</li><li>Norris, Chunk</li></ul>";

    

9. ECT

Быстрый механизм шаблонов JavaScript со встроенным синтаксисом CoffeeScript.

Как установить в проект

Используйте команду npm install ect.

Как сделать простой шаблон

Создать файл

Пример шаблона ECT
        var ECT = require('ect');

var renderer = ECT({ root : {
				layout: '<html><head><title><%- @title %></title></head><body><% content %></body></html>',
				page: '<% extend "layout" %><p>Page content</p>'
				}
			});

var html = renderer.render('page', { title: 'Hello, World!' });
    

10. Pithy.js

Разработчики шаблонизатора назвали его языком для генерации HTML в JavaScript.

Как установить в проект

Скачайте репозиторий и распакуйте в свой проект.

Как сделать простой шаблон

1. Создать шаблон.

Пример файла шаблона Pithy.js
        html.div('#main', [
    html.h1(null, 'Hello, world!'),
    html.img({src: 'foo.jpg'})
]);

    

2. Создать скрипт.

Пример обработчика шаблона
        var html = require('pithy');
    

3. Добавить шаблон на страницу.

Пример результата работы шаблона
        <div id="main">
    <h1>Hello, world!</h1>
    <img src="foo.jpg"/>
</div>

    
***

Материалы по теме

Комментарии

 
09 августа 2023

Пользуюсь pug, очень нравится.

 

ВАКАНСИИ

Добавить вакансию
Senior DevOps Developer
Лимасол, по итогам собеседования
Senior MLE (SE)
от 5000 USD до 9000 USD

ЛУЧШИЕ СТАТЬИ ПО ТЕМЕ

LIVE >

Подпишись

на push-уведомления