Choose Your Own Adventure with Node.js View Engines
As 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.
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>Choose Your Own Adventure with Node.js View Engines </title> </head> <body> <div> <h1>Choose Your Own Adventure with Node.js View Engines </h1> <p>Welcome to Choose Your Own Adventure with Node.js View Engines </p> </div> </body> </html>
Classic ASP or ASP.NET Web Forms Style
<!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.
<!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?