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.
Introduction
This post covers the recommended practises for developing Phonegap, Cordova and hybrid applications on mobile devices.
Typically, a hybrid application will consist of a core of HTML file that uses JavaScript and CSS to provide a user interface, business logic and optionally access to a database layer. However, the true value of Cordova is to provide a Web application with easy access to the native features of the mobile device. These features are usually withheld due to the sandboxed nature of the JavaScript runtime. SAP has added extended the set of Cordova plugins by providing Kapsel. This is a set of plugins that provide an API to the functionality of the SAP Mobile Platform 3 (SMP3) platform.
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.
For example, Angular has a UI-Router that provides navigation between views based on html templates. These templates are loaded into the DOM to avoid re-initialization of the JavaScript environment.
Create the UI in JavaScript on the client
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.
Ideally, a project should be structured such that it only requests runtime data from the remote server, but not JavaScript or HTML. All runtime files such as HTML, CSS and JavaScript should all be pre-packaged on the device as part of the installed application. This package can, for example, be updated through the use of plugins such as the Kapsel AppUpdate plugin or the Phonegap Hydra plugin.
Optimize JavaScript
To improve performance and reduce memory consumption, the developer should remember to use a workflow tool such as Grunt or GULP to minify, obfuscate and compress the JavaScript, CSS, Images and HTML code.
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.
Conclusion
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 :smile:
