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.

 

Introduction

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:

 

        <script type="text/javascript">
            $(document).bind("mobileinit", function() {

 

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:

 

SettingDescription from JQM documentationDefault Value
Recommended Value with Motorola WebKit
Experience
defaultPageTransitionSet 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.SlideNoneSetting 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.PopNoneIn 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.TrueKeep TrueChanging 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.
pushStateEnabled

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.

TrueKeep TrueIn 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.
loadingMessageDelayNot documented505Although 50ms seems perfectly adequate, just to be sure I reduced this to 5ms to ensure the loading message was always displayed.

 

But you might not want to have the same settings for your iPhone or Android applications; In your layout.erb file there are two ways to detect the presence of Motorola WebKit, the first is to use the JavaScript call:

 

navigator.userAgent.match(new RegExp('MotorolaWebKit'))

 

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.

 

I've heard a lot of suggestions from customers and even internally that we should enable the JIT in our WebKit engine, this is Just In Time compilation for JavaScript, enabling faster processing of JS.  There's been a lot written over the past few years on JIT optimizations in both Safari and Chrome and watch out for more information on JIT being enabled on our Windows devices in upcoming releases (it is already enabled on Motorola Android devices).  I did do a comparison in this case against the as yet unreleased JIT engine and did not see any noteworthy improvement, in reality the application I created for the videos above did not make sufficient use of JavaScript to benefit from JIT compilation, even though it made use of JQueryMobile.

 

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:

 

 

RhoElements_Icon_TB.jpg