One of the most pioneering innovations in the world of front end development has to be the implementation of single page web applications. If you do not know about frontend, I have written a blog in my three part series "The web app architecture", covering the basics you need to know about frontend development.

---

Traditional methodology

But before we learn about the contemporary method of development, we first need to discuss about how it was done before that.

When you visit a webpage, any webpage for that matter, take this very website, for example, the very first thing that happens is loading. The browser downloads the HTML content and all the necessary static and media files which can include .css, .js, and pictures. After that, the browser parses the HTML content and renders it on to the screen. Traditionally, this is usually where the lifecycle of the webpage would "end". When you click another link, or hover to another tab, the browser repeats the whole process starting from "loading". The whole "reloading a webpage" can really ruin the user experience so developers came up with a method which will NOT require "reloading". Well, it will STILL require loading, but it is presented in such a way that the user is under the illusion that the webpage is a completely fluid application.

---

Single page applications

A single-page application is a web application or website that interacts with the user by dynamically rewriting the current web page with new data from the web server, instead of the default method of a web browser loading entire new pages. (wikipedia). In essence, a single page application is a javascript heavy application that completely rewrites the HTML content using the browser DOM API instead of reloading the webpage from scratch. It effectively makes the web app fill more native since the transition from one "page" to another is relatively quicker. The rewritten content is fetched from an exposed API which can be achieved through the use of XMLHttpRequest() or the fetch() API. If you do not know anything about API or Application Programming Interface, I have written about it in one of my previous blogs. It is a javascript heavy application because the "state" of the application, which is basically the stage or "link" that the user has visited, is tracked with the use of javascript. By default, the browser history can not track the "state" of the application so developers utilize the HTML5 History API and the URL hash to "modify" the history so that the browser can keep of a record of the changes in navigation of the application. What it means is that if the user clicks the "go back" button, instead of reloading the webpage, the web application will prevent that behavior and revert back to the previous state of the application

---

Web frameworks

Since single page applications require a lot of javascript logic to handle navigations, state management and etc, the heavy lifting can be done easily through the use of frameworks like React, Angular, and Vue.

• React
  React is a free and open-source front-end JavaScript library for building user interfaces based on UI components. It is maintained by Meta and a community of individual developers and companies. React can be used as a base in the development of single-page or mobile applications. (wikipedia)

• Angular
  Angular is a TypeScript-based free and open-source web application framework led by the Angular Team at Google and by a community of individuals and corporations. Angular is a complete rewrite from the same team that built AngularJS. (wikipedia)

• Vue
  Vue.js is an open-source model–view–viewmodel front end JavaScript framework for building user interfaces and single-page applications. It was created by Evan You, and is maintained by him and the rest of the active core team members. (wikipedia)

---

Advantages

• Content can be cached
  This can enable offline usage or if the user has limited connection, the webpage can still operate normally.

• Extremely fast transitions and responses
  The use of javascript allows for a more fast transition and responses from the server than the default browser reloading.

• Fluid user experience
  To build on the the previous point, the fast responses gives a more fluid, dynamic, and native feel to the web application.

Disadvantages

• Development process can be complicated
  If a developer has no previous experience with single page applications, the whole process can be quite intimidating to the untrained eye.

• Longer initial load time
  Downloading a heavy javascript application can be very time consuming. However, this can be cached to make subsequent visits faster.

• SEO (Search Engine Optimization) is really difficult
  Since by default the server returns a heavy javascript application, it is not exactly SEO friendly. However, to promote more SPAs, the google crawler bot can execute the javascript code in it's environment to get the HTML content necessary.

• Vulnerable to cyber attacks
  The developer has to be more careful about what data is stored on the web app since most of the data transfer is done through APIs so the only layer of security is the HTTPS layer. Whereas traditional methods which require an HTTPS request to be sent to the server for every page, are more secure since the server can have its own security layer preventing unwanted cyber attacks.

---

In conclusion, a single page application is one of the best ways to improve user experience which can heavily promote the growth of a company. It is primarily used in websites like Facebook, Twitter, Gmail, Netflix, etc. since it dynamically loads content. However, it is not common for blogging and portfolio websites to utilize SPAs since not much dynamic content is required. So before using a SPA, the benefits and trade offs must be considered by the developer in order to fully maximize the capability of the website.