Choose Your Own Adventure with Node.js View Engines
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.
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
```csharp
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](https://github.com/ericf/express3-handlebars) **package is your friend if you like this view engine:
```xml
<!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>
```csharp
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](https://github.com/RandomEtc/ejs-locals)**. 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**](https://github.com/kirbysayshi/vash)** **as a Razor-like syntax (NPM Package Name: v[ash](https://github.com/kirbysayshi/vash)). The big difference is that the language is JavaScript instead of managed code looking Razor, but it’s pretty close:
```xml
<!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>
```csharp
<font color="#333333">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!</font>
<font color="#333333">What do you think?</font>
<font color="#333333"></font>
