Development Update – Week of May 9th, 2011

Posted on by

Ajax navigation moving along

Our Ajax navigation re-write in still in-progress in a branch, but here are some of the key things we’ve done this week:

  • Broke out nested functions from changePage() to improve readability/understanding.
  • Changed signature to changePage() so that it uses an options structure.
  • Removed differenciation between form submit and loading. It’s all the same. Now there is a generic flag/option you can pass that is forceLoad: true which does the same thing for forms.
  • Replaced $.mobile.defaultTransition with $.mobile.defaultPageTransition and $.mobile.defaultDialogTransition.
  • Performance fix to prevent unnecessary crawling of the entire document.

Responsive design helper classes: Deprecated for beta

We include a set of responsive design helper classes designed to make it easy to build a responsive design that adapts the layout for various screen widths. At the time, we went with a system of dynamically appended min- and max-width classes on the body that are updated on load, resize and orientation change events as a workaround for the limitation that Internet Explorer doesn’t support media queries.

Although this technique works, it adds script overhead that we’d like to avoid as we move towards 1.0. Within jQuery Mobile, we only use these classes for a single feature: the responsive label/form layouts. This week, we re-wrote the styles for the form elements to work without the helper classes by switching to standard media queries in our CSS. Since we use media queries sparingly right now, the only change you’ll see is that at wider screen widths, WP7 won’t switch to the layout with the label floated to the left of the form element.

We understand that many developers may be using these CSS classes so we’re going to leave this code in until after the first beta to give everyone time to migrate to other solutions. We will be removing these classes completely by 1.0. If you want to use media queries on Internet Explorer, we recommend adding in respond.js, a polyfill script written by team member Scott Jehl that adds media query support for IE.  Post-1.0, we’re going to look into whether we should polyfill media queries as part of jQuery Mobile or continue to leave it as an optional file.

Toolbar back button: Relevant on the web?


When we first introduced jQuery Mobile, one pattern we adopted was the “back” button in the header bar because it’s a standard app convention. We went so far as to include a back button on every page we Ajax in automatically. However, as time has gone on, we’ve been wondering if this is still a good idea for a few reasons:

A web app runs in a browser that already includes software and/or hardware based buttons for navigating forward and back in the history stack so a button in the header is redundant and may not used as much as the native controls which have the benefit of habitual use. A hardware back button is standard on all Android, WP7 and Blackberry devices and we’d bet most users on those platforms prefer to use the hardware button. Both iOS and Palm WebOS don’t have hardware buttons, but both have a persistent back button available in the browser chrome at all times. The only time a back button is critical is in a fullscreen iOS or WebOS app.

Compounding our issues with the automatic back button is it’s seemly unpredictable behavior. When we first added this feature, we actually had a bug that added it to every page unless you shut off the feature or had a button in the lefthand slot in the header. We eventually fixed this so the back button was only added if jQuery Mobile loaded a page through Ajax so we could know that the back button would go back to another jQuery Mobile page and not some random site in your history stack. However, this caused a lot of confusion because the back button would “disappear” when a page was refreshed or when you linked to a page with the data-ajax=”false” attribute.

Because we originally built the demos and docs pages with the auto back button as the only navigation feature, a lot of people followed this pattern. In hindsight, we think this is less than ideal because a web site or application should have some form of persistent navigation. For any web site or web application that will be consumed primarily through the browser, we recommend following all the normal web conventions for navigation:

  • At a minimum, provide a link back to the home screen, either via a linked logo or home button, like we do in the demos & docs so a deep link to a page isn’t a dead-end
  • Consider adding a way to access other primary navigation, either via a simple navbar or menu
  • Consider providing a global search box if available on every page
  • Add additional navigation links at the bottom of pages to improve flow flow one page to another. It’s always easier to access navigation at the end of a long page than at the top

