Instrumenting an Angular Single Page Application (SPA)
A single page web application, as the name suggests, is a web application that fits itself on to a single web page with the goal of providing its users an experience similar to that of desktop applications.
In traditional websites, when a user navigates from one page to another, the associated HTML, Javascript, CSS etc is rendered each time a new page loads. In single page applications, all of the necessary code is loaded once and changed when needed in response to user actions. The page does not reload during the entire user session.
Because of these characteristics, SPAs lend themselves to the following benefits:
- Provides the user better experience- The web pages are extremely fast and responsive.
-
Allows users to work offline- Even if the user loses internet connectivity, he/she can still continue working because all the pages are already loaded in a SPA.
Angular JS is a full featured SPA framework,with the help of which single page applications can be created. In AngularJS, routing is what allows you to create Single Page Applications. Routes in AngularJS are used to route the user to a different view of an application. This routing is done on the same HTML page so that the user has the experience that he has not left the page.
eG RUM is capable of monitoring user experience with single-page applications created using the Angular JS framework. For SPAs, eG RUM monitors 'virtual page views', in addition to base pages, iFrames, and AJAX page views. A virtual page view / page transition, also known as a soft navigation, is a hit that is tracked as a page view, even when no new web page has actually been loaded into the browser. Typically, virtual page views are fired by calling a Javascript - for instance, when route changes - presenting the user with a different view of the application, but without any change in the main URL. Using eG RUM, administrators can track the load time of virtual pages and capture virtual page errors. Detailed diagnostics lead administrators to the exact virtual pages that are slow/erroneous, and also indicate the underlying Angular component name and its execution status. This greatly helps in troubleshooting the poor performance of virtual pages.
The first step to monitoring the performance of an Angular SPA is to RUM-enable it. This involves the following broad tasks:
- RUM-enabling the base page, AJAX, and iFrames in the SPA
- RUM-enabling the virtual pages in the SPA
RUM-Enabling the Base Pages, Iframes, and AJAX Pages in the SPA
