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:
Fast, as most resources are only loaded once throughout the lifespan of application
Simplified and streamlined development
Less learning curve
Easy to debug with Chrome
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:
Database to hold the data
Server side REST API - to interact with DB
Client side framework to develop client side application
We can select any technology stack of our choice to build this. Examples are presented below:
Database – can be SQL server, Oracle, MySQL, Mongo DB
REST API - .NET Web API, Code Igniter, Java, Node JS & Express
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:
Folder Structure
Develop API
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.
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:
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:
Develop Angular application
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”.
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…
Talk to us about how we bring together 1:1 personalisation, deep Martech Expertise, CX & Demand Gen Strategy, Engagement Analytics & Cross-Channel Orchestration to drive award winning experiences that convert
Get in touch for a complimentary consultation or a demo today.
Free workshops, expert advice & demos- to help your realize value with Sitecore
RegisterParticipate in our event survey , meet us at our booth , get free giveaways & a chance to win an iPhone 11
Let’s go