Node.js template showdown: EJS compared

Matthew Nuzum —  — 1 Comment

EJS “cleans the HTML out of client-side templates.” From that description, you’ll quickly realize that EJS was at first a client-side template library. It has been repurposed successfully to also be a good server-side client library for Node.js.

In my opinion, using the word “clean” in the same sentence as EJS is a bit misleading. It does have the benefit of being included as part of the Express library for Node.js, which makes it easy to get started with, however like some other libraries, it lost functionality when Express made the jump to 3.0.

By the way, this is one part of a 5 piece series, so if you want to explore other options, don’t forget to visit the series start where I explain the biases and summary information and link to all of the tutorials.

In order to get a feel I wrote a quick application. It is based on Bootstrap and is rendered entirely server side. You can download my source code for the example app on Github.

Let’s start by looking at an example view (view on Github):

<%- include head.ejs %>

  <% if(data) { %>
    <div class="container">
      <h1> <%= title %> </h1>
        <% data.forEach(function(person){ %>
            <li title="job: <%= person.job %> status: <%= person.status %>">
          	<%= %>
        <% }); %>
  <% } %>

<%- include foot.ejs %>

As you can see from the example, the template is HTML intermingled with javascript. It looks a lot like PHP or old ASP, and in my opinion, it borrows the worst aspects of them. For example, notice the if and for statements. The language not only allows javascript logic in template, it actually requires it.

While it doesn’t support layouts, it does allow you to use the “include” syntax to get partials support, and with Node.js and Express this was easy to do.

If you’ve used Sails.js then you’ve probably used EJS since it is the default template language. As a matter of fact, I’ve tried and it’s difficult (though possible) to use other template options.

Definitely check out the code for a working example that you can experiment with and extend.

Here is a run-down of the criteria I considered when doing my evaluation:

  • Built into Express? Yes (good)
  • Allows logic in templates? Yes (neutral)
  • Encourages logic in templates? Yes (negative)
  • Reusable client side? Yes (positive)
  • Allows bootstrap integration? Yes (good)
  • IDE support? Webstorm = yes, Sublime = with plugin
  • Partials support? No (negative)
  • Other notes: Fair documentation

Bottom line, would I recommend it: No. (unless you are using sails.js)

I’ve also done the same comparison on Jade, JSHTML, Mustache and Handlebars and the series overview.

If you find this helpful, please share on your favorite social network! If you have suggestions or feedback, please leave a comment.

If it helped, please share!Tweet about this on TwitterShare on FacebookShare on LinkedInShare on Google+

Matthew Nuzum

Posts Twitter Facebook

Web guy, big thinker, loves to talk and write. Front end web, mobile and UX developer for John Deere ISG. My projects: @dsmwebgeeks @tekrs @squaretap ✝
  • tomByrer

    Looks like the same markup as Underscore/Lo-Dash (used in Grunt, Backbone, etc).