Powering up your OutSystems Applications — Part 2— Performance tracking with Javascript

Performance is not only about being fast, but it is also about using the power in your favor.

Some time ago I was thinking about ways that I can measure the real performance of a page load on the client-side.

I can easily measure it by creating my own logic to get the metrics based on the start and end of the actions that I wanted to measure. But that approach still dependent on everything that runs between browser, server and the OutSystems platform. In this way, I don’t have the latency of measuring it in the server-side of my OutSystems applications.

After some investigation, I got to know the Navigation Timing API from Web APIs (I have explained what are the Web APIs in the previous article).

This API provides us with a native javascript way of detecting browser’s interactions and the ability to measure those interactions.

So with that API, we can detect three types of interactions:

• navigate
• reload
• back_forward

You can find more information about that in the Mozilla Documentation.

Let's start with a simple example that we will measure the time that a simple screen takes to load.

I have created a simple test application in the OutSystems platform and I have also created a blank screen, in that screen I’ve added this Javascript code:

window.addEventListener('load',function(){
 let now = new Date().getTime();
 let loadingTime = now — performance.timing.navigationStart;
console.log(loadingTime + ' ms');
},false);

After publishing the module and run the application this is what we get:

It means that our simple screen took 1537 ms to load. Now we are going to make our Javascript code a bit better and more sophisticated, let’s track all events that the Navigation Timing API provides us:

window.addEventListener('load', function() {
  let now = new Date().getTime();
  let loadingTime = now - performance.timing.navigationStart; 
  let result = "";
  switch(performance.navigation.type) {
      case PerformanceNavigation.TYPE_NAVIGATE:
        result += "Navigation";
      break;
    case PerformanceNavigation.TYPE_RELOAD:
        result += "Reload";
      break;
    case PerformanceNavigation.TYPE_BACK_FORWARD:
        result += "History";
      break;
    default:
        result += "Unknown";
      break;
  }

  result += " " + loadingTime + " ms";
      
  console.log(result);
  
}, false);

Now our code is ready to track 3 different types of events and the results will be shown in the console.

I have also duplicated the screen and put a link in the first screen to the second one. In that way, we will be able to test the BACK_FORWARD event.

Let’s start to test the application to see how it looks like.

The first test is to open the application:

Took 1167 ms to load

For the second test we are going to navigate to the second page through the link that we created and then click in the back button of the browser:

Took 438 ms to go back

The third event that we can test is the reload of the page by clicking in the “Reload” button of the browser:

We can see that the duration of the events is very different between each other.

This is because of the way that the browser renders the page. In the first navigation to the page, the browser loads everything, while during the reload, because of the caching mechanism, it will take less time. Going back to the browser back button will load the ViewState content that was saved when you left the page. That is why the BACK_FORWARD event is the one that took less time in comparison with the other ones.

So, in the end, our code looks like:

window.addEventListener('load', function() {
  let now = new Date().getTime();
  let loadingTime = now - performance.timing.navigationStart; 
  let result = "";
  switch(performance.navigation.type) {
      case PerformanceNavigation.TYPE_NAVIGATE:
        result += "Navigation";
      break;
    case PerformanceNavigation.TYPE_RELOAD:
        result += "Reload";
      break;
    case PerformanceNavigation.TYPE_BACK_FORWARD:
        result += "History";
      break;
    default:
        result += "Unknown";
      break;
  }

  result += " " + loadingTime + " ms";
      
  console.log(result);
  
}, false);

From now on you can send those metrics to the server and do whatever you want with it; store in your database, send to your BI application, create reports or do any other procedure with that metrics.

This is an easy, simple and very useful Web API that is ready to be used by anyone. So please make use of it and improve the troubleshooting and logging of your applications.