Web applications are unwittingly replacing the old desktop applications. They are more convenient to use, they are easy to update, and they are not bound to one device. And even though users are gently moving from browser-based web applications into the mobile ones, the demand for complex and refined apps is already huge and is still growing. If you are thinking about creating your own application, you’ve probably heard that there are two main design patterns for web apps: multi-page application (MPA) and single-page application (SPA). And of course, both models have their pros and cons.

A single-page application (SPA) is an app that works inside the browser and reduces reloading requirements. It is one page that is visited and then with the aid of JavaScript, it is loaded all other content.

These types of applications are accessible and avoid the waiting time for the user. Examples are Gmail, Google Maps and Facebook.

Example of Single Page Applications (SPAs)

Source: Gearheart.io

The benefits the businesses can perceive using SPA are high speed, adaptable layout, relevant and specific information, and easy to use and better conversions.

All these benefits mean that SPAs make up a top web development trend that will have a massive potential in 2020 and beyond.

SPA requests the markup and data independently and renders pages straight in the browser. We can do this thanks to the advanced JavaScript frameworks like AngularJS, Ember.js, Meteor.js, Knockout.js .
Single-page sites help keep the user in one, comfortable web space where content is presented to the user in a simple, easy and workable fashion.

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. It is much easier to get started because you can usually kick off development from a file file://URI, without using any server at all.
  • 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.
  • 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.

Cons of the Single-Page Application:

  • It is very tricky and not an easy task to make SEO optimization of a Single-Page Application. Its content is loaded by AJAX (Asynchronous JavaScript and XML) — a method of exchanging data and updating in the application without refreshing the page.
    UPDATE 27.09.2017: In her comment, Iris Shaffer correctly pointed out that it can be done on server side as well. Indeed, it is easier today than it used to be.
  • It is slow to download because heavy client frameworks are required to be loaded to the client.
  • It requires JavaScript to be present and enabled. If any user disables JavaScript in his or her browser, it won’t be possible to present application and its actions in a correct way.
    UPDATE 27.09.2017: In her comment, Iris Shaffer has noticed that with isomorphic rendering / server side rendering, you can render the page on the server already. When the initial render is on the server and can be cached, disabling JS would not be a concern for getting a rendered page. Theoretically, that’s right. Obviously you can render on server side. But lack of JS can be a concern for other functionalities. Lots of things can be done in HTML & CSS but from my experience it would be hell to do it this way instead of use JavaScript.
  • Compared to the “traditional” application, SPA is less secure. Due to Cross-Site Scripting (XSS), it enables attackers to inject client-side scripts into web application by other users.
  • Memory leak in JavaScript can even cause powerful system to slow down
  • In this model, back and forward buttons become dysfunctional.
    UPDATE 27.09.2017: Nowadays, it’s not an issue anymore.
Would love your thoughts, please comment.x