15 template engines for front-end development

The number of JS libraries is not decreasing in any way; on the contrary, it grows every day. When we get to JS applications, templates are better choices than full libraries because it leads to a cleaner base code and a better process for working with them .

Not so long ago, I wrote that you could try writing your library when the time comes. Template engines require some great skills and understanding of the language with which you work, so it is better to rely on any template engine from the list below.


Their list can be found on Wikipedia., the engines for different programming languages ​​for the web are perfectly compared there, but they really do not focus on one language, so I would like to see how many engines can be listed for Javascript.

If you are developing in Javascript, then you will learn a number of engines, but you can learn about some new ones. I will be happy to continue this list together, and I hope that it will delight you.

ICanHaz.js

A very simple library for working with Mustache templates, another, faster engine. With it, you can define template fragments in script tags with type = "text / html" and call them via id, with validation.

Hogan.js

Twitter aims to be part of the open source community. Hogan.js can be used as a linker for intermediate templates, to compile them in advance so that the browser processes these templates dynamically.

Contains the same as Mustache, but makes it faster and more efficient.

Handlebars.js

Handlebars is a Mustache templating extension created by Chris Wanstrath. These template engines - have languages ​​that are not overloaded with logic, sharing code and presentation, which coincide with our best expectations.

mustache.js

This is the most popular template engine in the world now, and almost every library in this category somehow or other flows and ideologically echoes it. The documentation is very easy to read, understand, and highly recommended to use - it runs great in many programming languages, which provides a level of popularity for it above the average.

Transparency

Transparency is a client-based templating engine that binds data in the DOM. It is written on it simply, clearly, simple native HTML and the same JS. There is no need to learn the syntax of the templates, everything is obvious and easy to use.

doT.js

Good for the Node.js community . Fast, small, without dependencies. Heroically achieved a balance of speed and flexibility. (Largely inherited the qualities of the Underscore.js template engine (component of this library is trans.)) .

Walrus

In modern web applications, a lot of presentation logic is involved. This logic does not apply to application code and models; it is a presentation layer. Template language is a good place for it.

This goal is so concentrated that the speed of template is not a priority; rather, Walrus is focused on facilitating the development of web application templates .

chibi.js

Chibi provides everything to save traffic and time for displaying a template, a small and light library that will help to better template the application. Focuses more on CSS instead of using animations. (Literal "water" of the author - trans.)

templayed.js

This is the smallest template engine you come across, guaranteed ( Nano - perev.) . It is built on the basis of Mustache, easy to use and understand. The site has a large demo in which you can run and test the code.

Ect

Like templayed, ECT also has demo installation pages on the site with which you can "play around" and watch live results. It is made for speed, and claims to be the fastest template engine for JS (built on Coffeescript). Compatible with Node.js and has clear syntax. Github has benchmarks and unit tests showing the effectiveness of this library.

Pithy.js

There is an internal DSL for generating HTML in JavaScript. This is great for small front-end projects, but not recommended for heavy HTML pages.

T.js

T.js uses a simple Javascript data structure to represent HTML / XML data.

Nunjucks

Created in Mozilla, Nunjucks is made for those who need performance and flexibility because of the ability to expand the user library of plugins and functions.

Jade

Jade is designed primarily for server templates in node.js, but it can work in many other environments. It is made only for XML-like documents (HTML, RSS, ...), so do not use it for simple text, markdown, CSS and similar documents.

Dust.js

Dust extends Mustache and offers high-quality execution compared to other solutions on this list. Contains a very simple and intuitive API.

Javascript template engines

I did not try to give examples, because many links to official pages contain demos.

I hope that you were able to discover new options for your next project. I am sure that many alternatives are not mentioned, but the use of the above is felt most.

UPD : Commentators on the original article added :

• " 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 : mentioned in the comments on this article :

• Twig - JS implementation of the Twig Templating Language
  
• EJS Embedded JavaScript templates for node