Single Page App (SPA)

A single page app (SPA) is a browser-based or mobile application that does not require the page to be refreshed in order for the data displayed to be updated. This design stands in contrast to multi-page applications, which reload the page every time a change to the display is made or new data is retrieved.

Finding examples of single page apps is easy because they are all around us. Applications like Google Maps allow for incredibly dynamic data visualization changes without refreshing the current page within the browser or app. Many informational displays for lists and data can also be altered without refreshing thanks to a single page architecture.

Single page app design works by using relatively simple HTML instructions. The majority of work is done through a backend server and configured through Javascript. Under this design, none of the HTML page elements technically change even though the Javascript elements are constantly changing.

The end effect is that applications work seamlessly and without interruption. You can see single-page application architecture at work in many social platforms, for instance, which allow you to enter text and have it displayed instantly in-browser without the page being refreshed.

Another advantage to creating an application as a single-page architecture is that “sending the app data as JSON creates a separation between the presentation (HTML markup) and application logic (AJAX requests plus JSON responses),” explains Microsoft’s Mike Wasson. “This separation makes it easier to design and evolve each layer.”

Other advantages include:

  • SPAs load quickly since the majority of resources are loaded once while just the data is transmitted back and forth
  • Development becomes streamlined since only one page layout, UI and design is built and tested
  • Backend code can be reused to create multiple SPAs
  • Code can easily be ported to a mobile app
  • Data caching is more efficient and effective, allowing minimal requests and sometimes the ability to work offline

Disadvantages of a single-page application include that they may load more slowly at first than multi-page applications. They may also create heavier loads on older machines unable to keep up with the constant data transfers. Another issue is that some browser users block Javascript by default, breaking applications unless specific workarounds are used.

Multi-page apps also have an advantage over single page apps in that navigation, UX and UI can be broken down by function. For instance, an app may have completely separate functions and interfaces for different goals the user wants to accomplish.

Yet, more and more applications are moving to a single page architecture that changes seamlessly and dynamically thanks to powerful modern Javascript libraries. SPAs are rapidly becoming the standard in both mobile apps and web-based applications.