Vineel Vutukuri

What is SPA? Why SPA? Pros & Cons When to use SPA?

What is SPA? Single-Page Applications (SPA’s) are web apps that load a single HTML page and dynamically update that page as the user interacts with the app. In SPA data is separated from presentation, It often includes templating, Ajax, Routing.

Why SPA? Reach: You want to reach wide audience across many devices and in variety of browsers Rich User Experience: Supports rich interactions with multiple components on a page, and by keeping pages moving fluently because of client side navigation. Single page apps are distinguished by their ability to redraw any part of the UI without requiring a server roundtrip to retrieve HTML. Reduce Roundtrip: It makes less trips between the client and server and less post backs to the page.

Dis Advantages of SPA:  These are complex to develop when compared  Client must enable JavaScript, Single Page Application build with JavaScript, So JavaScript should be enabled in client browser  Download all the content at initial page load  SEO considerations:- Indexing the all pages

 Broken Back Button: Browser does not Store the state, Browser stores only URI  Cross-site scripting (XSS): Single Page Application is less secure because it enables attackers to inject client-side script into web pages

 Memory Leak: Memory leak in JavaScript cause system to slow down.  Scroll History Position:- The position of scroll bar changes when we navigate between the pages

 Analytics: We cannot keep track of page views, hits etc. These should be handled with extra script triggered by app router

 Error Tracking: It is difficult to keep track of errors while using SPA.

Advantages of SPA:  Ability to go offline  Application like Interactions.  Fluid transitions between states. Richer Interaction between Ui components  Data Transfer is less (Only XHR requests).  Queries are lesser than traditional web pages.  Less load on server, Load is distributed to clients. Network latency is drastically reduced  Transition between the views is quicker.

When to use SPA?  SPA is a lean server, fat client app  SPA are not recommended for highly secure applications like banking, because when you depend on client, HTTP protocol can be easily manipulated.  SPA are recommended mainly for simpler workflow and where the usability, visualization plays a key role than security.

Architecture Of SPA:

Frameworks which can be used to build SPA:-  Backbone.js  Ember.js  Angular.js  Knockout.js  Angular.js Few SPA   