Why Single Page Application
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 ApplicationWhy 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 ApplicationSingle 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
- "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
- 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
- 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.
- 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.