Or, Single-Page Applications (SPAs) are Web apps that load a single HTML page and dynamically update that page as the user interacts with the app.
Single page apps are distinguished by their ability to redraw any part of the UI without requiring a server roundtrip to retrieve HTML. This is achieved by separating the data from the presentation of data by having a model layer that handles data and a view layer that reads from the models.
In an SPA, after the first page loads, all interaction with the server happens through AJAX calls. These AJAX calls return data usually in JSON format. The app uses the JSON data to update the page dynamically, without reloading the page.
Below figures illustrates the difference between the traditional and SPA approaches.
Advantages of Single Page Application
- Single Page Application is good for making Responsive Websites, Support mobile, Tablet & Desktop.
- SPA doesn’t require extra queries to server to download pages. With the advantage of AJAX it refresh only the relevant portion of the page when a user submits new data or requests.
- SPA separates UI and data, SPA communicates with server only with JSON REST API (Send/Receive JSON using AJAX), this also allows both parts to be independently developed and tested.
- In the SPA, all the required resources like HTML, CSS, and Scripts loaded only once which makes application fast throughout lifespan of the application.
- Much of the data validation occurs only at client side.
Disadvantages of Single Page Application
1). Angular JS
AngularJS, the baby of Google, is widely used an open-source web application framework. It aims to simplify both the development and the testing of such applications by providing a framework for client-side model–view–controller (MVC) and model–view–viewmodel (MVVM) architectures, along with components commonly used in rich Internet applications.
Getting started with Angular.js.
2). Ext JS
Ext JS features hundreds of high-performance UI widgets that are meticulously designed to fit the needs of the simplest as well as the most complex web applications. Ext JS templates and layout manager give you full control over your display irrespective of devices and screen sizes.
Getting started with Ext.js.
To know more about Ext.js single page application click here.
3). React JS
Have you ever wondered what powers Facebook and Instagram’s user interface? React.js is behind them and it gives quick idea about how powerful is ReactJS when it comes to building large scale application of extreme dynamic nature.
Getting started with React.js
4). Ember JS
Although it is primarily considered a framework for the web, it is also possible to build desktop and mobile applications in Ember. The most notable example of an Ember desktop application is Apple Music, a feature of the iTunes desktop application.
Getting started with Ember.js.
5). Backbone JS
The popularity and power of backbone can be judged from the fact that biggies like Pinterest, Foursquare, Walmart, Disqus and Delicious are using backone.js. However, there is comparatively slow growth in Backbone usage as compared to the rivals Angular, Ember or the newly launched React and the main reason for that appears to be the sluggish release cycle of backbone and lack of power features that other frameworks offer out of the box.
Getting started with Backbone.js.