This post is over 6 months old. Some details, especially technical, may have changed.

jQuery Mobile Quick Look

jQuery Mobile was released over the weekend or at least the alpha version of it was (full release scheduled for some time on 2011). 

So what is it like?  Well first things first it's early days, there are certainly more than few rough edges but given the development timeline (~2 months) it is quite an impressive effort put in by the Filament Group and others.

iThings

The first question most people will ask (or the first thing they will try and do) will probably be

So how does it look on the various iThings (iPad, iPhone, iPhone 4)? 

Well it looks good for the most part.  There are some issues around page transitions and displaying dialogs (especially on the iPad) - things like page flickering, hidden content becoming visible after the page has loaded etc. and while they are a bit annoying they don't "break" anything.

As the framework isn't targeting iOS specifically there are some behaviours that would wouldn't necessarily expect if you used this as a native app (using PhoneGap or whatever).  Toolbars aren't explicitly fixed and when they are fixed disappear on scroll and repositioned after scrolling has finished.  Select boxes don't display the normal pickers found in native iOS but instead use a custom dialog for selection.  Again these aren't criticisms, they work well, but I have heard people already complaining because they expect the framework to produce a fully native looking app.

Sencha Touch

When comparing frameworks many peoples first thoughts will be

How does it compare to Sencha Touch 

To be honest  the comparison is like comparing apples to oranges, or jQueryUI to ExtJS.  Both projects have also different goals.  While Sencha currently aims to provide a rich native like experience on a small subset of mobile browsers (specifically iOS and Android), jQuery Mobile aims to create a consistent, mobile/touch capable experience across a much wider range of mobile browsers.  This is by no means easy.  An interaction style one device may not be suitable for another.

FOUC

One of the goals of jQuery Mobile is to progressively enhance the base page to become more mobile capable.  Because of this the base page is very basic with jQuery Mobile specific stylers applied when the DOM is ready.  This can lead to some initial FOUC (Flash of Unstyled Content).  We can get around this by applying some of the basic jQuery Mobile styles to begin with and I suspect we will see this tactic being used on future releases.

[[posterous-content:EeHJJwvCqFJrzcdxeEEb]]

Accessibility

One thing I never really though of in a Mobile Framework is accessibility.  This is just short sightedness on my part as it is as relevant in the mobile world as it is in the desktop world.  jQuery Mobile aiming to be fully accessible through it's use of ARIA roles and progressive enhancement.

The Technicals

From a technical/developer stand point jQuery Mobile is quite nice.  Lets look at a few of the highlights,

Pages

Sites can be built as a single page with sub sections being marked as "pages" that jQuery Mobile can navigate.  External pages are load using ajax (rather than simply navigating to them), this give jQuery Mobile better control over transitions, and history management.  A simple page looks like this,

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>jQuery Mobile</title>
        <link href="Styles/jquery.mobile-1.0a1.css" rel="stylesheet" type="text/css" />
        <script src="Scripts/jquery-1.4.3.js" type="text/javascript"></script>
        <script src="Scripts/jquery.mobile-1.0a1.js" type="text/javascript"></script>
    </head>
    <body>
        <div data-role="page">
            <div data-role="header">
                <h1>Page 1</h1>
                <a href="#about">Page 2</a>
            </div>
            <div data-role="content">Page 1 Content</div>
        </div>
        <div data-role="page" id="about">
            <div data-role="header">
                <h1>Page 2</h1>
            </div>
            <div data-role="content">Page 2 Content</div>
            <div data-role="footer">Page 2 Footer</div>
        </div>
    </body>
</html>

So lets break this down and pick out the interesting parts,

<!DOCTYPE html>

HTML5 DocType which older browsers can handle gracefully

<link href="Styles/jquery.mobile-1.0a1.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-1.4.3.js" type="text/javascript"></script>
<script src="Scripts/jquery.mobile-1.0a1.js" type="text/javascript"></script>

Scripts and styles included.  Now from a mobile perspective this is still quite a bit of script especially over some flaky 3G connections but in comparison to some of the frameworks out there it is still quite small.

<div data-role="page">
    <div data-role="header">
        <h1>Page 1</h1>
        <a href="#about">Page 2</a>
    </div>
    <div data-role="content">Page 1 Content</div>
</div>
<div data-role="page" id="about">
    <div data-role="header">
        <h1>Page 2</h1>
    </div>
    <div data-role="content">Page 2 Content</div>
    <div data-role="footer">Page 2 Footer</div>
</div>

This section describes 2 pages.  A page is marked as a page by its `data-role` attribute and can contain 3 elements marking a header, the page content and the footer.  Unless stipulated the first page will be first page in the DOM.  Navigation between pages is handled using location.hash changes (page 1s button links to Page 2 in the example).

Themeing

Themeroller will see an overhaul on the official release which will allow you to create custom themes a la jQueryUI.  Currently jQuery Mobile comes with 2 themes both of which have a number of swtaches.  This is intended to create contrast between UI elements (e.g. for marking mandatory fields, or highlight primary buttons on a form etc.)

Dialogs

Dialogs in jQuery Mobile are simply pages with a `data-rel="dialog"` added to them so the same rules apply as above.

Form Elements

Forms in jQuery Mobile are plain old HTML(5) forms which is actually a VERY nice feature.  Sencha/ExtJS forms are nice but when using SELECTs etc. can become a real pain to manage.  jQuery Mobile uses a much lighter approach.  Some screenshots (iPhone 4)

[[posterous-content:qipBwFyayBhuztrHFpJI]] So thats a very quick overview of jQuery Mobile. I encourage you to play around with and get those bugs filed.  As I've said it's early days but it's a big goal they are aiming for and they are currently well on track to produce a very nice framework come the official release.

Published in JavaScript Mobile on October 17, 2010