What is a SPA?
Prior to reading this article, you should be familiar with the concept of a web app. Whether talking about delivering content through static websites or interactivity through web applications, the article is referring to a multi-page file structure that lives on a server. Each time new data is needed for the browser view, a request is sent to the server, which returns a new set of page files. For a static website, this approach is generally fine, but web applications that require faster and more complicated interaction sometimes struggle to keep up.
Imagine if there was a restaurant where you can only eat one part of your meal at a time. For an order including a burger, fries, and salad, the server(server!) brings out just the burger. After a few bites you want some fries, so the server takes the burger back to the kitchen and brings back just the fries. The server may have even had to wait for the fries to process–I mean prepare, before returning to the table. Repeat the request, prepare, and serve steps with the salad, then the burger again and then more fries and you’ve now eaten at the weirdest, most inefficient restaurant ever. Thankfully this doesn’t happen in the food industry but something similar is happening on the web.
In the following video, a user is navigating around Wikipedia. On the right, you may recognize the Elements tab of Chrome DevTools displaying an HTML file associated with the page in the browser.
Every time a link is clicked a new page is displayed in DevTools, which means a request to the server was made and a new set of files was sent to be rendered in the browser. This is just like our burger, fries, and salad from our favorite restaurant. In terms of a web application where interactivity is key, these file requests can mean a slow user experience. That’s where the Single-Page Application comes in.
If our favorite restaurant converts to the single-page approach, when we order our meal the server brings the fully prepared burger, fries, and a salad at once. We now have access to devour what we want without the server going to and from the kitchen. At times we may want ketchup for the fries, or some dressing for the salad, but those are delivered quickly and come from the kitchen already prepared. Just like a single-page application, you are given almost everything you need upfront but can still request smaller items to help with each item of the meal.
Now we have a video of user interactions on the React home page, which is built as a single-page application. When looking at the Elements panel this time, each interaction changes only parts of the HTML file.
- Vue.js is a framework that uses templating within a single HTML file while the application logic controls what is rendered. This approach is sometimes thought to be more traditional and therefore easier to learn.
- Other libraries and frameworks include AngularJS, Ember.js, ExtJS, Knockout.js, and Meteor.js. While all of these share similar goals, they each take different approaches to building SPAs.
SPA Pros and Cons
So, should your next project be a single-page application? Maybe. Maybe not. Like most development endeavors you must consider the pros and cons before deciding how you will implement a new project.
- SPAs are fast. The main selling point of a SPA is that it feels like a desktop or mobile application. By eliminating requests for new files and only relying on smaller amounts of data from the server, SPAs provide a real-time interface with their users.
- Reuse of code is a big bonus when using SPAs because it saves time within a project and across multiple projects. Many SPA libraries and frameworks advise that components be general enough that they can be reused from project to project.
- SPAs provide an easier path to migrate code to a mobile application. With a SPA, the back-end of the application feeds data to the decoupled front-end interface. This separation of tasks allows the creation of a mobile app UI while maintaining the back-end logic of the application.
- SPAs require more files to run at startup so the load time of the application can be longer. This is something to consider if a user will not want to visit a site that takes too long to load. SPA load time can be minimized through strategically loading resources throughout the run of an application.
- SPAs may not function as expected within the browser. For example, the back button or browsing history can act differently while using a single-page application. This can be frustrating for users who are expecting certain functionality within their browsers.