Single-page application, pros and cons
SPA requests sent to the server are either structured data (XML/JSON) or chunks of HTML code to embed into the DOM. The server is relieved of the task of building views, as everything is handled by the client.
While at first glance SPA development may seem the simplest, easiest way to go, the fact is that building a good single-page web application that provides an optimal user experience is often a complex task that poses certain challenges. The main ones are:
This is the most frequent problem with hastily-built SPAs. Users think they are on a new page, but the URL remains unchanged and the browsing history is interrupted. If they use the browser’s “previous page” function, either nothing happens, or to their surprise, they end up on a previously-consulted site. When returning in the application, users will curse at the programmer if this resulted in a loss of their data or of their position in the journey. Which is unfortunate, because this usability glitch is avoidable: there are several ways to create a pseudo-history that works with web browsers. Of course, this requires extra work on the developer’s part. And don’t forget to manage the beforeunload event to warn the users of the risk of data loss.
Search Engine Optimisation Problems
Almost all existing single-page applications are very partially or not at all accessible. The fact is that developing a decent SPA that also respects all the laws of accessibility is a major challenge. That said, all efforts to enhance accessibility, even the slightest — for example, providing a robust, valid, semantic HTML code and a browsing history — all benefit SEO.
Most statistical tools, such as Google Analytics, are based on the mechanism of loading complete pages. They can’t record the display of pseudo-pages generated by SPAs, since the app refreshes the display based on user actions without asking the server to get new HTML code. Since the execution is contained in the browser side, you must develop some kind of tool to track user movement within your application. In other words, you’ll need a function to keep the server in the loop and to record the state of the application at key points. It's also important to understand that if statistical services aren’t working, neither will most of the available performance-monitoring tools on the market.
Single-page applications are one of those ideas that can look good from far, but may be far from good. However, if you have good reasons to go for this solution, a quality product will require an investment in time, skills, best practices and resources. If you develop a SPA, use frameworks specifically designed for this purpose, like Ember.js, since they ease development while providing workarounds for some of the issues described above.
If you’re developing just a web site, encapsulating it in a SPA isn’t the best idea (remember: SEO, accessibility, browsing, statistics, etc.). In fact, it’s reminiscent of those sites created in Flash about twenty years ago, with similar problems, like loading times, referencing, user-friendliness, etc. In fact, if you have a look at some of the more “creative” SPA sites, you realize that some designers have recreated all of the Flash problems with modern technologies: “Look, it’s pretty, it moves, it’s interactive, it’s a rich user experience.”
The best examples of its use are those where the application, while residing on the Web, doesn’t need to “be part of the Web”. They can be a good solution if you need off-line functionality — something a Web site can’t provide. They can also be used to create more modern, functional interfaces for legacy systems, or control panels for devices. And one of their great advantages is to be multi-platform by default (Windows, Linux, OSX, Android, iOS…). SPAs are also well suited for complex applications that process a lot of data in interaction with the user. Think of the Gmail web client, for example.
To sum it up, single-page web applications are not the solution to all your problems, but they are a good choice in some circumstances. As with any technology, they have their advantages, drawbacks and challenges.