One of the most noticeable recent trends in web development is the single-page application, or SPA for short. This concept swept like a hurricane through an industry longing for new and exciting ways to make user experiences slicker.

Written by:
Vitaly Plitchenko,
Market Research Specialist

 

What are SPAs and what makes them so good?

Dominating the market

Mindful design is key

Other pitfalls you should be wary of

Best tools for SPA development

Conclusion

 

As a software R&D company, Apriorit saw many requests from our clients for single-page application development. We’ve helped clients port their existing on-premise solutions to web and develop new single-page applications from scratch, delivering better UI and performance in both cases.

However, with any popular and widely successful thing, there are always people who take it too far. Single-page applications brilliantly fit certain use cases, but others not so much. In order to make an SPA successful, you need an experienced development team and a vision for where your app is heading.

Our motivation for this article was to share our experience with SPAs to help you decide whether they’re worth it and to understand what pitfalls you can expect if you try to create a single-page application.

 

What are SPAs and what makes them so good?

The concept of the single-page application sounds good on paper, but when it comes to actually planning an app it can be hard to grasp all the advantages.

At their core, single-page applications are based on Ajax, which is designed for sending and processing requests from the server in the background without the need to reload a whole page. This allows you to create applications that provide UI and functionality similar to desktop apps, yet fit on a single page in your browser.

One of the big advantages of SPA technology is that it allows you to port on-premise applications to the web without making big changes to the UI or established workflow. A smooth and familiar desktop-like user experience is undoubtedly the biggest strength of an SPA.

Because the page is never fully reloaded, single-page application UI has much better response times. The fact that the page doesn’t need to reload also makes workflows that involve multiple screens more streamlined than with regular web applications where you’re forced to constantly switch tabs and reload pages.

Apart from a slick user experience, single-page applications can also provide better performance and better stability. Asynchronous requests, when done right, can reduce server load and require less bandwidth. The core logic of a single-page application is usually fully downloaded on the first request, making it possible to perform most operations offline, providing a great solution for spotty internet connections.

 

Dominating the market

Looking at the advantages single-page applications provide, it’s easy to see why their rise happened so quickly. While certain ideas behind the technology first appeared within advanced Flash-based websites in late 90s, it wasn’t until the late 2000s that we saw its real emerge.

The late 90s and early 2000s were a turbulent time in web development. Plagued by browser wars and lack of clarity and standardization regarding JavaScript adoption, client-side web development stagnated. At the same time, server-side technology advanced rapidly.

In the mid-2000s, however, technologies for issuing server requests and downloading data independently of reloading a page started to become popular. Jesse James Garrett released an article in 2005 where he coined the term “Ajax,” standing for Asynchronous JavaScript and XML, and this concept quickly garnered popularity as the new way to think about and design apps. The idea behind Ajax is what allowed developers to move beyond thinking about a website as a collection of separate pages and instead start folding all functionality into apps that fit on a single page.

SPAs were propelled to the top by active support from Google, which adopted a single-page application format for many of its services including Gmail. Other internet giants, such as Amazon and Twitter, adopted the format as well, cementing its place at the forefront of web technologies.

Now, single-page applications are widespread and particularly popular among large companies for creating internal systems or porting old solutions to the web in order to streamline deployment and support.

As with any technology, however, there are some things that you need to be mindful of. Let’s look at some limitations and potential problems of single-page applications and see how they can be avoided.

 

Mindful design is key

The biggest quality that distinguishes single-page applications from traditional websites is that they’re very similar to on-premise software in terms of how they work and how they’re developed. While regular web apps can operate on thin clients since most processing happens on the server side, SPAs have much more happening on the client side, which may increase system requirements and pose additional challenges when it comes to optimization.

The structure of single-page applications is also similar to desktop apps. In regular web apps, functionality is spread across different loosely connected pages, and it’s easy to make changes to individual pages, add new pages, or delete existing pages.

In SPAs, logic is usually divided into different components that are easy to develop and support. But these components are designed from the ground up to fit together in a certain way, and it may be hard to change features of an app that involve several components, since any changes to a widely used component may have a big impact across the application.

This is why SPAs need to be created with foresight about future changes. Stakeholders need to have a vision for where an application will go in the future, what features will be added, and what may need to be changed or updated, allowing developers to account for potential changes at the design stage.

 

Other pitfalls you should be wary of

Apart from the difficulty of making incremental changes, it’s also harder to make major architectural changes to SPAs. If you need, for example, to switch the framework of a regular multi-page application, you can easily do so incrementally, changing one page at a time. SPAs don’t allow for such incremental changes, and you would need to port the entire application to a new framework at once.

This reinforces the fact that you need to be very careful when creating an SPA and make sure that architectural decisions are as future-proof as possible. Apart from that, there are also other pitfalls related to SPAs that you need to be mindful of.

For example, while this is not something that companies creating internal apps should necessarily be concerned about, SPAs have inherent problems with SEO optimization. In the past, it would’ve taken you a lot of effort to make your SPA correctly index, but luckily, the situation is now much improved.

In 2015, Google updated its web crawler to be able to crawl JavaScript and CSS files, thus allowing it to crawl Ajax applications and correctly index them. In practice, this doesn’t always work ideally, and sometimes you need to make special modifications to help the crawler; but generally, as long as you’re not blocking the Google crawler from crawling your CSS and JavaScript files, your application will be processed correctly.

Apart from SEO, routing in general can be a problem. Since web browsers use routing for bookmarking and navigation, it can be important for a smooth user experience that your SPA allow the use of routing tools. There are several ways to enable this, such as using a hash in the URL or using HTML 5 pushState, the latter being preferable.

Overall, routing isn’t a big deal, but it is something to keep in mind when developing an SPA and is a hurdle that multi-page applications don’t face. When developing routing, you also need to account for any cases when components aren’t loaded on time and make sure these scenarios are ironed out.

Other potential SPA problems can have a bigger impact on users. For example, while server-side performance can be increased with SPAs, this is not always the case for client-side performance. Memory leaks within SPAs can be more severe than within multi-page applications, since the page is never fully reloaded but persists for a long time, which can slow down even fast machines. And if an app is coded poorly, it can sometimes send even more requests to the server than a multi-page application.

Another major factor is security. With an SPA, clients download the whole application, which provides more opportunities for reverse engineering and finding vulnerabilities. In terms of security, SPAs are similar to regular on-premise apps. You need to make sure that all client-side logic is doubled on the server for verification and that users are granted access only based on their roles regardless of the request.

 

Best tools for SPA development

Despite their desktop-like nature, single-page applications are still developed using popular web tools. The most popular tools for developing SPAs are Angular and React.

Angular is an extremely universal framework that can be effectively used to create any type of web application. It’s very popular, and the tool of choice for the majority of SPA developers.

React is a little less universal, but has its own set of advantages. With React you need to write more code as there are fewer ready solutions, but you often get an app with better performance in the end. The React Native library allows you to use the React architecture with all its advantages on mobile devices.

 

Conclusion

Single-page applications are a complex subject, and it’s impossible to cover it all in one article. Each individual implementation will have its own set of problems.

In this article, we’ve covered the biggest advantages and drawbacks of single-page application technologies, which hopefully will help you enter into SPA development with a better understanding of what it entails. If you decide to make a single-page application and need an experienced development team that will be able to successfully deliver on time and within budget, you can always contact us and we’ll most likely have a team ready for you right away. 

Subscribe to updates