What are Single Page Applications (SPA) for mobile and tablets

In this article we describe What are Single Page Applications (SPA) for mobile and tablets . 

From years now, everything has been moving from the realm of desktop applications to the world of Web Apps. More than ever, since the apparition of mobiles and tablets. However, nowadays web applications are facing many problems , like bad user experience due to web page re-rendering, poor application performance because of page reloads and data transmission over the wire, and lack of offline support ( slow server connections imply unresponsive user interface ).

What are Single Page Applications (SPA) for mobile and tablets

Single-page applications (SPA), also called single-page interfaces (SPI), are web applications built all over a single one web page, with the goal of replicating a desktop environment in the web browser. That is achieved by means of rendering all SPA code on a single load, and calling the server ONLY when there is need of preserving data. SPAs can be run on different kinds of devices like smartphones, tablets and of course standard desktops.  SPAs use specialized frameworks like AngularJS,  Knockout and more, written in JavaScript , and they do not require page reloading .

Some examples of SPAs are Gmail,  iCloud, Google Drive, Google Maps, Hotmail, GitHub, and Soundcloud . The term "SPA" was first used by Steve Yen in 2005, and the first known experiments on Single Page Applications date from the 2002 Stuart Morris self-contained website (visit it at  slashdotslash   (works only on IE6) ) ,  and from the US patent made by Lucas Birdeau, Kevin Hakman, Michael Peachey and Evan Yeh , which describes a SPA implementation. 

SPA apps have many important features like:

1) SPA apps respond like desktop applications : this is achieved by moving data and processing from the server to the client, and by moving the business logic from server to client : this way, only data validation and permanent storage are located on server side.

2) SPA's bandwidth is minimal : the communication with the server is made in small quantities via Ajax , using the economic JSON sintax. 

3) SPA renders like desktop applications :  since there are not round-trips to retrieve HTML.

4) SPAs are accessible applications : users can use SPAs on tablets, laptops, smartphones,  etc.

5) SPAs keep working offline : a SPA can go offline if the server connection falls, and  synchronize later the browser data with the server . 

6) SPAs do not need to download updates : all that users need to do to update their apps, is to reload the browser to automatically load the latest version.

7) SPA's Navigation between "different" pages is immediate: no page reloading is necessary, since the "new" pages are generated by the SPA on the fly, without loading HTML from the server.

8) SPAs are cross-platform: of course, a SPA works on any operating system . 

SPAs are built upon the MVVM architecture , a two-way data binding software pattern,  which goal is to isolate the UI (the View) from the business logic (the Model), making data transfers using an intermediate ViewModel and Binder in the middle, to synchronize the data updates between the  View and the Model layers. The ViewModel code replaces the MVC Controller, and makes automatically all data synchronization, without any knowledge about which View is being exposed, or where is the data coming from.  This later is very useful for testing purposes.

Schematically, the MVVM architecture can be put this way:

View:
holds the user interface or presentation layer UI , with all declarative bindings

ViewModel:
stands in the middle between the View and the Model,  holds unsaved data,  and handles the application/presentation logic : as for MSDN, the ViewModel 

"decouples the View from the Model, and consolidates the business logic into the ViewModel and the Model where it can be tested"(MSDN)

If you feel a little confused on what the difference between presentation logic and business logic is, think it this way : Business logic manages data, while presentation logic manages users behaviors. 

Model:
holds data validation & business logic, and addresses the server for data read & storage:

In an specific Single Page Application step-by-step tutorial , we explained how to build a SPA web application in only 10 minutes , using Visual Studio 2012 templates :

In this SPA app, the ToDo items can be added, deleted or updated.

The data is preserved on database and, after the user is done and logs out, she/he can log in again, and see all personal Todo lists as they were saved  on database on the last log out.

All the CRUD(Create Retrieve Update Delete) functionality will be hold in a SINGLE web page, while the server will be called only in case there is the need of preserving data on disk. This makes a fully functional SPA web application.

In this article we reviewed  what a Single Page Application (SPA) is. 
Happy programming.....

      by Carmel Schvartzman

כתב: כרמל שוורצמן