Customising your Native Applications' View for Motorola WebKit
An overview of the RhoElements performance improvement drive
The great thing about an open developer community is the ability to interact and work at a group and individual level with many of the developers out there. It really allows us to prioritize product feature sets and focus on the things that the greater community feels are a priority. It also allows us to get real-time feedback on the product and address any concerns that may arise in a more agile process. The RhoMobile Suite team really prides itself on being agile and producing a product that not only meets the needs of those developing enterprise cross-platform applications, but also does so with the utmost level of quality and performance. Recently there have been concerns that HTML5 cannot deliver a performant application but with the right techniques it can be done.
In the third of a series of blog posts we will start to tackle Native Applications on Motorola devices, by that I mean applications developed in RhoMobile Suite using the Model View controller paradigm making use of the built in JQueryMobile library and CSS which ship with the product. I'm not going to take a 'deep dive' here, this blog is designed to improve the out of the box experience with RhoMobile Suite 2.x all the way to the upcoming 2.2 & I'll highlight a few gotchas and tips to deliver an immediate performance perception improvement. This blog has been designed to address performance concerns I've been hearing from customers using Motorola WebKit running on Windows Mobile / Windows CE but can apply equally to any supported device or platform.
This is just an overview and first step, over the coming weeks and releases we'll be making further improvements to the performance and developer experience.
Modifying your CSS
There are two ways you can improve the out of the box experience and the first of these is by modifying the default CSS.
You will find your application's css file in its \public\css directory and if your application uses Motorola WebKit the framework will select the 're_webkit.css' styles. The problem with 're_webkit.css' is it is based heavily on the android.css and relies on lots of 'hover' styles, unnecessary in mobile applications. The first suggestion is to customize the default CSS file to match your company's style and making all hover styles equivalent to the up style, doing so will ensure a smoother scrolling performance.
The videos below show a native application with the default styling on the left and some customized styling on the right:
|Default Styling 'out of the box'|| ||Modified Styling|
|A native application built without modification to the default style||The same native application built with modified styling to remove hover parameters. Notice the improved scrolling performance. Also notice that I'm an engineer and not a designer!|
You can download the css file used in the video on the right at the bottom of this blog post (re_webkit.css), bear in mind that I am not a designer and this CSS was created solely to show the performance difference, it is left to the far more talented and creative reader to improve on this design.
Modifying the default JQueryMobile settings
It is possible to modify the behaviour of JQueryMobile to improve the performance on Motorola Windows Mobile / CE devices and also to improve user perception.
The JQueryMobile settings which can be configured are listed at http://jquerymobile.com/demos/1.2.0/docs/api/globalconfig.html; that API is actually specific to JQM 1.2.0 but will be largely identical to the version used in RhoMobile Suite (currently 1.0.1).
Native applications written in RMS provide a really convenient hook to configuring JQM; in your application's layout.erb file you'll see:
In the mobileinit function you can configure the settings as follows:
$.mobile.[configuration item]= [configuration setting];
In fact, depending on which version you are running you may already see the following options commented out:
// Uncomment these options in case of performance problem in pages transition //$.mobile.defaultPageTransition = 'none'; //$.mobile.defaultDialogTransition = 'none'; //$.mobile.ajaxEnabled = false; //$.mobile.pushStateEnabled = false; //$.mobile.loadingMessageDelay = 50; // in ms
The following table shows what effect each JQM setting will have with the Motorola WebKit Browser on Windows Mobile / Windows CE:
|Setting||Description from JQM documentation||Default Value|| Recommended Value with Motorola WebKit||Experience|
|defaultPageTransition||Set the default transition for page changes that use Ajax. Note: default changed from 'slide' to 'fade' in 1.1. Set to 'none' for no transitions.||Slide||None||Setting this value to None eliminates the choppy page transitions and reduces the time for each navigation.|
|defaultDialogTransition||Set the default transition for dialog changes that use Ajax. Set to 'none' for no transitions.||Pop||None||In order to keep the experience consistent this should be set to none.|
|ajaxEnabled||jQuery Mobile will automatically handle link clicks and form submissions through Ajax, when possible. If false, URL hash listening will be disabled as well, and URLs will load as ordinary HTTP requests.||True||Keep True||Changing this setting changes the fundamental behaviour of navigation, because the entire JQM library is being reloaded on each navigation the performance was degraded if this value was disabled.|
Enhancement to use history.replaceState in supported browsers, to convert the hash-based Ajax URL into the full document path. Note that we recommend disabling this feature if Ajax is disabled or if external links are used extensively.
|True||Keep True||In keeping with JQM recommendations this setting should be kept the same as ajaxEnabled.|
|loadingMessage||Set the text that appears when a page is loading. If set to false, the message will not appear at all.||False||"Loading..."||You should specify a custom message here to let your user know the device is doing something, 'Loading...' seems fairly innofensive.|
|loadingMessageDelay||Not documented||50||5||Although 50ms seems perfectly adequate, just to be sure I reduced this to 5ms to ensure the loading message was always displayed.|
This will return true if the browser's user agent contains 'Motorola WebKit', as is the case by default.
The second technique is to use some inline Ruby:
<% if System::get_property('webview_framework') =~ /^WEBKIT/ %>
Calling get_property('webview_framework') will return "WEBKIT/MOTOROLA" if you are running on a Motorola device running Windows Mobile / Windows CE.
You may wish to differentiate between whether you are running on a Windows Motorola device or an Android Motorola device (such as the ET1 or MC40), in which case you can use the Ruby callget_property('os_version').
The videos below show a comparison of user interaction in an application using JQueryMobile settings 'out of the box' against an application customised for Motorola WebKit on Windows Mobile / Windows CE. You can download the layout.erb I used in my modified version at the bottom of this blog post.
|Default Performance 'out of the Box'|| ||Performance after JQueryMobile Customization|
|Interacting with a native application using the default JQueryMobile settings on an MC75a||Interacting with the same native application on an MC75a using the modified JQueryMobile settings as described in this blog post.|
Limitations of the Device & Other Considerations
It's pretty obvious from the above videos that we haven't achieved a miracle but we have at least improved the performance of our application from a user perception point of view and will continue to improve performance in this area. These ruggedised devices are a couple of years old now and as such do not have an on board GPU or GHz processors so can not be directly compared with an iPad or Galaxy S smart phone. As Motorola Solutions continues to innovate we will bring the true consumer experience to the ruggedised market, targeted for Enterprise.
Another suggestion I've heard frequently is to update to the latest version of JQueryMobile, whilst this can certainly be done the version of JQM which ships with RhoMobile Suite is the version with which the product was validated, so you may see some unexpected behaviour. I've also not heard any reports that updating to the latest JQM will improve performance.
Links to other relevant Material
Here's some links which dive deeper into some of the topics touched on in this blog:
- The Rhodes Application user Interface section from the docs, containing a more detailed breakdown of Layout.erb. This also contains other tips like avoiding white page flickering during transitions: http://docs.rhomobile.com/rhodes/ui
- How to convert a Rhodes application to JQueryMobile: http://docs.rhomobile.com/rhodes-jquerymobile
- A video on CSS Styling https://developer.motorolasolutions.com/docs/DOC-1634
- The online documentation for CSS Styling http://docs.rhomobile.com/rhodes/css-framework
- A video on Front End UI Performance Optimizations, identifying bottlenecks: https://developer.motorolasolutions.com/docs/DOC-1661
- The first Performance Improvement blog: https://developer.motorolasolutions.com/community/rhomobile-suite/docs/developer-reference/blog/2012/09/24/rhoelements-performance-improvements-1
- The second Performance Improvement blog: https://developer.motorolasolutions.com/community/rhomobile-suite/docs/developer-reference/blog/2012/10/08/rhoelements-performance-improvements-2
- A Launchpad post describing user frustrations with the out of the box experience: https://developer.motorolasolutions.com/message/6248#6248