× logo Home HTML CSS Javascript React-App Angular.js logo
logo
UI Engineer:

So What is SPA, Really?

SPA stands for Single-Page Applications, SPA's are Web apps that load asingle HTML page and dynamically update that page as the user interacts with the app. SPAs use AJAX and HTML5 to create fluid and responsive Web apps, without constant page reloads. However, this means much of the work happens on the client side, in JavaScript. The browser, reducing round tripping, and enhancing User Experience (UX). Application is a web app in which the majority of interactions are handled on the client without the need to reach a server, with a goal of providing a more fluid user experience

Why Single Page Application


Why do we want to write single page apps? The main reason is that they allow us to offer a more-native-app-like experience to the user. This is hard to do with other approaches. Supporting rich interactions with multiple components on a page means that those components have many more intermediate states (e.g. menu open, menu item X selected, menu item Y selected, menu item clicked). Server-side rendering is hard to implement for all the intermediate states - small view states do not map well to URLs. Single page apps are distinguished by their ability to redraw any part of the UI without requiring a server round-trip to retrieve HTML. This is achieved by separating the data from the presentation of data by having a model layer that handles data and a view layer that reads from the models. Let's understand Single Page Application (SPA)


Single Page Application is a web app in which the majority of interactions are handled on the client without the need to reach a server, with a goal of providing a more fluid user experience. 
Single Page Applications (SPA) are built on expanding reach via the browser, reducing round tripping, and enhancing User Experience (UX).
Single page apps typically have

"Application like" interaction
Back/Forward Button works as expected
More JavaScript than actual HTML
Ability to go Offline
Dynamic data loading from the server-side API, Works with Restful Web Services Fluid transitions between page states, Richer Interaction between UI Components Markup, CSS & JS required for the application sent with the initial request Page changes occur via JavaScript using Templates & DOM manipulation URL hashes are used to track state and provide bookmark-able links< SPA Core Benefit
Performance Improvement
SPAs can improve performance in several ways: - Load time: 1 file each of HTML, CSS, JS.
Static files not dynamic
Less data transfer: XHR calls only send - raw data, not HTML markup
Load distribution: dramatically less load on your server, by distributing it to clients
Caching gets a lot easier and more beneficial
SPA Benefits
It is an application so it can do Cool Stuff!
Responsive, native application feel. No page flicker!
Faster UI, More Interactive
Most of the page processing happens client side, offloading server load
Massive tooling support, Vibrant community
Code reuse. REST endpoints are general purpose and can be used for multiple applications
UI is just another Client
Perfect for supporting multiple platforms
Here is the example of a Single-Page App in React using React Router
Before we go further, take a look at the following example: logo What you have here is a simple React app that uses React Router to provide all of the navigation and view-loading goodness! Click on the various links to load the relevant content, and feel free to Open up this page in its own browser windowto use the back and forward buttons to see them working. In the following sections, we are going to be building this app in pieces. By the end, not only will you have re-created this app, you'll hopefully have learned enough about React Router to build cooler and more awesome things. logo