Single Page Application (SPA)

Posted on Updated on

A single-page application (SPA) is a web application or web site that fits on a single web page with the goal of providing a more fluent user experience similar to a desktop application. In a SPA, either all necessary code – HTML, JavaScript, and CSS – is retrieved with a single page load, or the appropriate resources are dynamically loaded and added to the page as necessary, usually in response to user actions.

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.

Traditional

SPA

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

Client must enable JavaScript, Single Page Application build with JavaScript, So JavaScript should be enabled in client browser.

JavaScript Frameworks for Single Page Application:-

In the times of rapid web application development can we use plain JavaScript? No Way! And that is where JavaScript comes to the save developers life.

These JavaScript frameworks mostly follows the MVC (Model-View-Controller) design and enforce structure to ensure more scalable, reusable, maintainable JavaScript code.

Below are some best JavaScript frameworks that are most advanced and popular among developer communities which help to build complex and feature rich single page interactive web 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.

The AngularJS framework works by first reading the HTML page, which has embedded into it additional custom tag attributes. Angular interprets those attributes as directives to bind input or output parts of the page to a model that is represented by standard JavaScript variables. The values of those JavaScript variables can be manually set within the code, or retrieved from static or dynamic JSON resources.

Getting started with Angular.js.

 

2). Ext JS

Ext JS is the most comprehensive MVC/MVVM JavaScript framework for building feature-rich, cross-platform web applications targeting desktops, tablets, and smartphones. Ext JS leverages HTML5 features on modern browsers while maintaining compatibility and functionality for legacy browsers.

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

React is an open-source JavaScript library providing a view for data rendered as HTML. React views are typically rendered using components that contain additional components specified as custom HTML tags. React promises programmers a model in which subcomponents cannot directly affect enclosing components (“data flows down”); efficient updating of the HTML document when data changes; and a clean separation between components on a modern single-page application.

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

 Ember.js is an open-source JavaScript web framework, based on the model–view–controller (MVC) pattern. It allows developers to create scalable single-page web applications by incorporating common idioms and best practices into the framework. EmberJS competes with the likes of Angular and React when it comes to building interactive frontend user interfaces and also has a very active community of developers.

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

Backbone.js is a JavaScript framework with a RESTful JSON interface and is based on the model–view–controller (MVC) application design paradigm. Backbone is known for being lightweight, as its only hard dependency is on one JavaScript library, Underscore.js, plus jQuery for use of the full library. It is designed for developing single-page web applications, and for keeping various parts of web applications (e.g. multiple clients and the server) synchronized.

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.

 

One thought on “Single Page Application (SPA)

    iphone 7 plus cases qatar said:
    November 2, 2016 at 1:40 am

    Great site. A lot of helpful information here. I’m sending it too several
    buddies ans als sharing iin delicious. And certainly,
    thanks in your effort!

Leave a Reply

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

Time limit is exhausted. Please reload CAPTCHA.