The Reinvention of Single Page Applications (SPA)
Mike Reynolds
2017-10-10
Single Page Application (SPA) solutions are experiencing a surge in popularity and quickly becoming the talk of the industry. Though far from new, these solutions have been matured with the emergence of client-side frameworks, like Angular and React.JS, and are being introduced into enterprise applications in new ways.
For companies seeking to optimize performance levels, as well improve development speed, SEO rankings, and infrastructure, these solutions are too important to be discounted. However, when considering a SPA solution, it’s imperative to understand the reinvented solution and its inherent benefits and shortcomings.
A Quick History Lesson 📚
Dating back to the Java Pet Store app in the late ’90s, the original server-side approaches were designed to solve various development challenges and streamline the creation of multi-page websites using patterns such as Model View Control (MVC).
Through the creation of additional libraries and frameworks, such as Java Standard Tag Library and Struts, adoption of MVC pattern increased but client-side JavaScript was avoided until jQuery solved the browser compatibility issues pleasing JS (released 2006). SPA pattern for public-facing websites was discussed in 2002 but in addition to browser compatibility issues, it was also limited due to poor support for SEO and the emergence of content management platforms.
While workarounds existed for improving SEO rankings with traditional SPAs, they simply introduced more complexity that undercut the time and cost savings that the solutions were built to provide.
In an effort to simplify the development and testing of Rich Internet Apps (RIAs), AngularJS was released in 2010, which introduced the concept of client-side Model View Controller (MVC). This advancement prompted organizations to rethink how they designed, resourced, implemented, and deployed their web applications.
However, the early versions of these frameworks lacked the advanced capabilities needed for large-scale implementations and were consequently relegated to delivering small pieces of functionality like list sorting or multi-step form presentation.
Since then, these frameworks have evolved into fully functional platforms, addressing not only the issues of their earlier uses but also some issues that hindered the success of traditional SPA solutions. Collectively, these advancements made it easier to integrate SPAs into an enterprise architecture stack while still being able to take advantage of previous investments in areas such as security, web services, and caching.
The Turning Point ↩️
With all the technical advances that have made SPAs a viable solution for IT, it is the way that these new frameworks manage the separation of content from presentation, and the corresponding SEO impact, that has really piqued the interest of Marketers.
Traditionally, when search engines index pages on a site, they have to parse the underlying HTML to extract the different elements used for calculating the page ranking. Starting in 2018, Google, who is the primary contributor to Angular, has announced that they will begin boosting the rankings of SPAs that provide content outside of presentation, a move that should lead to better accuracy and consistency of rankings while pushing companies to focus on making content relevant and accessible.
Pros and Cons of Traditional SPA Solutions 💚 🔴
💚
As mentioned above, there are many benefits to SPA solutions such as improved application performance and consistency, and reduced development time and infrastructure costs. Additionally, the usage of modern JavaScript libraries, such as TypeScript, provide for greater consistency and scalability.
The newer frameworks also provide better capabilities for aligning with modern standards, such as responsive design and accessibility. In shifting focus to the client-side, these solutions are effectively changing the development paradigm. For many organizations, this can mean decoupling content and presentation from existing applications, developing services for exposing content or data from back-end systems, and adding or training resources for front-end development.
At the same time, it also means that organizations can reduce the number of application servers (and licenses) that they would otherwise need to support legacy frameworks. For organizations that are dependent on redundant, commercially-licensed J2EE application servers to support monolithic .war file deployments, this could mean significant savings.
After the initial migration, this shift continues to provide long-term benefits, including lower development costs, and reduced overhead and maintenance on back-end servers. It can also allow organizations to move to a more agile development and delivery model. Using a componentized, service-based approach, SPA solutions can focus on delivering the user experience asynchronously, allowing data-calls to focus on small, cacheable chunks of data or content for a given section, rather than waiting for an entire page to load.
The ability to present content and data in these discrete chunks enables businesses to leverage data from many different repositories, for use across a variety of channels and customer touchpoints, under a single unified experience. By separating the presentation from the content and data, development teams can work at different speeds while still being integrated for the overall solution. This means that the presentation tier can be updated to meet business needs without having to wait for a full application deployment.
🔴
While these benefits certainly make SPA solutions appealing, traditional solutions models have a number of shortcomings that center on their interplay with Content Management Systems (CMS). When using a CMS, a SPA solution often inhibits the ability for contributors to use basic experience management features because the presentation templates are predefined. This forces the CMS into needing to support a “headless” model where content is managed within the CMS, but its presentation; colors, fonts, layout, targeting, and personalization; is defined outside of the system.
For those seeking to leverage the full experience management features provided to them by their CMS – including inline preview features and personalization, amongst others – these solutions have been cumbersome, and a cause of discourse between marketers and IT teams.
With the development of new frameworks and the advancement of Google Search, truly functional SPA solutions that were once reserved for LinkedIn and Facebook can now be easily leveraged by any company or organization seeking to advance their management of multi-channel digital experiences.
At Authentic, we are currently focusing on delivering the very first contributor-centric SPA solution based on Angular – enabling businesses to obtain the full benefits of SPA solutions, while retaining the full experience management capabilities provided for in a CMS. For those seeking improved development speed, reduced overhead and hardware costs, and a move to micro-services, SPA solutions should be seriously considered.