Listing (feature)

I applied my HTTP knowledge in Nody by building a static file server with a little help from Express.

I created a server with some basic routes (home, about, login and error). I have used the template engine pug to dynamically render data.

A template engine enables you to use static template files in your application. At runtime, the template engine replaces variables in a template file with actual values, and transforms the template into an HTML file sent to the client. This approach makes it easier to design an HTML page.

Some other popular template engines:

Pug

This project was formerly known as "Jade." However, it has been revealed to us that "Jade" is a registered trademark, and as a result a rename is needed. After some discussion among the maintainers, "Pug" has been chosen as the new name for this project. The next major version will carry "pug" as the package name.

Pug is a clean, whitespace sensitive syntax for writing html.

doctype html
html(lang="en")
  head
    title= pageTitle
    script(type='text/javascript').
      if (foo) bar(1 + 5)
  body
    h1 Pug - node template engine
    #container.col
      if youAreUsingPug
        p You are amazing
      else
        p Get on it!
      p.
        Pug is a terse and simple templating language with a
        strong focus on performance and powerful features.

Becomes:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Pug</title>
    <script type="text/javascript">
      if (foo) bar(1 + 5)
    </script> 
  </head>
  <body>
    <h1>Pug - node template engine</h1>
    <div id="container" class="col">
      <p>You are amazing</p>
      <p>Pug is a terse and simple templating language with a strong focus on performance and powerful features.</p>
    </div>
  </body>
</html>

As you can see it’s much cleaner and easy to read than an ordinary HTML document, there are no closing tags, Pug is handling this, everything is indented and you scan the file much quicker. Also by using Pug we can ensure that our HTML is well-formed and valid.

The compiler throws build errors if the indention in your file isn’t correct. As such it also acts as an error prevention tool for making mistakes in the Front-end.

When using modern CSS frameworks like Bootstrap and Foundation, most of the development becomes entirely about producing HTML, which brings out the power of Pug.

Handlebars

Handlebars.js is an extension to the Mustache templating language. Handlebars.js and Mustache are both logicless templating languages that keep the view and the code separated like we all know they should be.

In general, the syntax of Handlebars.js templates is a superset of Mustache templates. Handlebars allows templates to be precompiled and included as javascript code rather than the handlebars template allowing for faster startup time.

<div class="entry">
  <h1>{{title}}</h1>
  <div class="body">
    {{body}}
  </div>
</div>

There are a few Mustache behaviors that Handlebars does not implement.

Handlebars deviates from Mustache slightly in that it does not perform recursive lookup by default. The compile time compat flag must be set to enable this functionality. Users should note that there is a performance cost for enabling this flag. The exact cost varies by template, but it's recommended that performance sensitive operations should avoid this mode and instead opt for explicit path references.
The optional Mustache-style lambdas are not supported. Instead Handlebars provides its own lambda resolution that follows the behaviors of helpers.
Alternative delimiters are not supported.

EJS

EJS, embedded javascript, is a templating language. EJS combines data and a template to produce HTML. One of the most important features in EJS is its use of partials. Partials allow you to define something once, and then apply it to any page in your application.

EJS has a lot of options and features, for example:

Control flow with <% %>
Client-side support
Static caching of templates
Custom delimiters (e.g., use <? ?> instead of <% %>

<% if (user) { %>
  <h2><%= user.name %></h2>
<% } %>

Conclusion

Handlebars and ejs are the most downloaded template engines (Handlebar has more than 7 million weekly downloads). Nevertheless, I have chosen to use Pug as my template engine because according to some websites like slant.co ('What are the best JavaScript templating engines?') Pug is the best template engine. I thought it would be easier because Pug has no 'complicated characters'. Pug is really sensitive for whitespace, so it's sometimes a little difficult to see where an error comes from.

Express

Express is a minimal and flexible Node.js web application framework that provides a robust set of features to develop web and mobile applications. It facilitates the rapid development of Node based Web applications. Following are some of the core features of Express framework:

Allows to set up middlewares to respond to HTTP Requests.
Defines a routing table which is used to perform different actions based on HTTP Method and URL.
Allows to dynamically render HTML Pages based on passing arguments to templates.

Request and response

Express application uses a callback function whose parameters are request and response objects.

Request Object − The request object represents the HTTP request and has properties for the request query string, parameters, body, HTTP headers, and so on.
Response Object − The response object represents the HTTP response that an Express app sends when it gets an HTTP request.

You can print req and res objects which provide a lot of information related to HTTP request and response including cookies, sessions, URL, etc.

Routing

Routing refers to determining how an application responds to a client request to a particular endpoint, which is a URI (or path) and a specific HTTP request method (GET, POST, and so on)