Our current plan is to shut off the automatic back button feature by default for beta and are considering whether to keep this feature in for 1.0. Let us know your thoughts, we’re listening.

 

Submitting an issue? Some tips

To help us resolve issues in the Git tracker as quickly as possible, here are a few critical things that every ticket should have:

  • First test to see if this is still an issue in the latest Git build because we’re constantly fixing bugs after a release. Include our latest JS and CSS files in your project to see if we’ve already fixed it. If it can be reproduced in the demos and docs, simply view the latest on the /test/ directory:
    http://www.jquerymobile.com/test/
  • Always specific the platform and version if it’s in the native browser: Ex. iPhone 3GS, iOS 3.2
  • If you see an issue with a 3rd party browser, specify that in addition to the device info. Ex: Firefox mobile 4.0b3 running on HTC Aria running Android 2.2
  • List out the detailed steps and conditions needed to reproduce the bug
  • Don’t paste huge chunks of code into the issue ticket. Instead, post a demo page on an online code sharing site like JS Bin or jsFiddle or in a Git repo so we can demo the page and view the code easily. For a head start, use this JS Bin as a template that includes a live link to the latest build: http://jsbin.com/ukewu3/edit

Notable changes this week

Listview filter speed improvements (issue 1477)
We made a number of changes to improve the responsiveness of the filtering mechanism which is especially helpful on longer lists. More tweaks planned for the future. Thanks nsaleh

Phonegap: Pages with data-ajax=”false” on form fail to load (issue 1580)
In the $.ajax() callback, we look for elements with @href, @src, and @data-ajax=”false” elements, the code then assumes that matching elements will have either @href or @src, which of course forms don’t … they have @action … so the code throws an exception because thisUrl is undefined. Reworked the code to handle action and check to make sure we have an attribute and url string before attempting to use them.

Base tag regression fixed (issue 1508)
This change sets the base tag properly on page load and page changes, corresponding with the recent change to absolute path hash urls. Images and other assets will direct relative to the document in which they reside. This may not cover new path situations Kin has documented, but it does fix the regression so things work as they did before the change. Tested in non-base supporting browsers to verify it works there too. The following page should have an image in the content, verifying the fix

Can’t load file:// pages (issue 1578)
The change caused the base tag to be reset to file:// (literally with no path). All that was missing was a small tweak to base.reset() to use the new initialPath variable instead of docBase.

Listview theme swatch D issue when clicked (issue 1624)
When an item in a listview with the D swatch of the default theme is tapped or clicked, the btn-down class creates a square border and looked chunky. Fixed by removing extraneous style rules. Thanks epsd

Grouped radio buttons with long labels don’t ellipsis (issue 1419)
Fixed grouped radio buttons with long labels so they wrap to multiple lines. Thanks gseguin!

Regex breaking Firefox >3.6 (issue 1514)
Tweaked regex to make Firefox happy. A quick bit of Date()-based benchmarking showed an improvement from ~4.5 seconds to 3ms in Firefox 3.6. The stock Android browser on my Galaxy Tab went from ~3.6 seconds to 1ms. Thanks MaxThrax

Get the latest builds on the jQuery CDN

To take advantage of the daily improvements happening in jQuery Mobile, be sure to check out out the new daily and latest builds that are now available on the jQuery CDN for hotlinking. This allows you to upgrade to the latest code without waiting for the next official release.

Here are the three files to include in the head of your page to always be viewing the latest in Git:

<link href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>

 

Please keep in mind that this the unstable, development version so we don’t recommend linking to the latest in a production site or app but it’s great for development and testing.

Development Update – Week of May 2, 2011

Posted on by

Navigation re-factor update

