I am writing this blog post after working with jQuery mobile version 1.3.2 and Cordova 3.3.0 to make an Android and iOS native application. The application in the play store was to support various devices and Android version 2.3, while the iOS application was to support all Apple devices that run version 5.0 and above. Please note some of these flaws and struggles I came across may have been patched.
1) Native keyboard for Android and iOS differences
Manipulating the native keyboard is quite a bit of hassle and requires a few CSS changes; Android even has popular 3rd party keyboards (eg. Google Keyboard and SwiftKey). To be able to specify whether the keyboard should be a numeric keyboard or a QWERTY keyboard requires you to specify the type attribute. A thing to note is that Android does not support the "pattern" attribute for <input> elements, while iOS supports the "pattern" attribute, making it so that even in a password field you can limit the user to numbers only and show a numeric keyboard.
An additional frustration is that the actual number keyboard for some Android devices do not include a decimal point button. You can get around this by setting it to be a type "tel." For more information about input types check this link.
2) Learn the order of page events
If your app is heavy on javascript / AJAX calls be sure to learn when to fire your calls or bindings. This matters because if the elements don't exist it might not work or you are manipulating things on the fly, causing some flickering during transitions or after.
(Navigate from A to B)
page B---pagebeforecreate
page B---pagecreate
page B---pageinit
page A---pagebeforehide
page B---pagebeforeshow
page A---pageremove
page A---pagehide
page B---pageshow
3) jQuery Mobile transitions
Flickering/Blinking is the complaint I get. Google search results tell me to fix this by disabling transitions or changing the viewport meta tag content attribute. It seems each case on the web is different. CSS3 transitions are not supported by Android 2.3, which caused some problems, so I turned them off completely for android in order to improve performance. I also had a problem with the "pop" transition making the background white before transitioning, which caused a "blink" in the client's eyes. I found a plugin that reverted the pop transition back to the old jQuery Mobile transition where you could see the previous page before the new one zoomed in; it worked great and out of the box, check it out here.
4) Fixed Header and Footer
jQuery Mobile has its own built in header and footer known as the "Toolbar Widget." It has support for a fixed Header and Footer that tries to mimic native application user interfaces. The problem is that this is not supported in older versions of Android, requiring you to to make some modifications to CSS and mobile properties. Sometimes scrolling at a fast rate with toolbars enabled causes some illusions of unsmoothness in the app.
5) Theme Roller
A great tool you can use to help build a custom jQuery mobile theme. The UI is easy to use and the result is easy to apply.
6) Testing
In my experience, physical test devices show more bugs than simulators. I found that some bugs were not reproducible on a simulator but could clearly be seen on the actual device. Howevwer, this being said, I still use simulators to test as they're more convenient than loading on a device and physically pressing buttons.
How do I test in iOS? Using Xcode. There is a built in iOS simulator that can be found under Developer Tools. You can either debug it using a browser, or if your project is built with Cordova you can just run it through Xcode. The beauty of this is you can even use the web inspector from safari to inspect elements in the application. For Android I use eclipse, which also comes with built in simulators under "Android Virtual Device Manager." I found it extremely slow, but was able to up-the-speed by applying "Intel Atom" to the CPU. My main method was to get hold of the Android device and turn the USB debugging on. This allows you to run the application through eclipse onto your android device. With the new Android KitKat you are able to use Google Chrome's inspector on this.
7) More Javascript Events to know
tap
Triggers after a quick, complete touch event.
taphold
Triggers after a held complete touch event (close to one second).
swipe
Triggers when a horizontal drag of 30px or more (and less than 20px vertically) occurs within 1 second duration.
swipeleft
Triggers when a swipe event occurred moving in the left direction.
swiperight
Triggers when a swipe event occurred moving in the right direction.
orientationchange
Triggers when a device orientation changes (by turning it vertically or horizontally). When bound to this event, your callback function can leverage a second argument, which contains an orientation property equal to either "portrait" or "landscape." These values are also added as classes to the HTML element, allowing you to leverage them in your CSS selectors. Note that we currently bind to the resize event when orientationChange is not natively supported.
scrollstart
Triggers when a scroll begins. Note that iOS devices freeze DOM manipulation during scroll, queuing them to apply when the scroll finishes. We're currently investigating ways to allow DOM manipulations to apply before a scroll starts.
scrollstop
Triggers when a scroll finishes.
Source: http://forum.jquery.com/topic/mobile-events-documentation
jQuery mobile combined with Cordova has its flaws but it does do the job well. Both jquery mobile framework and cordova platform get updated quite frequently so it can only get better in the future. I would recommend this combination to any of those web developers looking into working with Native applications; it allows CSS ninjas and the web industry to get into the mobile application development world. If you can build a website you can build an application, which is the ultimate goal is with these two technologies.
Share this Blog with colleagues
