jQuery Mobile logo

I promise, this blog isn’t all C#.  I do a significant amount of JavaScript development too.  I am working on, hopefully, a intuitive templating library with JavaScript, but that is nowhere usable by the public yet.

Another part of JavaScript that I am heavily into (as is most JavaScript developers) is jQuery.  jQuery is nothing new, it has had a dominant presence in the JavaScript framework for a little while now.  It is easy to see why, of all the frameworks I have dabbled in, jQuery is:

• Small.  When gzipped and minified, it is 31K, as of 1.6.4.
• Easy to learn.
• Great performance.
• Leverages knowledge you may already know – primarily CSS selectors.

With jQuery, there are a couple of sister frameworks for building UIs: jQueryUI and jQuery Mobile.  jQuery alone is a utility, event, and DOM manipulation framework.

jQueryUI is a making-web-2.0-applications-alive framework, with a support for styled buttons, auto completes, toggles.  Primarily, it provides rich support for things like dialogs, progress bars, tabs, dragging, dropping, sorting and animation.  It is a mature framework that is going under re-construction for a simplified API so extensibility is even easier.  I use this for the REAL TIME REHAB project I work on on the side.

jQuery Mobile is a new addition to the jQuery suite of frameworks. jQuery Mobile specializes in making mobile- and touch-friendly UIs that can be used across mobile devices and desktops.  It is in an RC2 version (release candidate).  The full version 1.0 is literally in the coming week or two.

jQuery Mobile is something I have used quite a bit in the last few months.  A project at the day job required a touch screen interface, so we started using jQM (a beta version) as the basis of the UI.  We heavily modified a good portion of the CSS and the framework was hacked or extended to support features we needed.  It has serves us well, even though we never got beyond a late beta version of jQM (just too late in our development cycle to upgrade to the RC and trying to fix any breaking changes).

Admittedly, I have become a huge fan of jQM.  In its short lifetime, it has become a real feature complete framework:

• HTML5 semantic markup defines most the interface.  You can make a mobile friendly website with jQM without writing a single line of code.  You provide “data-” attributes to elements that jQM recognizes and transforms the elements for you.
• Small.  about 25K gzipped and minified.  That is smaller than the core jQuery library.  The gzipped and minified core CSS is about 7K.
• Works well on a variety of devices and browsers.  Click here for the graded browser support.
• Provides support for the major form input elements.  Has custom select list support and support for some of the HTML5 input controls. jQueryUI, on the other hand, doesn’t even address input elements very much at all.
• Gracefully degrades.  It will simply degrade back to default HTML rendering if your browser sucks.
• AJAX friendly.  Forms can be a classic style, or automatically use AJAX-submitted forms.

The framework, as of RC2, is easily extensible.  It uses, essentially, the same widget framework that jQueryUI uses.  It is easy to make new components.  They even added a theme-roller to easily make your own theme swatches (http://jquerymobile.com/themeroller/ - it is in beta – also, just to make sure I do not appear totally biased, jQueryUI also has had a Theme Roller for a long time) and get on-demand, custom CSS.

How easy is it to use?  Well, for fun, and because I have meaning to update my resume for a long time, I made a quick interactive, jQuery Mobile-based resume.  I added some custom script to do some list sorting and special handling for the popup menu on the footer of each page.  Everything else is semantic HTML5 that jQM interprets.

Also, note, while the resume looks like it spans several pages, it is actually all just one HTML file.  jQM can split up an HTML document into several jQM “mobile pages”.

The CSS for the interactive resume also is resolution-aware.  Using CSS media queries it can format the layout of the page to support a few resolution levels.  Try looking at it on a desktop, then on a mobile device (portait and landscape).

The page is self-contained.  The custom CSS and scripts are in the page itself.  The external libraries (jQuery and jQM) are included via a public CDN.  You can take this page, change it with your information, and upload it somewhere else, and would probably work just fine.

Personally, I didn’t hand-craft each line of HTML.  On my local development machine, I wrote a quick MVC3 app that spits out the HTML file.  I then just copied it to my web space.  The reason I did it this way is that I can make different views for, perhaps, a PDF version, a highly summarized version or a straight text version as needed without changing my data model (which is a quick and dirty .NETclass with my “resume data”).

Final NOTE:  I am not looking for a new job.  I did want to update my resume as the previous version was getting ugly and dated.

Click this and take a peek at my resume!

Tweet