Full stack Web Development

Traditional Web Application vs Single Page Application

Traditional Web application vs Single Page Application (SPA) with Angular 2:

In this blog, we would be discussing the time loading difference between a traditional web application vs Single Page Application(SPA) with Angular 2.

Problems with the Traditional Web Application
prob

  • Traditional Web Application:

Before we go ahead let’s first understand the working of a traditional web application.
cleint1

  • In the above pictorial representation, we can see that the client on receiving the request from user sends the request to the server and then the server reciprocates in the form of HTML code which in turn the browser renders on the screen.
  • The above scenario can be visualized below in a better way with multiple requests sent by users to clients and vice versa.

client1
client2
client4

  • The Problem with the Above Scenario:
  1. We can see the biggest problem here is that we give a lot of requests to the server. We probably have to query the server to get back new data to the user.
  2. With this approach, we spend a lot of time sending requests and getting responses because data has to travel through the internet and this, in turn, will lead to a slow feeling of web pages.
  • Solution for Above Problem:

Here comes the solution with SPA(Single page application)

  • So to bring the app like feeling to the browser where we don’t have to load new pages upon each action.We will use the concept of “Single Page Application”(SPA).
  • Single Page Application
  • In a single page application, user click on the link and the request is handled by the client itself
  • but there is some initial interaction between client and server.

client55
client6

  • Benefits
  • In the SPA(Single Page Application), we can save many requests because we don’t need to load the service operations again and again.
  • As we can see in the above pictorial representation, request to access about page of enalrageview.com/about information has not been sent to the server and is being handled by the client itself.
  • So in the above case information retrieval from the website is relatively faster because we don’t have to send data over the Internet and the best part is that we don’t have to wait for the responses.

Note: In some exceptional cases, we might need some data from the server or some business logic which can only be stored on the servers. i.e.,
 
client7

  • As we can see in the above pictorial representation where account page of enalargeview.com/accounthas been accessed by sending a request to the server.
  • If we need some kind of data from the server, we will do it asynchronously which means we still render the page instantly to the user and we will wait for new data to arrive.
  • UsingAngular 2 in Single Page Application

Angular 2
spa

  • Angular 2 handles incoming user requests or the events which are being sent through the URL changes or mouse events issued by the user.
  • Angular 2 then parses the URL to route appropriately.
  • In Angular 2 router, no request is necessarily sent to the server and finally, itrenders the new page by changing the ports of the dom which needs to be changed all that is done by the directives, components, Databinding (Major parts of Angular2 App.)

Conclusion: Here we discussed the benefits of SPA(Single Page Application), and how Angular2 framework is useful for the same. If you wish to collaborate while the project is still young, feel free to comment below.
Keep visiting www.acadgild.com for more updates on the courses.NodeJS course details

One Comment

  1. Pingback: What are the benefits of a Single Page App? - Bytelion

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Related Articles

Close
Close