Single Page Application – The myth, truth and chiefdoms.

Not sure how to start this, but start somehow, I must.

If you are a software developer and you have not heard or come across the acronym – SPA – would really be a great surprise to me.

This is not a really a full blown treatise about SPA – more of a pocket book definition or to be precise – a one page narration of SPA.
So, I will tackle this write up using my preferred MO for presentation – the 5 Ws – What, Why, Where, When and Who.

What is SPA – stands for Single Page Application – meaning you only have one SINGLE PAGE or container housing your application.  You may want to juxtapose this with another context in order to fully comprehend its full meaning. That will be dealt with in the “Why” definition.

Why SPA – the main reason for the emergence of the SPA paradigm is primarily speed or instantaneous response to a user's interactions with controls or widgets on a web page.

What does this mean? The traditional way of staging a web application is based on the HTTP protocol (which in simple terms – is an "agreed format” of communication between the client and the server). 

Using the ASP.Net model, the HTTP model is STATELESS – meaning the server end (collection of software installed on a special computer with supposedly enhanced configuration that exceeds the typical configuration of a regular computing device that the average person uses) does not know exactly what is going on at the client side.

However, the server ( ASP.Net framework) makes use of what is a called a VIEW STATE ( which is just a string of values representing the STATE of a PAGE at the server side before being spewed to the client) to  hazard what is taking place at the client side. 

The way this works is this:

  1. A request comes in to the server to serve up a page.
    • The page is constructed or built – and all the baseline fittings are added.
    • The server then sends the page ( in the form of a string) as HTML to the client to display.
    • Just before the server sends the page info, it serializes ( which is a STRING representation of everything about that page - # of controls – state of controls and all that) the page, then does a compression of the resulting string  and embed same as part of the stream being sent back to the client.
  2. When a POST BACK occurs (sending a request to the server often with changed data), the server does not really know what had transpired at the client side but for it to know how to apply the changed data – it needs to reconstruct the original state of the page for which the changed data applies.
    •  The page is re-constructed or built and all the baseline fittings are added.
    • The view state information is de-serialized and applied to the page.
    • At this point – the last known state of the page – before it was sent to the client is established.
    • The changed data is now applied to the page.
    • A new VIEW STATE is then created, serialized, compressed and sent back to the client.
    • The client’s content is refreshed.
This back and forth exchange of VIEW STATE involves data transmission across the network and could impact the responsiveness of the application based on the size and complexity of the view state.

The SPA concept – at its core – is meant to eliminate the NEED for a VIEW STATE and by so doing – reduce the volume of data used in network traffic and boost the responsiveness of the application. The main theme is – ONLY send and receive raw DATA – without any need to track the state of the page and its controls.

So, the server in this case – Rest Service- does not care about recreating the state of the page at the server end but rather, just concentrate on fetching and saving data.

Where is SPA – SPA is term referring to the interaction of a web based application and the server side. So, SPA is based in a browser and uses a special of protocol/stack.

When is SPA – This should be when is SPA used? SPA should be adopted when developing new web applications or when there is a need to boost the performance of an existing web application.

Who is SPA – Again – this should be read as who is SPA targeted at? This is pretty simple – it is meant for software solution providers using the web medium.

SPA - by itself is a loose term or concept but the actual implementation differs based on the flavor of implementation. It is akin to engine types – there are two broad types – internal and external combustion engines. The concept is the same for all car makers but the actual implementation and accessories offer differ for each car maker.

The same line of thinking is applicable to SPA – the concept is the same (eliminate the need for a VIEW STATE) but the actual implementation differs.

The King of the Hill in this neck of the wood is Angular – it is a one stop shop for all your SPA needs. A formidable contender in this sphere is Oracle Jet and a very, very lightweight framework to implement SPA is KnockoutJs. Within this mix, we also have CMS Assets – which amongst others, pouts to be “The Section 508 Compliant Responsive Framework for Front-End Development”.

To be fair – Knockoutjs – claims to do only one thing – which is DATA BINDING and implemented based on the MVVM paradigm. Data binding is just one piece of the puzzle in SPA. It is basically a way to dynamical inject ( or notify control ) of data changes as well as vice versa – allow other interested parties or context to subscribe to  notifications when there is a change in the state of a control.

Angular has the backing of Google – supposedly, it initiated the framework and it is used in developing some of its well-known applications – such as GMAIL

Oracle  Jet, on the other hand, is powered by Oracle corporation and  at its core is a conglomeration of loosely coupled libraries with Knockoutjs being the center piece. It relies on JQUERY,   AMD – asynchronous module definition – with its implementation using RequireJS

.
Oracle jet also makes use of   BackboneJs  for model representation aka collections used to store/manipulate data. BackboneJs also offers Template injection and manipulation.  SammyJS  is used to manage routing or page navigation at the client side. JWT – Jason web token- can be used for Authentication – and even Authorization – purposes.

The main difference between Angular and Oracle Jet may be described as Angular has all of the features and functionalities provided by these varied open source libraries baked in into its core base – so, it does not have dependency on them. Whereas, Oracle Jet can be described as a conglomeration of different open source libraries bundled together as a framework.

CMS  Assets is very similar to Oracle Jet – using KnockoutJs as well - but rather, laying emphasis on content presentation and compliance with section 508. It makes use of Bootstrap  as well as JQUERY heavily.

Well – all in all – this is a just a one page treatise or quickie overview of SPA and the platforms available and is by no means an exhaustive or frame of reference for SPA offerings.

Comments

Post a Comment

Popular posts from this blog

Decompiling Delphi - 3

I came across this on delphi.about.com web site and thought it useful to add it a a reference here. continued from part two The art of reverse engineering has traditionally been the land of technical wizards, familiar with assembly language and debuggers. Several Delphi decompilers have appeared that allow anybody, even with limited technical knowledge, to reverse engineer most Delphi executable files. If you are interested in reverse engineering Delphi programs I suggest you to take a look at the following few "decompilers": IDR (Interactive Delphi Reconstructor) A decompiler of executable files (EXE) and dynamic libraries (DLL), written in Delphi and executed in Windows32 environment. Final project goal is development of the program capable to restore the most part of initial Delphi source codes from the compiled file but IDR, as well as others Delphi decompilers, cannot do it yet. Nevertheless, IDR is in a status considerably to facilitate such process. In co...
Read more

Decompiling Delphi - 2

I came across this on delphi.about.com web site and thought it useful to add it a a reference here. continued from part one For the moment, Borland does not offer any product capable of decompiling an executable (.exe) file or the "Delphi compiled unit" (.dcu) back to the original source code (.pas). Delphi compiled unit: DCU When a Delphi project is compiled or run a compiled unit (.pas) file is created. By default the compiled version of each unit is stored in a separate binary-format file with the same name as the unit file, but with the extension .DCU. For example unit1.dcu contains the code and data declared in the unit1.pas file. This means that if you have someones, for example, component compiled source all you have to do is to reverse it and get the code. Wrong. The DCU file format is undocumented (proprietary format) and may change from version to version. After the compiler: Delphi Reverse Engineering If you would like to try to decompile a Delphi e...
Read more

Artificial Intelligence, Oxymoron and Natural Intelligence

Image
I posted this question to a couple of online AI engines and to my surprise, none came up with the correct anwser. This is the question - "Two Americans were crossing a bridge on a bright summer morning, one was the father of the other and the other wasn't the son. So, what was their relationship?" This is a classic IQ question - supposedly, employed by Microsoft in the easrly 90s in the recruitment of top talent for its work pool. Essentially, this is a mis-direction fixation challenge. On the surface - it is a fairly straight forward question with the requisite hint at solving it. For whatever reason, most people asked this question are always fixated on the "father and son" narative, which in reality - is the hint to solving the question, but always end up getting it wrong. My point really is - the so called AI engines got the answer to the question wrong as well. The real poser is - should we still be referring to the encompassing ecosystem...
Read more