Choose Your Own Adventure with Node.js View Engines

  • Mar 24, 2014 at 8:55 PM
  • Shawn Wildermuth
  • 9 Comments

javascriptAs some of you know, I’ve been delving into Node.js for a new Pluralsight course that is coming out soon. One of the interesting aspects to me is the idea of server-side view engines. As an ASP.NET (and ASP before that) guy, I’ve been using server-side view engines for a long time…not that we always called them that.

Most Node.js templates out there (including the Express.js application template that ships with the Node.js Tools for Visual Studio) includes the Jade View Engine.

The Popular One

Jade (NPM Package Name: jade) is interesting to some because it’s very terse and (in theory is quicker to write). It’s also similar to the default view engine (AFAIK) for Ruby on Rails so that is going to make it pretty popular. Here is the syntax:

doctype
html
  head
    title= title
  body
    h1= title
    p This is an express app!
    footer This is the footer

This terseness really doesn’t appeal to me. I am all for saving keystrokes, but this seems like you’re saving it at the expense of clarity. This is also an issue if I’m using an external resource to do the mock-ups that doesn’t know Jade. For me I want something more comfortable and familiar.

I love the fact that Node.js (and more notably Express.js) do not care about what view engine I use…or if I use one. So I can plug in one of the alternatives with little work. I know that ASP.NET can do this too, but it’s never been that clear how that works.

For Ember Lovers (et al.)

If you’ve been doing Ember or other client-side development, you’re probably already familiar with the mustache or handle-bars view engines. The unfortunately named express3-handlebars package is your friend if you like this view engine:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>{{ title }}</title>
  </head>
  <body>
    <div>
      <h1>{{ title  }}</h1>
      <p>Welcome to {{ title }}</p>
    </div>
  </body>
</html>

Classic ASP or ASP.NET Web Forms Style

Since I am an ASP.NET guy, there are a few engines that I looked at. I started with Embedded JavaScript (or EJS for short – NPM Package Name: ejs). It looks and feels like classic ASP or ASP.NET Web Forms syntax:

<!doctype html>
<html>
  <head>
    <title><%- title %></title>
  </head>
  <body>
    <div>
      <div>
        <h1><%- title  %></h1>
        <p>Welcome to <%- title %></p>
      </div>
    </div>
  </body>
</html>

While this isn’t prefect, it feels close to the syntax I did for years. The only nit I have with EJS is that that it requires you have a separate module for handling layout/master pages called ejs-local.  This library is unmaintained at the moment so use at your own risk. Though with this package, it works reasonably well.

Razor-style

Of course, I’ve been doing ASP.NET MVC for quite a while now so I am most comfortable. I ran into the Vash as a Razor-like syntax (NPM Package Name: vash). The big difference is that the language is JavaScript instead of managed code looking Razor, but it’s pretty close:

<!doctype html>
<html>
  <head>
    <title>@model.title</title>
  </head>
  <body>
    <div class="page-header">
      <h1>@model.title</h1>
      <p>Welcome to the @model.title</p>
    </div>
  </body>
</html>

What’s not to like. You can mix and match your view engine of choice that best fits in with your skillset and predilections. THere are many many more if you have other requirements. Go take a look and remember, like any open-source project, be aware of how well they are maintained before betting on them!

What do you think?

 

Comments

Gravatar

John Papa Tuesday, March 25, 2014

I'm with you on Jade. I realize its is super popular and I do use it on some projects as folks on the team love it, but I find the terseness less readable and a bit overkill. I don't find writing HTML to be problematic especially with emmet and zen coding out there. That said, node and express make it simple to change the view engine as you point out!

Gravatar

Richard Sawyer Saturday, April 12, 2014

I've just recently discovered Jade and I love the terseness of it. It maximally removes all clutter when reading. I find it very refreshing and natural especially compared to older view template languages like razor. Nothing but what I need to see.

Gravatar

Shawn Wildermuth Saturday, April 12, 2014

Richard,

That's what a lot people say, but for me I find when I work with a designer, converting HTML to Jade is pointlessly complex.

Gravatar

Ibrahim Amin Wednesday, July 30, 2014

Can i combine those (mongoDB, ExpressJS, NodeJS, DurandalJS) together?

Gravatar

Shawn Wildermuth Wednesday, July 30, 2014

Ibrahim,

I'd expect you can. Haven't used DurandalJS yet so I can't vouch but I think so.

Gravatar

Ibrahim Amin Sunday, August 3, 2014

Mr.Wildermuth,

Thanks for your reply, I'll definitely try to test them together.

Gravatar

Eric Friday, September 12, 2014

do you know how to get the syntax editor to deal with vash in the same way it does razor? since it's similar, i'd like it to highlight/color/render the same way in the visual studio text editor. i'm using visual studio 2013

Gravatar

Shawn Wildermuth Friday, September 12, 2014

Eric,

There isn't any Vash syntax highlighting support, but you can turn on HTML highlighting by opening the files with the HTML Editor (right click the file and pick "Open with..."

Gravatar

Alvaro Friday, September 19, 2014

You forgot to mention Swig, which seems to be quite well rated in github.


Leave a Comment

*
*
*