Old and new ways of data flow in SPA

All websites go through the following steps:

1. Request a web page from the server.
2. Authenticate and show the Dashboard UI.
3. Allow the user to modify and save.
4. Request as many web pages from the server as needed to show inpidual pages on the site.

But in the SPA, the flow is quite different:

1. Request the HTML template/s to the browser in one single go.
2. Then, query the JSON REST API to fill a model (data object).
3. Adjust the UI according to the data in the model (JSON).
4. When users modify the UI, the model (data object) should change automatically. For example, in AngularJS, it is possible with two-way data binding. Finally, make REST API calls to notify the server about changes whenever you want.

In this way, communication happens only in the form of the REST API. The client takes care of logically representing the data. This causes systems to move from Response Oriented Architecture (ROA) to Service Oriented Architecture (SOA). Take a look at the following diagram:

 

SPA reduces the bandwidth and improves the site performance.