Cordova Apps - Rendering Performance

Try it out for your Cordova apps - setup instructions

When developing a mobile app, one of the concerns of using the Hybrid approach is performance. Achieving smooth experience like a native app is important for Hybrid apps and developer tools for Android and iOS have been helping to a great deal.

To try it out on your Cordova apps, look at these setup instructions.

Background: browser-perf

Browser-perf is a tool to measure performance for websites on browsers like Chrome and Safari. Apart from other things, it leverages the remote debugging protocol of the browsers to look at the various timeline events. It also leverages Selenium to replay typical user interactions. Combining these two, browser-perf gets performance metrics for websites during typical usage scenarios. The metrics include frames per second, time for layouts, style, paint, etc.

Demo

The demo below shows how the cordova apps are created, and how simple it is to hook them up to browser-perf to record the performance metrics. 

 

Running on your Cordova apps

You can test your existing Cordova apps on Android and iOS using the following steps. By default, "scroll-tests" are run, but if app's webview does not have a scroll, or you would like to test other interactions like clicks, swipes, etc, you can follow this tutorial.

Android (4.4)

1. Download and run Chromedriver
2. Ensure that the emulator is running, or the device is connected
3. Ensure that the Cordova app is already installed on the device/emulator
4. Copy this config file, and change values for androidActivity and androidPackage.
5. Run browser-perf --config-file=configfile.json

iOS

1. Install Appium using npm install -g appium and follow its setup instructions.
2. Note that the bundleId and app must be change. app must point to an ipa or a zip file's absolute location.
3. Run appium and start browser-perf with a config file like this.

How does it work - the details

The mobile environments are not vastly different, and just like the desktop browsers, we would need the two things

• A way to automate the cordova apps or mobile browsers
• A mechanism to record timeline and profiling data when the automation occurs.

Android and iOS are slightly different, but the fact that they have similar remote debugging protocols makes it a little easy.

Android

Chromedriver provides full support for the selenium JSON wire protocol for Chrome and Webviews based on Chrome for Android. The "performance" log type is also fully supported to get timeline events. The tricky part is to pick up the events that are similar to about:tracing on desktop chrome. This can be done using adb, and adb_trace shows how that can be done. In case of browser-perf, the relevant parts of the code were ported to work with Node. Thus, all required data for calculating metrics are now available.

iOS

There are many drivers to automate Safari and Hybrid apps on iOS. I found that appium works great, and is pretty simple to install. Appium also relies on the remote debug protocol to automate Safari or the webviews. The performance log was however not initially implemented.
I was able to hack around a little and my pull request to add this feature finally landed in [email protected]. Timeline metrics can now be collected just as easily on Safari and the webviews on iOS emulators and devices.

Next Steps

Now that the metrics are recorded, it would be great to record them every time a change is made to the cordova app. Using a tool like perfjankie, a graph (like this) can be plotted over time to see how the various metrics change as the source code is changed. Watch out this space for more of my experiments with performance.