Hybrid Application Best Practises
Recently I was asked by a partner for some recommendation for Codova best practises. Since there was little on the internet I put together one. If anyone has any comments or recommendation I may have left out, please add these to the comments at the end or email so I can put them in the V2 of the document.
This post covers the recommended practises for developing Phonegap, Cordova and hybrid applications on mobile devices.
The following are key recommendations when working with any hybrid application.
Use Single Page Application (SPA) frameworks
SPA frameworks are optimized for mobile devices and have underlying fixes to address device fragmentation and browser incompatibilities. They also address common browser issues such as the 300ms tap delay that makes the application feel sluggish.
Examples of these include SAPUI5, Ionic Framework, OnsenUI and Ratchet.
The intention of these frameworks is to provide not just a website, but the user interface and data manipulation frameworks that allow data to be consumed via standard HTTP based APIs such as REST or OData.
Many of these frameworks also adopt and encourage good design and development practices by enforcing design paradigms such as MVC or MVVM that allow modularization of code. In addition, such design paradigms often provide a framework for test driven development.
It is recommended that the developer focus on using frameworks that allow injection of HTML fragments into the DOM rather than reloading a page. Reloading an entire HTML page requires the browser to reinitialize not only the DOM but also any frameworks associated with the Web page such as the entire Cordova framework. Until the framework as reported as being reinitialized (via firing the DeviceReady event again) the application execution cannot proceed. This will quickly become a significant bottleneck in all but the simplest projects.
There are many Web frameworks available that allow DOM injection such as Backbone, Mustache, Handlebars or as part of other frameworks such as Knockout, Ember, Angular and SAPUI5. These allow a template to be bound to data, typically data from an AJAX call, then injected into the DOM for performance.
The optimized code will significantly reduce the size of the application, which in turn will improve installation time and the overall responsiveness of the application.
Use newest Cordova/Phonegap
Newer versions of Cordova and Phonegap have much improved memory management and better support for caching and plugins.
Since a mobile device has a limited memory capacity, make sure to you are running on the latest version.
The newer versions of Cordova and Phonegap also support newer devices and allow for enhanced debugging integration making for an improved developer experience, particularly when debugging HTML code on the device.
When not to use the Hybrid approach
There is however times where it is not appropriate to consider a hybrid approach. A typically example is where the handset being considered is a low-end feature phone. Such devices may have a good graphics processor or a good CPU or lots of memory, but not all of these features together. In this case the developer should consider very carefully whether the app they are delivering will run satisfactorily on a lower powered device.
This is particularly true of applications such as games or real-time dashboards where CPU or graphics processing intensity is high. If such limitations are not accounted for, the application will end up delivering a poor user experience that could possibly result in the application failing to get into the app store.
There are few recommendations for developing Hybrid Applications but they should be followed thoroughly to prevent a poor user experience and possible issues being deployed to the device vendor’s applications store.
These recommendations are:
➢ Create the UI on the device and download only data
➢ Use a framework
➢ Optimize code via a toolchain
➢ Choose you devices wisely
I hope this proves useful to someone and feel free to add comments so I can update this to V2 🙂