High-performance Cordova hybrid mobile apps
Christian Karasiewicz 270005XS4E Visits (8295)
In the first blog post of my series about better managing your mobile application projects, I mentioned that mobile performance is still an overlooked and improperly-defined mobile project requirement. But what if we did define our performance requirements? How can we actually meet these requirements? In other words, how can we build a high-performance mobile enterprise application?
I decided to write a blog post on this topic given my recent experience in a mobile banking project. To be more specific, I will be focusing on the Apache Cordova hybrid mobile app, which is a popular choice for mobile enterprise because it has good cross-platform support and development skills reuse.
When we talk about mobile performance, what we generally measure is the loading and execution time and the responsiveness and smoothness of user interactions.
In the following sections, I will talk about how we can improve mobile application performance in these two areas.
Improving application loading and execution time
Avoid excessive network access.
Unless your mobile application is operating purely offline, it is common for a mobile enterprise application to access server data or services. Because network accessing speed is relatively slow and unstable, this can lead to potential delays in response. If your application requires network access, it would be wise to minimize those network requests by caching static resources in your application or by preloading the required information and content in a batch that has a minimal set of requests when your application starts.
Minimize the number of requests and size of content sent to Cordova plug-ins.
Cordova is doing a great job of providing native access to the mobile web application. However, there are always overhead costs when invoking the logic and waiting—sometimes up to hundreds of milliseconds—for callback from the Cordova plug-ins. If your application has to call on numerous sequence functions from customized Cordova plug-ins, it is better to group these functions in a single call in order to avoid the overhead costs across the web and Cordova tiers. If you need to pass large content, such as base64 images or PDFs that are going to be reused for a number of customized Cordova plug-ins, you should consider storing the content in the native layer and returning the content key back to the web tier. By doing this, you would be able to retrieve the data by the key instead of passing the content a number of times across the web and Cordova tiers.
Leverage native code for heavy computation operation.
Improving responsiveness and smoothness of user interactions
Handle the "300-millisecond click delay" on mobile devices.
Keep graphics and style simple.
CSS3 provides different modules to help us easily achieve wonderful styles and effects. But improper or excessive use of these styles can actually kill the performance of your application. In modern user interface development, designers keep on adding transparency and shadows to elements, and users love this. However, these opaque styles and shadows are expensive due to the computation power required to render them, especially when there are many elements applied and those effects overlay each other. Some of the mobile devices and operating systems are supporting hardware acceleration on this, but there is still a limit to these devices’ hardware memory. Excessive use of hardware acceleration can cause memory swapping, which can cause performance hits. Try to keep the graphics and style of your application simple and test everything carefully on actual mobile devices.
Last but not least, it is critical to test and benchmark your application on your targeted devices. This should be done regularly even after the application has been rolled out. Performance is not a one-off activity; it should be considered a “business as usual” activity.
Can you think of other performance tips from your own projects? Please share your experience here or follow me on Twitter @PatrickCSFan.