Single page applications
Download as PPTX, PDF1 like1,140 views
Single page applications (SPA) load all necessary code at once rather than reloading pages for each interaction. This provides a more desktop-like experience. Key characteristics of SPAs include chunking data, using controllers and templates to separate concerns, routing to change views without reloads, and real-time communication. SPAs improve performance over traditional web apps by reducing page reloads and data transfers. They are well-suited for applications that need rich, responsive interfaces and real-time updates. Maintaining browser state, security, and analytics pose challenges for SPAs.
Single page applications
- 1. Single Page Applications (SPA)
- 2. Agenda What is Single Page Application Difference from traditional web application Why SPA? SPA Frameworks Challenges
- 3. Definition • A single-page application (SPA), is a web application or web site that fits on a single web page with the goal of providing a more fluid user experience akin to a desktop application. • In a SPA, either all necessary code – HTML, JavaScript, and CSS – is retrieved with a single page load or the appropriate resources are dynamically loaded and added to the page as necessary, usually in response to user actions. • The page does not reload at any point in the process, nor does control transfer to another page. • Interaction with the single page application often involves dynamic communication with the web server behind the scenes.
- 4. Characteristics Chunking – the web page is constructed by loading chunks of HTML fragments and JSON data instead of receiving full HTML from a web server on every request. (Backbone.js, jQuery, Upshot.js) Controllers – mess of JavaScript code that handles tangled DOM and data manipulations, application logic and AJAX calls is replaced by controllers that separate views and models using MVC or MVVM patterns. (Backbone.js, Knockout.js, JavascriptMVC) Templating – coding of UI and DOM manipulations are replaced by declarative binding of data to HTML templates. (Knockout.js, Mustache, jQuery Templates, Underscore.js) Routing – selection of views and navigation (without page reloads) that preserves page state, elements and data (Histrory.js, Crossroads.js, Backbone.js, pjax, HTML5 History API) Real-time communication – two-way communication of a client application and web server replaces one-way requests from a browser (HTML 5 Web Sockets, Socket.io, SignalR) Local storage – capabilities of storing data on a browser for performance and offline access replace cookies and intensive data loads from web server (HTML 5 Local storage).
- 5. Difference from traditional web application Traditional web page Request sent to server HTML Response from server Browser unloads previously loaded DOM Browser creates DOM for the response Browser renders DOM SPA Does not reload the page Load Resources (Html, CSS, JavaScript) on initial page load or as required generally in response to user action
- 6. Why to use SPA Performance is certainly better with client-side rendering if you do it right, but this is not the most compelling reason to build a SPA. (Network speeds are improving, after all.) With SPA we don't need to use extra queries to the server to download pages. No page flickering since no page reload Faster UI, more interactive Less data transfer between clients and servers Caching is lot easier as static data is explicitly separated Faster Development
- 7. When to use SPA Native/Desktop like application experience is desired. Highly responsive site is desired. Real time communication Supports tons of rich UI components in multiple states on same page very efficiently.
- 8. Top Challenges in SPA Analytics Analytics code that run on every page load fails to work in case of SPA, as there is no page reload Browser constraints Back button behavior is not easy to maintain, manual coding efforts needs to be made to maintain the browser state Bookmark handling, (every time we open the previously saved bookmark, the expected view needs to be rendered) Security Concerns Single Page Apps are a little extra vulnerable to both Cross-Site Scripting (XSS) attacks and Cross-Site Request Forgery (CSRF) attacks. We have to be little extra cautious while building SPA, to defuse such attacks though server side apps are also vulnerable.
Editor's Notes
- #7: Desktop feel – no flickering / white pages – no complete reload, Only parts of the application are repainted Faster, More interactive – user feel connected – generally I would go visit some other tab / some other app while a page is loading .. But these apps doesn’t give enough time They keep you busy. Less data transfer : previously <HTML>data<HTML> Caching – a big plus and credit goes to clear saperation of data and templates. Cached by browser During app use most SPA technologies would cache templates in memory Offloading – intelligent solution to buden browser with some processing Faster development – generally SPA framewok is used which lets you quite easily play with the UI. No more worry about updating the DOM with result, all you care is updating the model View upation happens automatically