What Is a Single-Page Application (SPA)? Pros & Cons With Examples
Selecting the correct technology stack can make or break a project. Sometimes, the desire to use the next ‘hot’ technology leads stakeholders (both technical and non-technical) to make unwise decisions in this department.
While Single-page Application frameworks have been around for years, they continue to evolve, with new versions generating buzz within the development community. The above Twitter example shows that, while developing an SPA may sound like an exciting option, it may not be the right one for your project.
In this article we will look at the pros and cons of Single-page Application frameworks, to help your team make an informed decision.
Table Of Contents
Single-page Applications vs Multiple-page Applications
Before the first Single-page Application framework appeared, the landscape was dominated by Multiple-page Applications (MPAs) built in static HTML and server-side technologies like PHP, ASP, Java, Ruby, and Python. It should be noted that what we consider to be a “normal” website even today, is the same as what we’re calling an MPA.
MPAs work by making multiple requests between the client and the server. As websites have grown in complexity, so have the demands they make on servers. The introduction of AJAX, which allows web pages to be updated without reloading, partly alleviated this issue. It also gave developers a glimpse into how an SPA future might look.
Next came the Knockout.js framework and its introduction of MVVM data binding. Knockout.js simplified the data binding process by creating a separation of concerns between the view and the application’s data. It did this by taking the view model and binding it to the browser’s HTML, so any changes in the browser were automatically tracked and reflected in the view model – and vice versa!
The Multiple-page Application Legacy
MPAs still form the vast majority of web applications online. While this is partly due to a head start over Single-page Applications, there are many use cases where building a Muliple-page App is simply the better option. In fact, many of the web’s most popular websites have opted to remain as MPAs. These include Stack Overflow, Amazon and most Wordpress-based sites. Multiple-page Applications have a long track record and are proven to work great for a variety of applications.
Single-page Applications vs Multi-page Applications
So, how can you decide which option is best for your project? The key to choosing the correct framework lies in understanding your project’s requirements and how they map to your technology needs. Let’s take a look at some key features of both SPAs and MPAs and the pros and cons of each approach.
- The initial page load is normally faster than the initial page load of an SPA.
- MPA’s are ideal for users who need consistent navigation clues. Because MPAs are typically created using familiar multi-level menus.
- MPAs are a simpler option when designing monolith applications with only one state section.
- MPA’s are supported by many popular debugging tools included in the development IDEs.
- MPAs are generally cheaper to build because they require more established technologies.
- SEO is easier and more effective as most search engine crawlers were built for MPAs.
- Requests are handled by the server and most frameworks present tried and tested security.
- Most developers will have MPA experience already.
MPAs are generally cheaper to build because they use more established technologies and there are more front-end developers for hire.
- Every other page takes equally long to load because a request is sent to the server for data and UI rendering.
- Not all code re-used within a mobile application which means extra development time.
- Pages load faster when a user navigates within the application which results in a better user experience.
- Design and development times are reduced when compared to typical MPAs.
- This is a relatively young technology so many issues associated with SPA’s are getting resolved.
- SPA frameworks can be used to develop mobile applications that facilitate the code reusability down to the level of UI elements.
- It takes more time to initialize the application as the whole application has to be downloaded to the user’s device. Note: This is improved by server-side rendering.
- Enterprise apps can be harder to design and maintain as SPAs due to the larger number of files generated as well as the to need maintain two states between the SPA and the RESTful API.
- SPAs can drain battery power faster than MPAs, as there is a bigger workload on the device browser.
- SPA’s require more effort and knowledge to debug. This is because developers have to use their browser’s integrated development tools rather than IDEs.
- Code can also be hard to trace. Especially when integrating third party modules and plugins.
- SEO optimization can be less effective with content loaded through AJAX. This is because SEO crawlers mostly rely on stable content within distinct pages. Note: Google now crawls SPAs with high fidelity. So this is only an issue on less popular search engines.
- SPAs are newer and as such your development team will need to be familiar with the specific framework and tools (eg: NPM, Webpack, SystemJS, Gulp). This skill requirement can increase the hourly rate of your team.
- SPAs are generally more expensive to build because they require developers to know newer technologies. Debugging is slower and harder. There are also less 3rd party libraries to use to keep costs down
Single-page Application Examples
Popular Single-page Application Frameworks
If you have decided that building an SPA best suits your project, there is still the small matter of selecting a Single-page Application framework. This is a hotly debated topic (I’m not kidding, typing ‘Angular vs React’ is like stepping into a war zone) and one that is beyond the scope of this article.
But I will leave you with a list of the 5 most popular and well-supported options. I suggest you apply the same rigorous analysis we carried out above to select the most appropriate framework for your project.
Companies Using SPAs
SPAs provide a smooth and responsive experience, allowing users to interact with the app without having to wait for new pages to load. This can make the app feel faster and more responsive, and in turn improve user satisfaction. Some examples of companies that use SPAs include Facebook, Twitter, and Google.
SPA or MPA? Which to Choose for Your Project
Improvements in the “snappiness” of an application and a richer, more immersive user experience are often cited as key reasons to go with Single-page Applications. The recent SPA redesigns of streaming music site Pandora and Google’s Gmail platform are great examples of this in practice. But, as we noted with Twitter, these benefits are not guaranteed. It is vital to take a considered, project-by-project approach to choosing your technology stack. Not doing so can result in emotions or social pressures hijacking the decision process.
The risks fall into a few broad categories: talent skills, talent cost, stability, SEO, and security. These shortcomings are not unusual for a new technology and are being fixed at pace thanks to an active and motivated community. They are, however, still factors that need to be considered in your decision-making process. If you find you are struggling to find the right talent for your project why not get in touch. Sourcing great talent is what we do best at Scalable Path.