These days, organizations increasingly understand the importance of providing a delightful user experience to their customers as a key contributor to achieving their business objectives. They also increasingly realize that the performance of their websites, as experienced by the customers, is critically important to providing a good customer experience.
Similarly, organizations are also aware that their customers are accessing their websites from mobile browsers, that mobile traffic is growing faster than traditional desktop/web traffic, and that users of mobile devices are accustomed to the speed and performance of native mobile applications.
Consequently, companies know that to meet the expectations of these ever more mobile customers they need to adopt strategies and technologies that provide native app-like experience and performance in order to meet the demands of their customers and to retain, engage, and satisfy them.
As a result, many companies are building or starting to build parts of their web experiences using an emerging web design paradigm referred to as Single-Page Applications. Web experiences designed using the SPA approach have several advantages that directly address the challenges described above.
First, Single-Page Applications make it easier to build web experiences that more closely mimic a native app-like experience within the browser of the mobile device without having to build and distribute a hybrid-native mobile application. This avoids having to distribute the app through the app store, which entails waiting for app store approval cycles and waiting for customers to download the updated app. Rather, updating the app is as simple as updating the code on your server, resulting in much shorter release cycles, perhaps daily rather than bi-weekly or longer.
Second, Single-Page Applications support rich interactions with multiple components on a page, which may have many intermediate states (menus, selections, items clicked etc.) and which can be harder to implement with server-side rendering.
Third, Single-Page Applications can redraw pretty much any part of the UI without requiring a full roundtrip to the server to retrieve new presentation content (HTML). By putting more logic in the client code of the SPA and letting the app in the browser handle the separate data and view layers, this approach can drastically improve performance/response time by reducing the trips to the server which are even more crucial on mobile devices because of the potential network delays associated with mobile networks.
But without that round trip to the server or change in control, how do you monitor the performance of the virtual pages in your Single-Page Application as part of your real-user monitoring strategy?
Measuring performance of standard web pages is pretty straight forward as each request for a new page triggers a request to the server with a change of control for the server to send the new content back to the browser on the device where the timing API of the browser can be used to track how long it takes for every piece of content to load and for the browser to build, render, and display the content.
In the case of Single-Page Applications, however, multiple pages of the content are sent the first time the page is loaded and events on each page of the application (such as clicking on a navigation button) trigger the client browser itself to load another page of the SPA without any control change to the server, even if the newly loaded page does load additional resources via the XML HTTP Request (XHR) call.
Without the change in control to the server, it’s harder for traditional web real-user javascript injection monitoring to measure the performance of the individual pages of a Single-Page Application, yet it is just as important for developers to be able to understand the performance of the SPA web content to ensure that their users have an optimal experience.
Introducing Single-Page Application Performance Monitoring
Well, now you can have the best of both worlds: the performance and UI/UX advantages of SPAs with the with the performance monitoring capabilities of AppDynamics Real-User Monitoring.
AppDynamics’ Summer ’15 Release of Browser Real-User Monitoring now supports automatic detection and monitoring of Single-Page Applications built in the popular Angular.js framework and a manual API for monitoring of Single-Page Applications built using other popular or emerging frameworks such as Ember and Backbone.
With this new SPA performance monitoring capability, Browser Real-User Monitoring can now monitor the virtual pages of your Single-Page Applications right alongside the traditional HTML, Javascript, and CSS pages of your website as part of a comprehensive End-User Monitoring solution.
You’ll definitely want all the benefits real-user monitoring brings you, like understanding UX around the globe, gaining valuable insights into your users and their habits, and, of course, having real-time, end-to-end visibility to identify and quickly resolve trouble spots. (If you’re not already familiar with our real-user monitoring solutions, you’ll find more information here.)