My grandmother sent me a friend request on Facebook recently. She couldn’t even connect to the internet five years ago. As social media and email become more mainstream, the more widespread the expectation for a higher level of functionality, speed, and aesthetic appeal in our digital interactions. If you’re not considering these when building a web app, you’ll end up with a product that no one wants to use.
Understanding single-page applications
In a single-page application, the front-end code is only loaded once throughout the user session. All requests from the client following the initial page load are fulfilled through smaller, more targeted API calls to the back end, with only relevant data being returned in the responses.
Benefits of single-page applications
The biggest benefit of building a web app as a single-page application is improved performance for users. Since the front-end code is loaded only once, subsequent requests within the application are fulfilled faster because there is less information being transmitted and also less that needs to be re-rendered in the browser. You can opt to display a spinner while data is being fetched, so the user knows that their request is processing. Nielsen/Norman Group has studied the UX benefit of progress indicators in cases like this. They cite a study in which users who were shown an animated loop during a page load were willing to wait on average 3 times longer than those who did not see any progress indicators.
Opting to build a single-page application can also benefit your development pipeline. Work can be split between front-end and back end developers, ideally speeding up the process. The front-end developers are focused on building a beautiful user experience, while the back end developers are focused on the data model and building efficient APIs. While this approach to building a web app can definitely speed up the timeline, it requires a high level of focus and collaboration between both teams. The back-end teams need to provide clear API contracts and documentation so that the front-end team knows exactly which APIs to call and what data will be provided. The front-end team needs to be involved in the API design to provide input on what makes the most sense based on the application flow. Without this collaboration, the need for re-work might be introduced that could reduce the benefits of parallel front-end and back-end development.
With the right planning, the same APIs that are built for the web app can also be re-used for a mobile application This allows you to get to market faster with a mobile offering because developers can be off and running quickly with the right API documentation in hand.
Downsides of single-page applications
The biggest concern that most people have with single-page applications is that they aren’t as SEO-friendly. Search engine crawlers were designed for multi-page applications, so SPAs are less likely to show up in search results without additional work. So, you probably should not attempt to build pages with high marketing value as SPAs. This landscape is improving and there are tools like static site generators that help with SEO, but it’s still a primary consideration.
It’s also important to consider your development teams’ expertise and capacity. SPAs require specialized front-end knowledge to build and maintain them efficiently. They can also be harder to debug because they require the use of browser-based development tools as opposed to IDEs. Additionally, state needs to be maintained between the SPA and the RESTful API.
Tools and frameworks for building SPAs
The value of a better experience
If you’re building a web app, consider the benefits of implementing it with a modern front end. Creating the best possible experience for consumer-facing applications is a near-imperative due to rising public expectations. However, a modern web app architecture will also help you derive greater value from internal applications: A better user interface makes people more efficient and can drive overall business.