Reading Time: 5 minutes
Single Page Applications (SPA) are built on expanding reach via the browser, reducing round-tripping, and enhancing User Experience (UX). In this blog, we will discuss why we need SPA, its advantages and what different components required.
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.
How Loading Time Affects Your Bottom Line
- A survey revealed that Loading time is a major contributing factor to page abandonment.
- Page Load time is greater than 3 seconds, 20% of visitors will abandon the page.
- Walmart found that every 100ms reduction in loading time leads to an increase in incremental revenue by as much as 1%.
- Mozilla saw increase in downloads of Firefox by 5 million per month, after making their page 2.2 seconds quicker
Let’s understand Single Page Application
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 apps typically have
- “Application like” interaction
- Back/Forward Button works as expected
- 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
- 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
- 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
Business Usage of SPA
- Create “App-like user experience”
- Build Hybrid (native) HTML5 applications
- Mobile version of your web site The SPA sweet spot is likely not on web sites, but on content-rich cross-platform mobile apps
- All data has to be available via some sort of API – this is a big advantage in our case as we want to have an API to our application anyway. Right now about 60-70% of my calls to get/update data are done through a REST API. Doing a single page application will allow us to better test our REST API since the application itself will use it. It also means that as the application grows, the API itself will grow since that is what the application uses; no need to maintain the API as an add-on to the application.
- More responsive application – since all data loaded after the initial page is kept to a minimum and transmitted in a compact format (like JSON), data requests should generally be faster, and the server will do slightly less processing.
AngularJS for SPA implementation
Key Features of AngularJS
- Declarative HTML approach
- Easy Data Binding : Two way Data Binding
- Reusable Components
- MVC/MVVM Design Pattern
- Dependency Injection
- End to end Integration Testing / Unit Testing
- Angular’s HTML Compiler allows the developer to teach the browser new HTML syntax. The compiler allows you to attach behaviour to any HTML element or attribute and even create new HTML elements or attributes with custom behaviour. Angular calls these behaviour extensions directives.
- Compiler is an angular service which traverses the DOM looking for attributes. The compilation process happens in two phases. **Compile: traverse the DOM and collect all of the directives. The result is a linking function. ** Link: combine the directives with a scope and produce a live view. Any changes in the scope model are reflected in the view, and any user interactions with the view are reflected in the scope model. This makes the scope model the single source of truth.
Why use a task runner?
In one word: automation. The less work you have to do when performing repetitive tasks like minification, compilation, unit testing, linting, etc, the easier your job becomes. After you’ve configured it, a task runner can do most of that mundane work for you—and your team—with basically zero effort.
Why use Grunt?
The Grunt ecosystem is huge and it’s growing every day. With literally hundreds of plugins to choose from, you can use Grunt to automate just about anything with a minimum of effort. If someone hasn’t already built what you need, authoring and publishing your own Grunt plugin to npm is a breeze.
Bower, A package manager for the web
Bower is a package manager for the web. It offers a generic, unopinionated solution to the problem of front-end package management, while exposing the package dependency model via an API that can be consumed by a more opinionated build stack. There are no system wide dependencies, no dependencies are shared between different apps, and the dependency tree is flat.
Bower runs over Git, and is package-agnostic. A packaged component can be made up of any type of asset, and use any type of transport (e.g., AMD, CommonJS, etc.).
BluePi has done several live implementations of many Single Page Applications. One can see some lag while opening first page, but after that, all pages will open on a blink of an eye, It may take some time to get data from the server which is very small chunk because it is just retrieving delta from server.