Single-page application

Feb 28, 2015   Allumez   Technologies , Web Technologies

A single-page application is a web application or web site that fits on a single web page. In SPA all necessary code is retrieved wit h a single page load. Resources can also load dynamically. The page does not reload at any point of processing. The control does not transfer to another page. Interaction with the single page app often involves dynamic communication with web server.

History-

The term SPA was given by Steve Yen in 2005. Modern browsers that can parse HTML5 allow developers to replace the user interface from web servers with clients.

Characteristics-

Some of the characteristics of SPA are:

  • Chunking- the webpage is developed by loading chunks of HTML modules

  • Controllers- the controllers separate views and modes using MVC

  • Routing- views and navigation are selected that preserves page state, elements

  • Logical storage- store data on a browser for performance

If user inputs are also bound to data, the SPA has two-way data binding, a concept known as AngularJS. Another way is to render the data using DHTMLX, Webix.

Technical approaches-

Various techniques that enable the browser to maintain a single page are as follows:

JavaScript Frameworks

  • AngularJS is a fully client side library. Making templates in AngularJS is based on bidirectional UI data binding. Data binding is a better way of updating the view whenever the model changes. The HTML template is compiled in the browser. In the AngularJS framework, the controller is maintained within the client browser. Thus new pages are generated without any interaction with a server.

  • Ember.js is a client-side JavaScript framework based on MVC software architectural pattern. It allows developers to create single-page applications by incorporating common ideas and best practices into a framework that provides declarative two-way data binding, computed properties, automatically-updating templates powered by Handlebars.js, and a router for managing application state.

  • Meteor.js is a full-stack or client-server JavaScript framework designed especially for SPAs. It features simpler data binding than Angular or Ember. Full stack reactivity ensures that all layers, from the database to the templates, update themselves automatically when necessary.

Websockets:

Websockets are a bidirectional real time client-server communication technology part of HTML5. It is superior to AJAX in performance.

Browser plugins:

Asynchronous calls to the server can also be achieved using browser plug-in technologies such as Silverlight, or Java applets.

Running locally-

Some SPAs can be executed from a local file using the file URI scheme. This gives users the ability to download the SPA from a server and run this file from a local storage device, without depending on server connectivity.


Share this post

We are always here to help. If you have a query Send Now