This week, we’re continuing our work on the Ajax navigation re-write. There are a number of dimensions involved in this re-write including:

  • More flexible URL handling:
  • Extensibility hooks for dynamic page creation
    • Steven Black will start a wiki page with suggesitons
  • Caching: add a simple “don’t cache” flag per page
    • A new data-cache attribute on the page div to tell framework to re-load it if shown again, default is “true” (re-use the page) but you can set data-cache=”false” to tell the framework to re-load ever time it’s viewed
    • Issue created in the tracker
  • Memory management: how to keep the DOM from getting too big?
    • Add a new global configuration option to set the max number of pages to keep in the DOM at once. Once that max is hit, we run a a document-wide $(“selector”).remove() at the appropriate juncture in every changePage invocation (post Ajax success) that finds all pages that are data-cache=”false” or oldest in the stack and delete them. We’ll need to check for alreadyLocalPage = (“[data-url=’…’]:not([data-cache=’false’]”)
    • Default to a sensible number like 15-20 pages but this can be overridden to any number more than 2 (to allow for transitions) or turned off completely
    • Issue created in the tracker:
  • Focus: can we handle this better?
    • we need to have focus brought to the top of the current page on transition for accessibility and keyboard/focus-based navigation
    • Scott Jehl will create a wiki page with suggestions
  • Transitions: how to smooth out, eliminate blinking
    • Kin will tackle this after URLs

View source bookmarklet

Doug Neiner, a jQuery core team member and all-around design genius just created a cool view source bookmarklet that makes is super easy to view the source of any jQuery Mobile page. Since we use Ajax-based navigation that uses the hash to track page state, it requires a bit of hacking to the URL to get the source of the page but this bookmarklet makes it a breeze. We’ll look into adding this to our demo pages so everyone can enjoy the convenience. Thanks Doug!

Notable changes this week

Updated jQuery Mobile to run of jQuery core 1.6 Until this week, we were running on the 1.6 RC but we’ve moved over to the final version of 1.6 and things seem to be working great.

Radiobuttons can’t be selected once they are selected, then de-selected. Fixed by using  jQuery attr accessor instead of expando to guarantee consistent values. (issue 1532)

Multiple calendars generated inadvertently in multi-page docs. The each callback in the pagecreate method was creating multiple calendars when used with a multi-page html file. Fixed by scoping to the current page instead of the entire document. Thanks edelabar!

Regex breaking Firefox >3.6 Fixed by Remove greedy matches from start and end of regex – there’s no need for them, and they cause immense slowdown (on the order of 3-4 seconds on medium-size pages loaded via ajax). Thanks Paul Nicholls! (issue 1514)

Fixed base tag support. This change sets the base tag properly on page load and page changes, corresponding with the recent change to absolute path hash urls. Images and other assets will direct relative to the document in which they reside. This may not cover new path situations we’ve documented recently (changes underway), but it does fix the regression so things work as they did before the change. Tested in non-base supporting browsers to verify it works there too. (issue 1508)

Can’t load file:// pages. Fixed a regression that caused the base tag to be reset to file:// (literally with no path). All that was missing was a small tweak to base.reset() to use the new initialPath variable instead of docBase. (issue 1578)

Get the latest builds on the jQuery CDN

To take advantage of the daily improvements happening in jQuery Mobile, be sure to check out out the new daily and latest builds that are now available on the jQuery CDN for hotlinking. This allows you to upgrade to the latest code without waiting for the next official release.

 

Development Update – Week of April 25, 2011

Posted on by

This and next week, the team is primarily focused on re-factoring and optimizing the Ajax navigation system and page transitions in jQuery Mobile to make them more extensible and stable. Here is a recap of our activities this week.

Navigation re-write in progress

We’re in the process of re-factoring our URL handling for Ajax-driven navigation to be more robust and are starting to plan extensibility points in the system to make it easier for developers to tweak and extend the navigation behavior.  For typical web use, we will continue to use site relative URLs in the hash for same host/protocol to keep the URLs from being too unwieldy and plan on eventually adding Ajax replaceState  to further improve the length and readability of URLs in typical situations.

To better support PhoneGap developers that use file:// protocols extensively, we’re considering how to best support scenarios where the document may initially contain a base tag that specifies a URL that has a different protocol and/or host from the document URL, or cases where the page containing the link was in an externally loaded page that may have specified a different URL with the @data-url attribute. Our proposed solution is to have jQuery Mobile check to see if the page was loaded with file:// protocol and it is attempting to load a page via the http:// protocol. If this occurs and the $.mobile.allowCrossDomainPages configuration flag is also set to true, jQuery Mobile will switch to absolute mode (isExternal) where it looks at the full absolute path and checks the hostname, protocol and link.href to ensure that everything is properly resolved. Before we start re-writing code, we’re going to beef up our test coverage this week around navigation to ensure that we avoid any regressions. Read more about the  details of the navigation re-write on the planning wiki.

Page transitions: decoupled and extensible

We’ve been working on pulling page transitions out into a separate plugin so they can be decoupled from the navigation plugin. As part of this re-work, we’re introducing the ability for developers to create custom transitions created with pure CSS3, or in combination with JavaScript by adding extensibility hooks to the transition system. The development work has been completed and pushed into master so grab the latest if you want to start hooking in your own custom transitions.

Mobile profiler code released

Team member Kin Blas from Adobe has built some really great profiling tools that we use for optimizing our code. He recently released this code on GitHub so grab the code and start helping us find places to optimize our code: https://github.com/jblas/profiler

Notable changes

Tops of pages clipped after returning from a dialog (issue 1461)
If you had scrolled down on a page, opened a dialog, then closed it, the page height was getting clipped off in iOS due to the timing of when we were placing focus back on the page.  Solution: Delayed the setting of focus till after the scroll position is restored.

Active class not being removed correctly
If a link had an null or “#” value for the href, the active class wasn’t being removed. To fix this, we modified the vclick handler code in navgation.js so that it doesn’t place the ui-btn-active class on any links meant for interactivity. Removed the return false in the vclick handler of collapsible and replaced it with a preventDefault(). The only reason we were returning false was to stopPropagation() so that the vclick handler in navigation.js didn’t place a ui-btn-active on it.

jQuery 1.6 RC now in master
In preparation for the 1.6 release, we’ve been testing with the latest jQuery core RC. So far, we haven’t seen any issues but let us know if anything crops up in your testing.

Listview refresh and filtering performance
We’ve really speed up the listview since 4.1 so if you have a site or app  that uses long listviews, be sure to grab the latest version (see below) to get the best performance.

Get the latest build with our nightlies

To take advantage of the daily improvements happening in jQuery Mobile, be sure to check out out the new daily and latest builds that are now available on the jQuery CDN for hotlinking. This allows you to upgrade to the latest code without waiting for the next official release.

Development Update – Week of April 21, 2011

Posted on by

Attending: Todd Parker, Scott Jehl, John Resig, Kin Blas, John Bender, Eddie Monge, Steven Black

Project communication

We’re going to try to post a summary of our weekly meeting here on the wiki and on the jQuery.org site so everyone can see what we’re up to on the project.

Going forward, all communication and meetings will take place on IRC channels for better transparency and to gain input from the jQuery Mobile community. Core dev team discussion is now in #jquerymobile-dev. For help with jQuery Mobile, please use the #jquerymobile or #jquery channels on freenode.net. Weekly jQuery Mobile team meetings will happen on the #jquery-meeting IRC channel on freenode.net every Tuesday at 2:00pm EST/11am PST.

Key issues we’re tracking now

Tops of pages missing after returning from a dialog in Safari and iPhone

https://github.com/jquery/jquery-mobile/issues/1461
https://github.com/jquery/jquery-mobile/issues/1457
This issue is tied to recent focus management changes. Solution noted in comments: we just need to bind to the silentscroll event for when we set focus. Kin will try to land this ASAP.

Ajax = issue re: relative paths

In A4.1 links referencing parent directory with the `../` syntax break some ajax calls. Needs testing with the forced absolute paths introduced post A4.1. Closed and created new issue: https://github.com/jquery/jquery-mobile/issues/1171

Active state stickyness issues

Buttons in jQM have 4 states: normal, hover, focus, and down (pressed) which is a bit different from the link’s :hover and :active states. Our active state is not parallel to a link’s :active, instead it’s meant to be more like and “on” or selected state that is only needed for stateful buttons or special cases (like lists) where we want to have an “on” state.
Proposed change: only set the active class on a button if we know we’re navigating so any null or # links will get the down state but not active.

The “active” class name is a bit confusing because of reasons outlined above, may be worth changing if we can find a much clearer name. Look here for synonym ideas: http://thesaurus.com/browse/Active

Navigation: changepage

• Lengthy discussion on how to proceed.

• Goals: less procedural, separate things out for readability, tightly coupled thru scoping on purpose,

• plan our re-factor on the wiki ahead of time, add high-level tests before re-factoring

• Tangent on initial conditions for tests.

• Pulling transitions from changePage().  An easy get?

• Navigating to self… legitimate in generated pages?

• Making isExternal smarter.

• Moving arguments over to a hash, rename changePage so it can act as a proxy to new one?

• Page container concept: pave the way to multi-panel tablet, handles transitions between pages in the DOM

• Followup with history.js @ https://github.com/balupton/History.js

• Kin will be available to lead the charge on this and everyone else will plug in. First step is to keep filling out the navigation mapping and planning wiki pages here and here.

Recent commits

Fix from @brukhabtu for issue 1492 – Errors when trying to delete DOM elements.

Check for existence of the bindings object before attempting to use it. Apparently jQuery core strips off any data bindings of an element before calling teardown on it to remove special event handlers.

Fix for issue 1157 – Collapsible block prevents page scrolling on iPhone 4

When we switched to virtual mouse events, I just did a straight translation of the code that existed which basically did the collapse/expand on mouseup. In order to factor in scrolling, I needed to move that code into a vclick handler and stopPropagation() and preventDefault() to make sure the button doesn’t activate.

Fix for 1407 – Bad scroll performance since A4 on iPhone 3G

– Modified vmouse code so that it uses $.data() instead of $().data() which is significantly faster.

– Modified the navigation and buttonMarkup code so they stop using live(). The vmouse code triggers several events during the touch events, which in turn causes the underlying event code to call $.closest() with the selector used during the live() call to figure out if the event should be handled. This turns out to be very expensive, so instead, we now just bind directly to the document, and walk the DOM manually to figure out if we should handle it. This is much faster since we are avoid triggering multiple nested function calls.

Fix for Issue 1424 – Adding items to listviews on a4.1 is too slow

– Modified _itemApply() to make use of item.children() and filters. Also got rid of some unused code.

– Convert .each() in refresh() to a loop.

– Cache some $list.jqmData() values so we don’t do it for each list item.

Development Update – Week of Aug 24, 2011

Posted on by

This is the first status update regarding the work that we’ve been putting in to jQuery Mobile. We hope to have similar updates about once a week – along with posts describing new things that we’ve learned along the way.

Sample Mobile Components

Sample jQuery Mobile Components

Some sample components implemented by the folks at Filament Group. Currently the components are done purely in HTML/CSS (no images), are ARIA accessible, and are completely implemented using progressive enhancement.


Sample Selection Dialog

Sample jQuery Mobile Selection DialogThis is a sample modal dialog from which options from a large select menu could be displayed.


Activating webOS Devices

Activating webOS DevicesThe webOS team recently sent us a few more phones to test against so we’re actively adding them in to our test bed and hooking them into TestSwarm.


Fixing Blackberry 4.7

A few commits have landed the past couple days (and quite a few more will be landing over the next couple) taking care of compatibility issues in Blackberry 4.6 and 4.7.