Resig Introduces jQuery Mobile
08/16/2010
Total Views: 6461
Mitchell is a DZone employee and has posted 1652 posts at DZone. View Full User Profile
Building web applications that look and feel like native applications on multiple desktop and mobile platforms is a growing trend that many framework makers want to leverage. Tools like Sencha Touch, SproutCore, and YUI 3.2 (which is now adding mobile support) are already leveraging the power of building cross-platform web applications. This week, jQuery - the most popular JavaScript framework - is joining the mobile fray.
John Resig has announced jQuery Mobile: “a unified user interface system across all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation.” The core jQuery library is currently being improved to work across major mobile platforms. A primary goal is to offer tooling that harnesses jQuery in the construction of dynamic touch-UIs on a wide range of form factors. The bundle will include layouts, such as lists, detail panes, and overlays, as well as form controls and UI widgets, including toggles, sliders, and tabs. jQuery developers will also expand the CSS framework and ThemeRoller to design full applications. They'll be adding support for more polished CSS3 properties like text-shadow and box-shadow. Take a look at some of the UI designs below:
Browser Compatibility
There's a plethora of mobile browsers to account for in jQuery, so the developers have created a graded support chart to determine which ones to focus on. The C and F grades in the chart below indicate that the browsers don't support modern JavaScript or DOM code, and many don't have a high enough market share to make development worthwhile. jQuery developers plan to add core support for only A and B graded browsers.
It's important to note that there will not be a separate "mobile" build of jQuery. The support and bug fixes that are added for mobile environments will go straight into the jQuery core. jQuery UI will add new components by taking a more fine-grained approach than jQuery core. This means that Grade A browsers will receive additional support for HTML5 and CSS3 capabilities.
The jQuery Mobile site adds: "While a few frameworks exist now (such as jQTouch, iUI, and Sencha Touch) none of them even attempt to provide a consistent experience beyond the safety of iOS, Android, and webOS. There is a major opportunity for jQuery to provide a solidified and easy-to-use experience for those that develop web-based mobile applications."
The project currently has three sponsors: Palm, Mozilla, and the Filament Group. The jQuery team expects an "A" and "B grade" browser-compatible version of jQuery by October 2010.
John Resig has announced jQuery Mobile: “a unified user interface system across all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation.” The core jQuery library is currently being improved to work across major mobile platforms. A primary goal is to offer tooling that harnesses jQuery in the construction of dynamic touch-UIs on a wide range of form factors. The bundle will include layouts, such as lists, detail panes, and overlays, as well as form controls and UI widgets, including toggles, sliders, and tabs. jQuery developers will also expand the CSS framework and ThemeRoller to design full applications. They'll be adding support for more polished CSS3 properties like text-shadow and box-shadow. Take a look at some of the UI designs below:
Browser Compatibility
There's a plethora of mobile browsers to account for in jQuery, so the developers have created a graded support chart to determine which ones to focus on. The C and F grades in the chart below indicate that the browsers don't support modern JavaScript or DOM code, and many don't have a high enough market share to make development worthwhile. jQuery developers plan to add core support for only A and B graded browsers.
It's important to note that there will not be a separate "mobile" build of jQuery. The support and bug fixes that are added for mobile environments will go straight into the jQuery core. jQuery UI will add new components by taking a more fine-grained approach than jQuery core. This means that Grade A browsers will receive additional support for HTML5 and CSS3 capabilities.
Testing Mobile JavaScript
View more presentations from jeresig.
The jQuery Mobile site adds: "While a few frameworks exist now (such as jQTouch, iUI, and Sencha Touch) none of them even attempt to provide a consistent experience beyond the safety of iOS, Android, and webOS. There is a major opportunity for jQuery to provide a solidified and easy-to-use experience for those that develop web-based mobile applications."
The project currently has three sponsors: Palm, Mozilla, and the Filament Group. The jQuery team expects an "A" and "B grade" browser-compatible version of jQuery by October 2010.
Tags:
- Login or register to post comments
- 6461 reads
- Printer-friendly version
(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)
Comments
Jose Maria Arranz replied on Wed, 2010/08/18 - 5:48am
"The C and F grades in the chart below indicate that the browsers don't support modern JavaScript or DOM code"
I don't buy this argument, browsers like Opera Mobile 8.6x, Opera Mini 4+, NetFront 3.5+ and IE for WM 6.0 and 6.1 are good enough to run AJAX intensive complex examples like this.
Of course you must to avoid the typical visual richness of desktop websites if you want to be compatible with many mobile browsers.
I must recognize that IE for WM 6.0 and 6.1 is very bad but I'm proud of the things I've got to do with this crappy piece of software, for instance this example also WORKS in IE WM 6.0.
The problem of IE for WM 6.0 and 6.1 is there are too many devices out there, too many to ignore them.
Opera Mini 4+ in spite of its proxy nature is really nice because it can virtually render any web site including AJAX intensive in ANY device.
I miss Bolt, SkyFire and UC browser (former UCWEB) in this list (they all are proxy browsers).
Proxy browsers are a very important option for mobile web and in fact they are the only browsers able to navigate really complex web sites at speed of light.
Jose Maria Arranz replied on Tue, 2010/08/17 - 4:43am
Reading the slides some precisions:
* UIQ 3.0: Opera 8.6x in UIQ is fine and is by far more stable than WM versions. SDK Downloads:
http://blogs.forum.nokia.com/blog/aleksandr-trufanovs-forum-nokia-blog/2009/03/02/uiq_sdk_download
* NetFront 4.0 is free for WinMob (you can install it in a WM emulator). NetFront 3.5 (deployed in many mobile phones) is included on the emulator of Access Linux 2.4 (this emulator is painfully slow be patient). NetFront is not so crippled, for instance it can run this demo without problem and visual rendering is correct.
Download NetFront 4.0 for WinMob: http://www.access-company.com/products/mobile_solutions/netfrontmobile/browser/concept.html
Access Linux 2.4 emulator download: http://www.accessdevnet.com/index.php/Development-Suite/View-category.html
* Symbian S60 3rd WebKit based browser uses an old WebKit version (pre Safari 3.0), it has many bugs and may crash, in spite of this is a capable browser if you don't ask very much visual interactivity.
* Opera Mini 5.0 is awesome with AJAX intensive web sites because the annoying scroll and zoom of Opera Mini 4.x are fortunately removed on AJAX requests. In Opera Mini JS is executed in server in a real Opera browser.