Mobilism: jQuery Mobile

by Luke Wroblewski May 16, 2011

In his jQuery Mobile: Building tools for a changing web presentation at at Mobilism in Amsterdam, Netherlands Scott Jehl provided an overview of the development of jQuery Mobile as well as lessons learned along the way. Here are my notes from his talk:

  • People assume that WebKit is big enough now on mobile that they can build frameworks that are WebKit only, but there are a lot more mobile browsers out there. jQuery Mobile is a framework for targeting more mobile browsers effectively.

About jQuery Mobile

  • jQuery Mobile is one codebase that works across all platforms. Built on standards like HTML5 inputs, and doctype. Built on top of jQuery core. People thought this was a library that was not on top of jQuery. Not true. jQuery mobile sits on top of jQuery Core.
  • jQuery minified and zipped is about 29KB. jQuery mobile is about 20KB min/zipped. All controls on jQuery are built with progressive enhancement.
  • Don’t break the Web. Bookmarking, history, back buttons should all still work despite the use of Ajax. Accessibility features are preserved.
  • Some devices fire both touch and mouse events. jQuery mobile binds to both. Keeps the first one, and then ignores the others.
  • You can assign data-role attributes to enhance HTML elements to jQuery mobile elements. Then theme and enhance the basic HTML strucutres.
  • Multi-page documents can be used to load many screens together in a single document. Not as recommended as making separate pages.
  • jQuery Mobile uses Ajax to load pages into a div, then transitions to them. Transitions can be specified programmatically or in mark-up.
  • In jQuery mobile, documents get pulled in and styled into dialogs. Uses data-rel attribute to set what dialog content should be. Dialogs work with back button but not refresh (page will reload).
  • jQuery tries to avoid mimicking fixed-scrolling. They hide then fade back toolbars fixed to the bottom to avoid re-writing scrolling in the browser.
  • Label and input filed pairing is required for forms to work. Text-areas auto grow as you type. Radio buttons and checkboxes are updated for touch interactions.
  • All widgets have a refresh option that can be triggered programmatically.

Current Status

  • Alpha 4.1 has just been released. The team is in the process of re-factoring navigation before the beta release. Now compatible with Windows Phone 7. Also works across the desktop browsers too.
  • Blackberry 5 is now rendering but it is quite slow to render Javascript. But currently hashing does not create history entries. Where it is not supported, looking for a feature test to turn off Ajax.
  • Can use components from jQuery mobile in Adobe Dreamweaver 5. Can even build PhoneGap apps in Adobe Creative Suite.
  • There is an iOS bug that prevents you from being able to keep zoom scale consistent when device orientation is moved to horizontal orientation. So jQuery mobile apps are now set to not zoom. When this bug is fixed, they’ll support user zooming.

Lessons Learned Building jQuery Mobile

  • What did the team learn while making jQuery mobile? Because the round is moving under their feet, notions they started with have changed.
  • Would not have tried to match native OS styling. Somewhat looks like the real thing but it is somewhat off. It doesn’t feel like the Web.
  • One example: inserted browser back button in navigation bar by default but it is repetitive with browser back button. Sometimes easier to use than native control (if buried in menu on device). Since it is needed in chrome-less apps will still be there just not on by default.
  • By applying virtual events, slowed down time to capture “clicks”. No longer using virtual events it for changing pages. Components that don’t change pages will still use virtual events.
  • Adding on-click highlight states made things feel a lot faster even though no actual speed updates were made.
  • Avoid fake scrolling. This might become un-needed soon. Blackberry Playbook now has overflow regions that work well. Hopefully other mobile browsers follow suit.
  • Always hear that jQuery Mobile is too big. People have started to create micro-frameworks like micro.js and zeptos. But if it doesn’t work on all browsers, it is not micro –it is incomplete.
  • jQuery core components may potentially be reduced to make file size smaller.
  • In the meantime, you can look at the closure compiler, which looks through code and removes unused functions. Something like this might be implemented by jQuery.

Mobile Development

  • The answer to server vs. client feature detection: it depends.
  • Responsible responsive Web design includes a Mobile-first layout; Head with link to basic stykesheet; Enhanced CSS with only media all; Basic javascript; mobile-first “responsive images” –serve small then swap without loading both; Load only essentials up front; Qualify further enhancements.
  • When testing for loading assets, check “screen” to load different assets. And use “window” to load layout differences.