jQuery Mobile Review
Great things come in small packages
A project I’m working on had me looking into how to create a nice looking mobile site. Two very popular frameworks came to mind: jQuery Mobile, and Sencha Touch. The back-end guy I’m working with on this project recommended Sencha Touch, so I took a look at that first. Let me just say that if you haven’t worked with Ext.js and it’s panel component, or are not even familiar with that library, you are going to have one hell of a time. It is not all that easy to use, and the limited amount of tutorials on how to use it suck beyond belief. After a couple of hours fiddling with it, I decided to say screw it, and went over to jQuery Mobile. The difference? I got a site up and running in roughly a half hour with no problems themeing. jQuery Mobile wins in ease of use hands down.
This isn’t to say that Sencha Touch is bad, because it sure looks good, but it isn’t as intuitive as Mobile. This isn’t really about Touch though…it’s about Mobile. So let’s get into it!
Pages, nav bars, and buttons – this stuff is easy!
Not just those specifically, but everything in general. Pages though, couldn’t be any more simple because you can do it on one layout. Each different type of section is identified by the attribute ‘data-role’. A page has a data-role of page, a nav bar has a role of nav, footer has a role of footer, header – header, and it goes on from there. You could almost guess at most of them. So let’s say you have a mobile page, and you want a header, a nav bar, the content section, and a footer. Check out the simplicity of how you would write this:
<div data-role="page" id="homePage"> <div data-role="header"> <h1>Home</h1> </div> <div data-role="navbar"> <ul> <li><a href="#homePage" class="ui-btn-active">Home</a></li> <li><a href="#about">About</a></li> </ul> </div> <div data-role="content"> <p>Any idiot with an HTML editor can do this!</p> </div> <div data-role="footer"> <h4>All your footer crap goes here. Like social icons that no one cares about.</h4> </div> </div>
For the second page (about in the above example) you would just copy the above html, and change the id of the page dive to ‘about’, and switch the ‘ui-btn-active’ class to the ‘about’ link in the nav, and you are good to go. Want more pages? Keep doing that. That is what makes this framework so nice. I don’t have to think about what I am doing. How about buttons? Piece of cake!
<a href="#contact" data-role="button">Contact us</a> <a href="#pricing" data-role="button">Pricing</a> <a href="#services" data-role="button">services</a>
Or a list:
<h1>Favorite Movies</h1> <ul data-role="listview" data-theme="d"> <li><a href="#a">Goonies</a></li> <li><a href="#b">Better Off Dead</a></li> <li><a href="#c">Interview with the Vampire</a></li> </ul>
Theming jQuery Mobile
Theming also couldn’t get any better. There are five basic theme swatches, which is what the framework calls them. They are lettered a, b, c, d, and e. Certain data-roles default to specific swatches, like header and footer, which default to ‘a’. Others default to c. There is a hierarchy on how something defaults, but you don’t really care about this crap because you are going to style your own in any case.
Well besides adding the necessary script to get jQuery Mobile to work, there is also a CSS file you will link to. All of the required styles are in there. So let’s say you want your header to use swatch ‘b’ (which is blue), you would just have to add the data-theme attribute with the correct letter, like so:
<div data-role="header" data-theme="d"> <h1>Home</h1> </div>
Your header would now have the blue color with white text. But no one is going to use the that blue color, so you go into the style sheet, and find the class and change the color. You could create a whole new swatch theme by copying the necessary styles, and changing the letters within the class names to ‘f’. Be careful though because any button that is placed within a bar, such as the header, will automatically be assigned a swatch letter that matches its parent bar.
jQuery Mobile for the win!
My main point in showing you the things that I did above is that the entire framework is easy as hell to use, from basic html to methods for page transitions, to touch events. The documentation is really easy to read, gets to the point quickly, and gives great examples. This is one of the major reasons why I think Sencha Touch will be the number two framework. Anyone can create a nice looking mobile page with jQuery mobile, and get it done quickly.
This doesn’t mean that the framework only does simple things. It is up to you to use it and do some very cool stuff with it. I also just touched on the basics, so be aware that there are things you have to look out for. An example being that anchor tag linking doesn’t work because Mobile uses the hash tag to identify pages. Point being, go and actually read the documentation on each part you are working on so that you don’t run into problems later.
For the brief time I have used jQuery Mobile, I am already a huge fan.