Building SPA application using MEAN Stack

What is SPA?

A Single-Page Application (SPA) architecture is where the web application replaces content of the main page for subsequent requests. In this type of architecture, markup and data is requested independently and pages are rendered in the browser.

In SPA, instead of sending and receiving complete html page as request and response, the json data is sent and received from server. This reduces the request – response size, making it faster for improving the client experience.

Traditional Web Application Architecture:

In this section, we will look at how a traditional web application architecture looks like:

SPA Application architecture:

Advantages of SPA:

1. Fast, as most resources are only loaded once throughout the lifespan of application

2. Simplified and streamlined development

3. Less learning curve

4. Easy to debug with Chrome

5. Easier to make a mobile application as the backend (Web API) can be reused

Technology Stack:

The SPA applications can be developed using various technologies. The main things we need to develop in SPA are:

1. Database to hold the data

2. Server side REST API - to interact with DB

3. Client side framework to develop client side application

We can select any technology stack of our choice to build this. Examples are presented below:

1. Database – can be SQL server, Oracle, MySQL, Mongo DB

2. REST API - .NET Web API, Code Igniter, Java, Node JS & Express

3. Client side application – REACT JS / Angular

Now, given a choice of all these technologies why we are going ahead with MEAN stack?

Let’s first understand what is MEAN Stack?

MEAN stack is an evolving trend for the full-stack JavaScript development. MEAN stands for:

MongoDB:

• No SQL database

• Uses JSON documents for the storing data

ExpressJS:

• HTTP server framework

• Gives functionalities such as cookies, routes, folder structure for your REST API

Angular:

• Most widely used client side framework in today’s industry

• Developed using TypeScript and coded with TypeScript

• Efficient for mobile development

Node.js:

• Server side JavaScript framework for building scalable and fast web applications/ APIs

• Lightweight and perfect for the real-time applications

Reasons for preferring MEAN Stack:

• All the technologies involved are Open Source

• All the frameworks involved are based on JavaScript

• MVC architecture supported

• Less learning curve

How to develop SPA:

To develop SPA, there are simple steps that can be easily performed by an individual. All the steps with visuals are presented below:

1. Folder Structure

   

2. Develop API

   1. Create package.json

      All the NodeJS application starts by creating package.json file. So, create a package.json file and add the code mentioed below:

      You can also run the command “npm init” to generate the package.json file. Just run the command and answer the questions getting asked, it will auto generate the file for you.

      

   2. Install the required packages:

      You just need to go to the location where the package.json resides, open console, and fire the command:

      npm install

      This will install the dependencies mentioned in package.json file.

      A folder called “node_modules” will be created to hold all dependency related files:

   3. Create server.js

      You need to create a “server.js” file to hold all the configurations specific to api. Refer below server.js file that does the initializations and points api URLs to below path:

      http://localhost:3001/api

      

      Create separate file for each model route. Example: we created a folder “routes” and created contact_api.js to hold all methods related to contact api:

      

      

      

3. Develop Angular application

   1. Create client side html

      We will create a client side application, SPA, which will trigger the above created API for interacting with mongo DB.

      

      The controller can be stored in separate file. Normally we keep the controllers in a folder named “Controllers”.

   2. Create controllers

      Here we are using function controller approach:

      

      If we now access the index.html page, we are going to get the structure shown below:

      

      You can enter details and click “Add Contact”:

      

      User gets added:

      

      Click on Edit, add contact number and click on “Update”:

      

      Record gets updated:

      

      Delete particular record, and it gets removed:

      

Creating SPA using MEAN stack is beneficial because of multiple advantages such as autocomplete, easy navigation, faster development, and much more. We hope you found this blog informative to start creating SPA.

Happy Coding .. Happy Learning…