Introduction to SPA(Single Page Application)


Now days web applications are getting modern day by day. There are many JavaScript, CSS library to create really good web application long with HTML5.

Single Page Application(SPA) is also known as Single Page Interface(SPI) is an web application which have only one HTML page and all application GUI, operation are done using JavaScript, CSS, Ajax dynamically. You can find many website developed on this concept. In SPA either you can download all GUI HTML at once(by hiding some part) or even you can download HTML GUI when required but make sure you are not going to download it again in one browsing instance lifecycle. HTML GUI can also be created on browser using JavaScript, Jquery or other lib at run time.

Data transfer takes place using AJAX in form of XML, JSON or any other text representation but now day JSON is obvious choice.

SPA can be developed using various approaches as well as using various web client development frameworks of JS and CSS like jQuery, Angular JS, Bootstrap, KnockOut and many more. One can use these framework in combination also(Obviously JQuery is foundation for many of these frameworks) . Even one can develop SPA using simple HTML, JavaScript and Ajax but for rapid, clean and robust application development it is recommended use these open source libraries.

Difference between Single Page Application and traditional multi page application

In traditional web applications typically for every part/operation their is separate web page and for every action complete HTML of page come via response from server, but after use of ajax developers minimised whole page post by doing partial like fetching or changing data using ajax and JavaScript.

While in SPA no HTML transferred more than once to a client and all data transmission take place via ajax calls. Gmail is best example of SPA.

traditional-web-site

spa