As web developers look for new ways to deliver fast and beautiful web projects, an ever-growing trend has been the implementation of single page applications. But what is a single page application, and why should you consider them for your next project?
Obviously, a single page application (or “one page website”) is an application or website that is limited to a single page. What that means in theory and function though, is that a website or application is built to re-render its content and/or design without sending a request back to the server for new HTML. All of the HTML and CSS required for the entire site interaction is loaded when the application is first launched, and then the page changes and updates as the user interacts with it, without loading any new code. This, in theory, leads to faster navigation and a quicker, smoother user experience – or, at least, it should do.
How do single page applications work?
With more traditional application and web development, each time a user wants to load a new page, or interact with certain areas of a page, the site needs to send a request back to the server to load the next thing that the user is trying to do. Simplistically, single page applications can load the desired piece of content or design without having to go back to the server.
In many websites, lots of the data on the page will stay the same as you browse between pages – think headers, footers, menus, etc. The only parts of the page that change are the things a user interacts with. Single page applications load these parts of the page dynamically with JSON data and AJAX requests. This means that data conversion moves from server-side to client-side, and speeds up website performance for the user.
Why use single page applications?
Single page applications are increasing in popularity, particularly among startups and tech companies. Some benefits of single page applications are:
- Better UX: A more streamlined interface where things only load if they have to will result in an improved user experience.
- Faster performance: Eliminating requests to the server means “new pages” will load faster, and a user’s journey will be quick and smooth.
- Cost savings? It obviously depends on implementation, but because single page applications send fewer server requests, there’s less impact on server resources, which ultimately saves money.
What are the disadvantages of single page applications?
Although there are many benefits, single page applications do have their downsides:
- Unfamiliar usability: This kind of counteracts the general “Better UX” benefit, but if a single page application is implemented poorly, it can lead to an unfamiliar and frustrating user experience. For example, web users have a certain expectation of what should happen when they click the refresh or back button in their browser. A good single page application can mirror this functionality, but a bad one can lead to users exiting the page completely – and possibly never returning.
- Unsaved changes: For things like forms that require user input, traditional applications can warn users that they’re about to lose unsaved changes – this is trickier and sometimes impossible with single page applications.
- SEO/analytics: Search engine optimisation is fiddly with single page applications, because as far as the crawler is concerned, there is only one page, and it’s hard to figure out what all of that content is trying to rank for. Similarly, in terms of tracking traffic, with only one page it’s much harder to trace which users get to which part of the website.
- Bloated load: Although they give improved performance once the application is up and running, the extra code required to make single page applications work is going to bloat the initial page load time.
Should you use a single page application for your web project?
The answer to that question depends on whether the positives of single page applications outweigh the negatives for your specific project. But just remember, fundamentally, a user doesn’t really care how the interface is coded, rendered, or delivered, they just want it to load fast, and be easy to navigate.
Whichever way you decide to build your web project, you’ll need a fast and reliable way to host it. Visit the Fasthosts website for more information on CloudNX, our scalable and reliable next-generation cloud hosting platform.