HTML5 for mobile - Comparing JQueryMobile and Sencha Touch

I have been playing around with some HTML5 / JS frameworks that allow creation of mobile web sites and can be integrated with platforms such as PhoneGap for creating mobile apps.

The two frameworks that I have tinkered around with are JQuery Mobile and Sencha Touch. Here is what I found...

 

JQueryMobile

Summary: Easier to learn framework with a strong focus on mobile web / apps. Has a larger corporate backing / partners, and is integrated with Adobe Dreamweaver CS 5.5.

Pros:

• Much easier to learn as compared to SenchaTouch

• Newer version has good basic themes and themeroller makes custom theming easy

• UI controls appear better focused on mobile devices e.g. 

 - By default labels are above the text input boxes which preserve real estate on mobile devices

 - iPhone style Flip switches work out of the box and allow text on both sides of it Ref: http://jquerymobile.com/demos/1.0a4.1/docs/forms/forms-switch.html

  - Placeholder text for dropdowns works as expected (broken in Sencha touch)

Cons:

• Less Object oriented / more web site programming like when it comes to wiring events etc. For non-trivial applications, it may almost require using another framework such as backbone or Knockout

• Rough at the edges, Transitions may flicker and sometimes are not smooth

• Some UI controls do not work very well (Fixed toolbars that are overlaid everytime on vertical scrolling make the UX very flaky)

 

Sencha Touch

Summary: A more robust OO style architecture with a strong focus on mobile web / apps.

Pros:

• True MVC style architecture

• Takes a SASS based object oriented approach to theming

• Much smoother / flicker free transitions than JQM

• Nicer iPhone style theme and icons (better than JQM's, IMO)

Cons:

• Steeper learning curve, changes from Sencha 1.x to 2 in coding styles etc. do not help

• UI is more oriented towards web design than mobile design e.g.

  - Form style UI layout with labels on the side of text boxes

  - iPhone style Flip switches (Toggle in Sencha world) require .css changes (https://github.com/tomalex0/SenchaTouch-Form-iosToggleField/commit/0b7de60782...