In the near past, the web browser was much less capable than today. Every page was coming from a server.
Then the first true SPA arrived as Angular.js, brought together with all these disparate ideas in 2010. Two — way data binding, Client — side MVC, templates, and dependency injection in one framework, there were the main significant solutions provide by Angular.js at that time.These were the beginning of a new era of Single page applications.
there are two main design patterns for web apps: multi — page application(MPA) and single — page application(SPA).
A single — page application(SPA) is a web application or web site that interacts with the user by dynamically rewriting the current page rather than loading entire new pages from a server.
examples: Gmail, Google Maps, Facebook, Twitter, Google Drive, Pinterest, Twitch, Uber, Apple, PayPal, Autodesk, Tesla, Skype.
Single Page Application Frameworks
AngularJS, ReactJS, Backbone, EmberJS, MeteorJS, PolymerJS, Aurelia, Vue, Mithril.js, Node.js, etc.
In an entire lifespan of a SPA application, most of the resources(HTML + CSS + Scripts) are only loaded once.Therefore, only the data is transmitted back and forth.
SPA can cache any local storage effectively.An application sends only one request, store all data, then it can use this data and works even offline.
Every change eg.display the data or submit data back to server requests rendering a new page from the server in the browser.
How does a Single Page Application Work ?
With just one request to the server Single Page Applications can be cached to the local storage.By this SPA provides offline support to the user.Also, this request caches all the data incoming to the application from the server.
What are the Drawback of Single Page Applications ?
MPA scores over SPA in terms of SEO.
SPA doesn’t provide browsing history support.
A single-page application is an app that works inside a browser and does not require page reloading during use.
You are using this type of applications every day. These are, for instance: Gmail, Google Maps, Facebook or GitHub.
Pros of the Single-Page Application:
- SPA is fast, as most resources (HTML+CSS+Scripts) are only loaded once throughout the lifespan of application. Only data is transmitted back and forth.
- The development is simplified and streamlined. There is no need to write code to render pages on the server.
- SPA can cache any local storage effectively. An application sends only one request, store all data, then it can use this data and works even offline.
- SPAs are easy to debug with Chrome, as you can monitor network operations, investigate page elements and data associated with it.
- It’s easier to make a mobile application because the developer can reuse the same backend code for web application and native mobile application.
Cons of the Single-Page Application:
- It is very tricky and not an easy task to make SEO optimization of a Single-Page Application.