The Web is a very different place than it was even a few years ago. Line-of-business applications need to provide an interactive experience that doesn’t feel slow or outdated when compared to consumer apps that their users encounter every day (e.g., Gmail, Google Instant Search, Facebook and Twitter.) Workflows have also changed. A financial analyst might be IMing while simultaneously reviewing stock prices and completing a transaction. The interactions could be from his/her desktop, tablet or mobile phone.
Recognizing this shift to fast, task-oriented UIs and complex, cross-functional workflows, several of our clients have asked: “Should we redesign our current SaaS or Web application as a Single Page Application?”
If you want greater user engagement and higher productivity for completing tasks or interactively exploring data, the short answer is yes.
Let me explain a bit more and give specifics.
The state of page-driven Web and SaaS applications
Some of the challenges faced by typical page-driven Web and SaaS applications are:
- Page reloads are required for every new piece of content or form submitted. The page re-rendering and network latency creates a significant discontinuity no matter how well it is managed. This negatively impacts user experience and productivity.
- Because the page completely reloads on each significant user interaction, there is a lot of network traffic. This particularly impacts mobile where bandwidth can be limited.
- Web applications don’t work offline. If there is restricted or slow server connectivity or the connection drops entirely, the Web application is pretty much worthless.
- Desktop and mobile experiences are not continuous and fluid.
Redesign Web apps as Single Page Applications
Incremental changes to existing HTML Web applications can only go so far to meet the demands of the real-time Web. Redesigning page-driven Web applications as Single Page Applications (SPAs) can address the need for low latencies, sophistication of features and simplicity of design. The same API can also be used to drive equivalent native mobile applications or B2B integrations.
What is a Single Page Application?
A SPA is a Web application that fits on a single Web page and can redraw any part of the UI without requiring a server round trip to retrieve HTML. A user can move around the application, fill out forms or conduct any normal activity without significant perceived latencies.
This is achieved by separating the data from the presentation of data. Behind the scenes, once the initial page (HTML, JS, CSS) loads, subsequent navigations are handled without a full page load. Additional content is requested via an asynchronous server request and the browser then generates HTML or DOM dynamically. Features become available as they are required, either as page fragments (e.g., infinite scroll) or as complete screen modules. This results in faster navigation, more efficient network transfers and a more continuous and fluid experience for the end user.
Elevator pitch summary of why use an SPA
- Faster navigation and greater responsivity
An SPA minimizes application response times by moving working data and business logic as much as possible from the server to the browser. This means a significant speed boost in both actual and perceived latencies. Data validation, authentication and authorization remain securely managed by the server. - Increased user engagement and productivity
A SPA removes the jarring page change when a user clicks on a link. Users stay engaged and active at all times, never waiting for a page to reload or a form to submit or multi-page listing to refresh. This also means applications can supply slicker, more customized non-linear experiences for completing tasks or interactively exploring data.
- More efficient network transfers
Communication with the server is done in small chunks. This lighter payload transmits across the network more quickly and the browser can incorporate the new piece of content more quickly than if it has to redraw a whole page. Data is packaged up in small objects (e.g., XML or JSON), which is particularly beneficial for bandwidth-limited connections or mobile devices.
- Offline functionality
Unlike a page-driven Web application, an SPA can go offline if there is a drop in server connectivity. When the connection resumes, the app can synchronize any locally modified data with the server. Anyone who travels on airplanes knows how important this can be. - Continuity between Web and mobile
- In the age of the real-time Web, applications need to be available in the environment where your users are and in whatever form is appropriate for that platform (tablet, mobile phone, desktop or whatever new wearable computers may be released). The APIs that drive SPAs can provide uniform and context-adaptive access to Web, mobile or other multi-channel device clients.
- Faster time to market for updates
Modularity is at the core of SPAs. Good modularization makes building and packaging easier, makes testing easier and defines how maintainable the code is. This translates directly into faster time to market for updates and new functionality.
Future-proof your strategy
SaaS technology and design are evolving so rapidly that it’s difficult to distinguish trend bubbles from sustainable shifts. I think it is safe to say that SPAs are the latter. Speed, modular design, mobile continuity and significantly better user experience are core competitive advantages of SPAs that have long-term staying power.
To paraphrase Jeff Bezos, nobody is going to wake up 10 years from now and wish their SaaS application was slower or harder to use. Instead we know the energy and investment we put into redesigning SaaS as SPAs today will still be paying dividends for stakeholders and customers years from now.
Paul Giurata is the managing partner for Catalyst Resources, a user experience and application design firm headquartered in Silicon Valley. He and his teams have worked on more than 450 software projects in Financial Services, SaaS, Life Sciences / Biotech and mission-critical Systems. For more information, contact info@catalystresources.com.