Category: Feature

Node.js MVC Example Implementation with Xiao Blog Engine

Tags: Architecture Controller Feature Model Mvc Node.js View Template

Node.js MVC Example Implementation with Xiao Blog Engine

Have you ever browsed through the source code of an application and thought, "I have no clue how this thing is built or runs"? Or perhaps worse, been using an application and get to the point of having to do a tweak, only to realize it's a steaming pile of disorganized code? Moments like the previous ones can be avoided or mitigated by using software that implements design patterns.

A design pattern is a widely accepted best practice solution to a common problem. For example, to solve the problem of breaking down a monolithich UI wep application structure, the MVC (Model-View-Controller) design pattern can be implemented. The MVC pattern offers several benefits to a web application:

  • Converts a monolithic design into a loosely coupled set of MVC components. This allows for easier maintenance by localized debugging and feature extension.
  • Separates concerns across components, i.e., separates the code functionality into components with access restricted through an API. This can lead to easy-to-read project layouts where all Views are in a views directory structure and so on with the other components.
  • Allows for parallel work effort, e.g., a UI designer can work on the View while a software engineer works on the Controller.

The Xiao Blog engine acts as a Node.js MVC example implementation. In the next sections, you'll learn:

  • The components of the Xiao Blog Node.js + Express style MVC pattern.
  • How the Xiao Blog MVC pattern works.
  • The folder layout of the Xiao Blog MVC pattern implementation.

Node.js + Express MVC Implementation

The featured image of this post shows the Xiao Blog MVC pattern implementation components. Of course, the main MVC components are present, but also shown is the cast of supporting characters found in a Node.js + Express web application: Dispatcher, Route, and View Template Engine. In detail the components are:

  • Web Server: The Node.js + Express stack that listens for requests and returns responses. It acts as a container for the other components.
  • Dispatcher: This component processes incoming requests and determines which Express middleware route will be executed. It is part of Express.
  • Route: A defined Express middleware HTTP request path and verb. A definition example would be found in Xiao Blog's posts.routes.server.js file. Here, the Express web application (variable app) is defining the HTTP GET method on the path "/blog" to be a route handled by the blogIndex function of the posts controller:

      app.get('/blog', posts.blogIndex);
    
  • Controller: A JavaScript module that receives requests from the middleware dispatcher. It next will process the request data and retrieve any needed information from its model. Finally, when the controller has finished executing its logic, it will hand-off its data to the view template engine for rendering to the client.
  • Model: This represents the data structure that is persisted in the Mongo database. Xiao Blog uses the Mongoose JS module to provide a clean mapping from an abstract model to the actual raw data. Mongoose provides a large amount of boilerplate configuration and functionality like built-in type casting, validation, and query building.
  • View Template Engine: A view engine module that takes response data returned by the Controller and substitutes it into the View template. Xiao Blog uses the Swig template engine. Swig exposes a limited logic template API, which is considered a benefit. Templates that allow for large amounts of arbitrary logic can add the creeping blur of "separation of concerns" over time.
  • View: The view template for a particular request. The Xiao Blog templates are HTML files with placeholder markup for variable substitution. For example, the content for a blog post may be embedded in an HTML template as follows:

      <div class="content">
        {{post.content}}
      </div>
    

Xiao Blog MVC Architecture Layout

Xiao Blog has a "flat" architectural layout by functional area. Folders are used to separate the code for the main components. Files are named by the convention of "feature.component.server.js", where feature is typically a domain object like Post or User, and server is used to distinguish from future client-side components of the same type. The folder layout and naming conventions are based on those given by the MEAN.js fullstack javascript framework.

The figure below shows the folder layout of Xiao Blog. The top level folder is called "app", named after the Express application, with the component folders underneath it.

Xiao Blog Engine MVC Pattern Layout


Welcome

Welcome to the Xiao Blog engine website. Take a look around to find out how Xiao Blog can help you quickly get your blog up and running. Check out the code and use the Feature posts to walk through your own Node JS Express tutorial.

Connect with Us
Feature Posts
Xiao Blog Engine Markdown Editor

Category: Feature

Node.js MVC Example Implementation with Xiao Blog Engine

Category: Feature

The Markdown Editor: Markdown-to-HTML for Blog Posts

Category: Feature

Bootstrap Web App Design for Xiao Blog Engine

Category: Feature

Disqus Comment System Node.js Integration