Whats the best view engine for node.js (ejs , jade or handlebars)?

1

The title says it all. I saw there is a couple of template engines for node.js I am little confused which one I should learn or use. Share your experience or suggestion.

2

Express uses jade (renamed to pug) so Iā€™ve seen it most often, but Iā€™m not sure there is a ā€œbestā€. Itā€™s sort of like CSS where there are many option (Sass, SCSS, compass, etc.) and they offer different features but itā€™s up to you and your preferences. You could use regular olā€™ HTML if you wanted to.

1 Like
3

oh i though pug and jade are different .thanks for the response :slight_smile:

I didā€™nt get this part

4

I mean you could use html5 (plain html; not a view engine) with node if you really wanted to.

1 Like
5

It might be a noob question but is there any way to inject data in regular HTML without using any template engine

1 Like
6

No. Anything that injects code into HTML would be a templating engine by definition.

3 Likes
7

Yes, you can serve html from within pure javascript but the syntax is horrible. If I remember right, you have to wrap the html tags in quotes. Thatā€™s what makes templating engines so attractive. Personally I like handlebars, because it is so simple - just write an ordinary html file and put your javascript and variables betweeen {{ }}.

4 Likes
8

I loved EJS as it was really simple to learn ā€¦ You can use express with EJS or jade or even handle bars!! EJS was so similar to html so I found it easy . Python users would find jade easy I guess!

1 Like
9

Love ejs, hate pug (jade) - white space sensitivity is hell.

4 Likes
10

Yes you can send data to the fronend by using just HTML and JavaScript without a templating language but its hard and I only recommend it if ur 1337 like me and can code it.

1 Like
11

I think that it depends on what want to do with your content.
While using EJS I could manipulate it much better, because you are actually use all Javascript methods (well I think pretty much all of them).
Handlebars is really simple and honestly more readable than EJS in my opinion, but you cannot write complex logic without making helpers.

Never used jade(pug) before though so canā€™t commend on that.

1 Like
12

I have learnt React recently, having had a quick look at many alternatives. React uses ā€˜JSXā€™, which is, in a way, the reverse of a templating engine. It allows you to put (almost) any XML/XHTML straight into your JavaScript.

I think this works well. It is easy to put code inside the markup, and markup inside the code. This gives you full flexibility as to which bits you generate statically and which bits dynamically.

Iā€™m afraid I cannot really say whether other mechanisms are better or worse. It may depend on your preference, as well as the characteristics of the application.

If you are comparing, I suggest you take a look at Vue, as well as the others.

2 Likes
13

I initially loved EJS and hated React, but React is growing on me, and some of my more complicated EJS was borderline unreadable. I havenā€™t used Pug/Jade, Handlebars etc

With EJS I found myself mixing lots of logic with rendered output. With React, while you do mix JS and HTML in the same file, they are kept seperate enough that itā€™s easier to reason about.

14

Handlebars for me. It was in the first video about node I watched so I probably like it for that reason.

1 Like
15

I didnā€™t like the complexity of many of the template engines I found, and I wanted to write in simple HTML with options and basic conditionals, so I made my own at https://www.npmjs.com/package/squirrelly.

You could make a basic one yourself using this tutorial, or you could use mine :slight_smile:

16

I am a beginner, I feel that ejs is easier for me to learn.

Would like to know what are the differences in features/functionality between ejs and pug.

17

I love pug. It makes everything look so pretty.

1 Like
18

Iā€™ve been using ejs for my express / (really basic) react projects and itā€™s simple enough but something like https://github.com/reactjs/express-react-views gives more features, I might switch over

1 Like
19

Pug is, I agree, harder to learn because it is not as similar to HTML as EJS is.

They serve pretty much the same purpose and achieve the same things. The basic features of both are adding scripts into your code and includes which help you organize. Pug has additional features which help you write HTML more efficiently such as mixins. Personally, I found EJS to be simpler to learn, but once I learned Pug, I like it a lot more as it has better functionality for me. The syntax of EJS can get cluttered very quick with all the percent signs, while pug is very readable, more pretty, and much faster to write than ordinary HTML.

Compare and contrast these two pieces of code which achieve about the same thing:

// conditional example
unless user.isAnonymous
  p You're logged in as #{user.name}

// iteration example
ul
  each val in [1, 2, 3, 4, 5]
    li= val

vs.

// conditional example
<% if (!user.isAnonymous) { %>
  <p>You're logged in as <%= user.name %></p>
<% } %>

// iteration example
<ul>
  <% numberArray.forEach(function(val){ %>
    <%= val %>
  <% }); %>
</ul>

I find the pug much more attractive and easier to write.

3 Likes
20

Thanks for the comparison :+1: