Web applications traditionally consists of multiple pages.As the user interacts with the web page ,it results in a post back or request for a new web page.
If the user selects some input value on a web page it results in a new request to the web server.So as the user interacts with the different input elements on a web page there could be many requests to the server to fetch the updated HTML.
Many web pages uses ajax to prevent a full page post back to the server.This approach prevents refreshing of the entire page.But if the web server is returning HTML back to the web page it can still have an impact on the performance as a section of a page will be rendered by the web server.
Also the user action may result in redirection to a different web page.
Interaction between web server and web browser always have some impact on the responsiveness of the web application.This is because there is always a network latency involved in request and response process.This prevents a web application from being as much responsive as a desktop application.
Single Page Applications
For understanding Single Page Application we need to consider the factors involved in developing a fluid web application.
Normal web applications consists of lots of requests to the server.This can have a big impact on the performance.So if we are contacting web server for every user interaction such as selecting a value in a dropdown or clicking on a context menu this could make the application appear less responsive to the user.
So application logic should be implemented on the client side instead of the server if we want to develop fluid web applications.
Single page applications consists of a single web page.All the necessary resources are fetched from the server on the first page load.As the user interacts with the web page ,it contacts the web server and is dynamically updated.
Instead of fetching new HTML page from the server web page retrieves just the necessary resources from the server such as data.
Same web page is dynamically updated rather than fetching new HTML from the server.If there is need to update the HTML then it is updated on the client rather than being fetched from the server.
This means that the web page never refreshes and the user gets the same experience as a desktop application.
The interaction between the web page and the server happens in the background.
Single Page application (or SPA ,as it is commonly called) significantly reduces the interaction between web browser and web server.So the SPA application can work with very less network bandwidth.
Common Frameworks for developing Single Page Applications
Single Page Applications can be difficult to implement since web pages are effectively stateless.So implementing application logic on the client side and working with much less interaction with server can be challenging.
For starting development of Single Page Application suitable frameworks needs to be selected.
Some of the frameworks are:
- AngularJS Maintained by google.One of the most commonly used frameworks.
- Ember One of the newer frameworks.More suitable for bigger projects than small projects.
- Meteor Has simple data binding.
- Backbone Commonly used frameworks.Has a relatively small download size.
Each of these frameworks use MVC architecture for creating SPA application.AngularJS provides support for templates.These templates are used to create the views which represents different UIs.
Views are always in sync with the model.So any changes in the model or view are automatically reflected in the other.