Now that we have built the same application using a couple of different TypeScript compatible libraries, we can compare apples with apples in terms of performance. Each framework is loading an HTML page, which will load the required libraries, along with the bootstrap.css files, and any dependent packages. Each sample application is doing exactly the same things, which include the following:

• Loading an array of objects to use as the default collection
• Rendering a single view for each of the objects in the collection

• Combining each single view into a view for the entire collection
• Rendering a title element, and a selected item element to show which item is currently selected
• Attaching the generated HTML to the DOM

If we run each version of this application in the same browser, and open up our handy developer tools, we can start to compare how long each of these frameworks takes in order to render our application to the browser, as shown in the following screenshot:

On the bottom-right of this screenshot, we can see three numbers represented in milliseconds. The important one is the Load number, which is the amount of time that the entire page took to load and render to the DOM. As we can see from this screenshot, the page took 73 milliseconds to render completely. This is the React version of our application.

Next up is Backbone, which loads in approximately 36 milliseconds:

Backbone is rendering the page in less than half of the time taken for React.

So how does Angular fare, then?

Here, we can see that Angular is rendering the page in approximately 316 milliseconds, which is 10 times slower than Backbone, and five times slower than React.

Last up is Aurelia, as follows:

Aurelia is taking a whopping 716 milliseconds to load and render the page.  In terms of performance, then, in first place is Backbone, which loads and renders the page in 36 milliseconds.  In second place is React, which loads and renders in 73 milliseconds, which is double the amount of time that Backbone took. In third place is Angular, which is taking 316 milliseconds, and in last place is Aurelia, at 716 milliseconds.

What we can see from these results, then, is that the more that a framework does the heavy lifting for you, the more processing it will be doing in the background, and the slower the page loading times will be. Comparing the amount of code we needed to write for Backbone, and the amount we needed to write for Aurelia, it is obvious that Aurelia is doing a lot of background work, identifying when we need to re-render an element, and automatically updating the DOM. While this sort of functionality is excellent from a development point of view, it can affect rendering performance.

As mentioned earlier in this chapter, when targeting older CPUs, and slower network connections, you may need to ensure that your application renders as fast as possible. This is particularly relevant if you are targeting older browsers on older phones in areas where network coverage is slow or intermittent. In the end, however, it is a matter of personal choice. If the Aurelia framework helps your team to build and deliver applications at a very high speed due to the small amount of code required, then the speed of rendering the application may not be of such importance.