Introduction of Single Page Application
jaydip.raval | 22 Jun 2013
A Single Page Application (SPA) also known as Single Page Interface (SPI), is a web application that fits in a single page. In SPA all necessary details are retrieved with page load or resources are dynamically called when its necessary. Mainly SPA interact with web server in dynamic manner which means that it can fetch data on certain event of user or on certain page functionality.
Single Page Application (SPA) renders a rich user experience within a single page. Navigation techniques and AJAX provide necessary functionality without a page reload.
WHY BUILDING AN APPLICATION OF ONE PAGE PREFERABLE ?
- Rise of mobile platforms – Navigating to multiple pages on mobile is tedius.
- Performance – Rich user experience is provided while reducing the number of server round-trips.
- Various areas within a Web Application – Facilitates to utilize multiple data views within a page – show/hide as needed, load data via AJAX, etc.
The Main Benefit of Single Page Application is that it minimizes round trip to server. This is because of all data manipulation happen in model layer and a view layer that read that data from model.
Structure of Single Page Application:
ASP.Net provides various templates to develop Single Page Application. List of templates are :
- Backbone.js Template: We can develop quick client side web application using Backbone template. Backbone template provides functionality for user login, registration, forgot password functionality.
- Breeze/Angular Template: Angular js is open source library from google. We can use it for data binding means with help of Angular js we can bind data to UI and Breeze is also open source library for Data management and with combination if these two libraries we can build good client side application.
- DurandalJs Template: Durandal provides support of MVC, MVP and MVVM architecture. Durandal js give us flexibility to use any back end technology to create Single Page Application.
- Hot Towel Template: The Hot Towel MVC template is based on jQuery, DurandalJS, BreezeJS, KnockoutJS, requireJS, Toastr.js and Twitter Bootstrap
Feature provided by each SPA Template
Pros and Cons of SPA
- Faster UI
- More interactive
- Responsive UI with HTML 5
- Bad for SEO purpose
- More complex to build