Template engines:

A template engine enables you to use static template files in your application. At runtime, the template engine replaces variables in a template file with actual values, and transforms the template into an HTML file sent to the client. This approach makes it easier to design an HTML page.

Some popular template engines that work with Express are Pug, Mustache, and EJS. The

Express application generator uses Jade as its default, but it also supports several others.

To render template files, set the followingapplication setting properties, set inapp.jsin the default app created by the generator:

  • views , the directory where the template files are located. Eg: app.set('views', './views') . This defaults to the views directory in the application root directory.
  • view engine , the template engine to use. For example, to use the Pug template engine: app.set('view engine', 'pug') .

Then install the corresponding template engine npm package; for example to install Pug:

$ npm install pug --save

After the view engine is set, you don’t have to specify the engine or load the template engine module in your app; Express loads the module internally, as shown below (for the above example).

app.set('view engine','pug')

Create a Pug template file namedindex.pugin theviewsdirectory, with the following content:

html
  head
    title= title
  body
    h1= message

Then create a route to render theindex.pugfile. If theview engineproperty is not set, you must specify the extension of theviewfile. Otherwise, you can omit it.

app.get('/',function(req,res){
res.render('index',{title:'Hey',message:'Hello there!'})}
)

When you make a request to the home page, theindex.pugfile will be rendered as HTML.

Note: The view engine cache does not cache the contents of the template’s output, only the underlying template itself. The view is still re-rendered with every request even with the cache is on.

To learn more about how template engines work in Express, see:“Developing template engines for Express”.

Dust

Dust.js comes from LinkedIn — a fully asynchronous Javascript templating system/engine for the browser and server. Dust, while not completely logic-less, does involve a lot less logic than your average templating system. With Dust you’re moving all your logical parts of the code towards a simple data model, at which point you’re able to execute functions within that model and call it forth by using the template system itself, which then grants you full control over how your templates react in different situations.

doT

doT.js is small, efficient, fast and lightweight templating engine that supports itself (no dependancies), and works great with Node.js and native Browser integration.

Handlebars

Handlebars is a close successor to Mustache, and both can actually be used at the same time, with the ability to swap out tags where necessary. The only difference is that Handlebars is more focused on helping developers to create semantic templates, without having to involve all the confusion and time consumption. You can easilytry out Handlebars yourself(there’s also an option to try Mustache on the same page) and see for yourself whether this is the type of templating engine you’re looking for.

EJS

The last of the most popular JavaScript template engines on our list is going to be Embedded JavaScript Templates (EJS) — a lightweight solution towards creating HTML markup with simple JavaScript code. Worry not about organizing your stuff in the right manner, it’s just straight JavaScript all the way. Fast code execution, ease of debugging makes this the perfect templating engine for those who want to do HTML work with their favorite language, presumably JavaScript.

Underscore

Underscore, another highly reputable templating engine, is an external JavaScript library that enables developers to take advantage of functional helpers that keep the code base intact. Underscore solves the problem of having to open your code editor and not knowing where to start. Underscore provides over 100 functions that support both your favorite workaday functional helpers: map, filter, invoke — as well as more specialized goodies: function binding, javascript templating, creating quick indexes, deep equality testing, and so on.

Pug

When people say Python is like writing in English, they underestimate the magnitude of that statement when it comes to Pug syntax programming. The Pug template engine (for Node.js) is literally enabling developers to write code that looks like paragraphs straight out of a book. Not only does this improve the overall code productivity, it can help to streamline the work on a project that consists of multiple team members.

Choosing the Best Templating Engine for JavaScript

When choosing the right templating engine for our projects, we should take into consideration the exact type of work we are looking to do, and how much of the project is actually going to have to be templated, and what kind of solution would work out for you individually in both long-term and short-term.

results matching ""

    No results matching ""