122

Jade versus EJS, what are the pros and cons of each and what purposes are each designed for?

Are there any other express-compatible template engines that are good and why?

fretje
  • 8,322
  • 2
  • 49
  • 61
HaoQi Li
  • 11,970
  • 14
  • 58
  • 77

2 Answers2

181

I used Jade before. The nice thing about Jade is that you have a shorter syntax which means you can type faster. The block in Jade is pretty powerful which can help me a lot when dealing with complex HTML code.

On the other hand, it is hard to do some simple stuff in Jade, thing like adding classes into a DIV based on a simple if condition. I need to put something like this 

- if (isAdmin)
  div.admin.user
- else
  div.user

Jade also don't differentiate between the tags and the variables which make the code very confusing (at least for me)

a(href='/user/' + user.id)= user.name

Jade is also not designer-friendly. My designer friends often give me HTML and CSS (They switched to LESS recently but still want to use HTML), and for that reason if I use Jade I need to convert HTML to Jade. Also in Jade, we need to use indentations, so if your HTML structure gets complicated, your code will look horrible (especially tables). Sometimes, I don't even know what level I am at

table
  thead
    tr
      td
        a
          img
    tr
      td
  tbody
    tr
      td

Recently, I made a switch to EJS and I am happy with it so far. It is very close to pure HTML and use the same syntax as that of the frontend template engine I am using (Underscore template). I must say that everything is easier with EJS. I don't have to do all the conversion when receiving HTML templates from my designer friend. All I have to do is to replace the dynamic parts with variables passed from ExpressJS. Stuff that make me crazy when using Jade are solved in EJS

<div class="<%= isAdmin? 'admin': '' %> user"></div>

And I can know what is what with EJS 

<a href="/user/<%= user.id %>"><%= user.name %></a>

If you miss the short syntax of Jade (like me) you can combine Zen-Coding and EJS which can help you speed up the progress in general. About performance, I don't see any differences

However, EJS is not as powerful as Jade, it doesn't have blocks by default (this guy implemented a block feature for EJS https://github.com/RandomEtc/ejs-locals)

So, it is totally depend on you to pick whatever makes you comfortable. But if you are going to use another template engine for the frontend like me, it's better if you use the same thing for both sides

Update 16 December 2013: Recently, I have switched from EJS to Swig (which has similar concept as that of Jinja2 in Python world). The main reason is the lack of block in EJS even with the help of ejs-locals. Swig is also using plain HTML for templates and a lot of cool features that a template engine should have for example filters and tags which EJS doesn't have

Cœur
  • 37,241
  • 25
  • 195
  • 267
Tan Nguyen
  • 3,354
  • 3
  • 21
  • 18
  • 1
    Regarding not knowing what level you are on, it should be mentioned jade has new support for multiple tags on a single line. From Jade's documentation, 'To save space, jade provides an inline syntax for nested tags.'a: img' is equivalent to ''. – Verdi Erel Ergün Sep 02 '13 at 22:13
  • 1
    I did try `Jade` one or two years ago. Perhaps it is getting better now. However regrading my first point, it wont be easy to get around that – Tan Nguyen Oct 02 '13 at 20:50
  • 1
    Have you seen [html2jade](http://html2jade.com/)? – beatgammit Oct 24 '13 at 02:17
  • 4
    I did you that tool, but still, every time the designer gives something to me, I need to do conversion (that is annoying) – Tan Nguyen Oct 25 '13 at 07:29
  • 1
    I just wanted to note (regarding your first point about conditionals) that you may be able to use ternary syntax for this use case. See this stack overflow question: http://stackoverflow.com/questions/9488029/how-does-one-add-a-conditional-inside-of-a-link-in-jade – Rob Gibbons Oct 29 '13 at 15:48
  • Yes, at the time I used Jade and ran into that problem, the above was the only solution that I can find. I am not sure if I did not look hard enough or it was not there at that time – Tan Nguyen Nov 22 '13 at 02:05
  • Well explained thank you :) – Bill May 20 '14 at 06:01
  • @TanNguyen how does that **if** logic work on the client side? I thought that sort of logic would have to be in js? – FutuToad Jun 13 '14 at 10:06
  • +1 [Swig](http://paularmstrong.github.io/swig/docs/#inheritance) is really cool and needs to be known. Amazing [template inheritance](http://paularmstrong.github.io/swig/docs/#inheritance). Usable [with Koa](https://www.npmjs.com/package/koa-swig). – Yves M. May 14 '15 at 16:02
  • The if(isAdmin) conditional can be done inline: `div.user(class="#{isAdmin?'admin':''}")` – Dom Vinyard Aug 16 '16 at 12:57
  • Does this answer still hold in 2018 anyone? – PirateApp Dec 04 '17 at 13:40
  • 1
    @PirateApp In 2018 people use React and Vue – Stan Mots Mar 07 '18 at 22:51
  • 1
    @PirateApp it's still applicable if you happen to use Jade or EJS in your projects but again, this answer was posted 2 years ago, a lot of things have changed, some of my points might not be valid anymore :) – Tan Nguyen Mar 08 '18 at 23:50
  • I am still using EJS and haven't tried PUH/JADE for now. But I noticed there are several html/css to jade converter. I will have a look into Swig. I am a bit overwhelmed of the many choices you got for view engines. – Tom-Oliver Heidel Aug 07 '18 at 01:10
45

I wouldn't say that one is better than the other. They are different, that's for sure, but "better" is quite relative term.

I prefer EJS because I think HTML is not too bad, plus it allows me to work with others without them having to learn Jade.

However, Jade is rather clean and makes for some neat code in your views.

Pick whatever you feel more comfortable.

Hector Correa
  • 26,290
  • 8
  • 57
  • 73