Benefits and Considerations of Single Page Applications
What is a Single Page Application
A Single Page Application (SPA) is a web application or website that loads content dynamically in to a single page based on user interactions instead of reloading the entire page from the server. This works heavily client-side within the browser, minimising interruption in the user experience and providing a more fluid feel to web applications.
Why Angular
Typically SPAs will utilise a JavaScript library to enable the browser to load in the content and handle user interaction. There are a lot of JavaScript libraries available that help build SPAs including Facebook React and Google's Angular, but these are two of the more common libraries used.
After reviewing a few more modern approaches to develop SPAs Webnetism have opted to use Angular. Whilst React seemed to have a little more presence online we found that Angular seemed to offer better support and have easier to follow documentation. Angular is also seemed to be more often used alongside .Net core, the technology behind the scenes we build new web services with. There's a learning curve associated with any new language but Angular thus far has been very approachable once one has gotten their head around its conventions and capabilities.
Ultimately it's not that important of a choice, if we find we're not happy with Angular we can simply replace it without having to completely rewrite any underlying databases or systems we've built to communicate with them. From a development perspective this is by far one of the most attractive benefits of moving to SPA development and it encourages more modern development practices generally.
Benefits
Optimised resource loading
With Angular, when appropriately configured, each component defined can have its own set of styling and functionality, this allows the page to only load with the styling and scripts that it actually uses making the pages typically more lightweight.
Supports modern development principals
As mentioned above Angular encourages more modern development practices. It supports ideals like reusability, separation of concerns and structured/segmentation of code which go a long way to helping improve the quality and maintainability of a project.
Speed
End-users are going to get frustrated with a slow site so performance is always a concern, and regardless of whether SPAs are actually faster or not. Any user is going to get frustrated when a site feels slow, probably more so than over whether it actually is slow. A lot of the time as a result of user interaction in Angular there's not necessarily a requirement to make server requests and thus no wait time, actions are dealt with instantly. If there is a server request typically the request and response are purely data (usually JSON) and there's no messy overhead or unnecessary data sent in these so requesting and handling data becomes far more efficient and responsive. Many of the requests are asynchronous so any time associated with an action may not even be perceived by the user since they won't actually encounter it. User experience should be improved and an SPA should seem faster than a traditional site.
Considerations
SEO/Indexing
SEO has always been the biggest concern with SPAs but Google now indexes dynamically, actually running JavaScript to make JavaScript-powered web applications discoverable. This means that indexing a site shouldn't be an issue for sites where content is loaded in on the fly, like with SPAs.
From the research we've completed so long as the page is loaded within 5 seconds Googlebot shouldn't have any issues indexing your site (in reality pages typically won't take anywhere near 5 seconds to load) but there are things we can do to optimise the discoverability of content.
Bigger initial page load
Because of the heavy reliance on JavaScript libraries there is an increased overhead associated with the initial page load of an SPA. The initial download of a page could be fairly large but once downloaded most of this will be cached and can be reused throughout the site (if needed again). This initial download can be optimised though and reduced in size considerably to ensure the best performance. Efforts should be made to ensure that this download has been reduced in size as best possible.
Analytics/tracking
Traditionally Analytics relies on page loads to track users on a website. Since an SPA only has one initial load Analytics may be less able to track user flow on a website. Page views can be manually tracked with fairly minimal configuration, but still this needs to be done on SPAs.
Why are Webnetism moving in this direction
Developing SPAs gives Webnetism the ability to keep up with modern development practices. We've been long-time developers of ASP.Net WebForms, but we need to stay current and continue working with products that are well supported. Improvement of our internal development practices has been something of a focus for us over the last few years and moving to develop SPAs encourages this allowing us to approach development with much more flexibility.
If development companies are not constantly reviewing their development approaches and practices it doesn't take long before we're providing a substandard service to our clients and ultimately we want to ensure our clients are getting the best from us. SPAs are the best way for us to provide modern functioning websites and a better final product to our clients.
To find out about SPAs and how it might help your business
Get in touch