jQuery Mobile Team Meeting – May 17 2011

##Navigation re-write status update

##Targeting Ajax navigation and animated page transitions (Scott) Currently in jQuery Mobile, if a browser supports media queries or is Internet Explorer, we enhance the page to the full experience, including Ajax-based navigation for animated page transitions. The issue we’re seeing now is that there are browsers that support all the advanced enhancements but don’t properly track hash changes as history stack events so the back button is essentially broken on both Blackberry 5 and Symbian. Opera Mini also has issues with the Ajax navigation system because of the way it’s proxy-based rendering works.

###Suggested action:

link Restore user zooming capability

  • Right now, all our demos and docs have this meta tag:

<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">

The issue is that the minimum-scale=1, maximum-scale=1"portion completely disables the pinch- or double-tap-to-zoom feature which isn’t very “webby” so we’re going to change our meta tag to set a better example of how to code a page in jQuery Mobile. The meta tag is part of the user’s page content so this isn’t a change to the library per-se, but our demos are used as a template for many users so this is important to evangelize.

  • The proposed meta tag we’ll use will look like this:

<meta name="viewport" content="width=device-width, initial-scale=”1”">

On iOS, there is a bug that will incorrectly scale the page when you change orientation which is the reason why we originally used the current meta tag configuration, but we don’t think it’s worth disabling the user’s zoom feature to workaround an iOS bug that may be fixed in the near future. A bug was submitted to Apple by Filament Group, and there’s a description here: http://filamentgroup.com/examples/iosScaleBug/

JavaScript can be used to manipulate this tag dynamically but this approach is far from fool-proof and causes some performance issue so we want to start with the simplest option (leaving the browser feature untouched) and think about alternatives to improve this for 1.0. Jeremy Keith has a great article on this topic: http://adactio.com/journal/4470/

Ticket for this change here: https://github.com/jquery/jquery-mobile/issues/1645

Fix provided here: https://github.com/jquery/jquery-mobile/commit/8ba4c27300da72f5792c98a6aeb53e2f2fd4b02c

and here: https://github.com/jquery/jquery-mobile/commit/04cb9c185040994265ffbd3e40a9ab2cb3ab1dbb

##Remove dynamically injected viewport meta tag

This was deprecated in alpha 4 due to Windows Phone 7’s lack of support for dynamically injected viewport elements. In the end, we think this should be in the page to start anyway, so we’re recommending that users of jQuery Mobile write the meta viewport tag into the head of their page (with content=”width=device-width, initial-scale=1”).

Fix here: https://github.com/jquery/jquery-mobile/commit/adf3808e842677feb23e9d1102c7203ab82a42a3

##Git repo size

The jQuery Mobile repo's large and it may be due to obsolete branches.

##Transition encapsulation and packaging (current state: fuzzy idea)

  • (From Steve) Currently we have jquery.mobile.transition.js package (for css3 transitions) and jquery.mobile.navigation.js acting as a transition “god object” (as it were). Possibly better: navigation triggers at the appropriate junctures, and transitions, as a self-sustained independent package, listens and acts, or not. Acid test: navigation would know nothing about transitions.

###Probably good: Audit, eliminate setTimeout() wherever possible

  • Expecting that some of these can be engineered with $.deferred instead.
  • Currently we have 15 setTimeout() calls in Master.
    • 2 in core.js
    • 2 in event.js
    • 2 in footer.js
    • 3 in select.js
    • 1 in textinput.js
    • 1 in hashchange.js
    • 3 in navigation.js
    • 1 in vmouse.js