We’ve almost covered everything to do with jQuery Mobile. This was going to be a whole post on the Theme Framework, and how you can style jQuery Mobile to your liking. However, that isn’t needed. “Theme Roller” for jQuery Mobile allows you to create a jQuery Mobile theme and then export the styles as a CSS file. It’s made by the same people that make jQuery Mobile, so it’s feature-full and I haven’t encountered any bugs with it.
However, using third party tools isn’t everyone’s cup of tea. If you want to make your own style from scratch, there’s some documentation on the jQuery Mobile docs page.
Instead of spending a whole post explaining how to use the Theme Roller (an incredibly self explanatory product) I thought it’d be a good idea to take a look at some of the alternatives to jQuery Mobile – although rich in features, it has strong competition – mainly in the form of Sencha Touch. Sencha Touch is able to create a much more native feel – it doesn’t use a standard HTML page, but rather uses JavaScript – this allows you to do some more programatically advanced things. Their SDK also allows you to push straight to the Google Play Store and the App Store.
You can see a demo, showcasing most of the features of Sencha, in their “kitchen sink” - http://docs.sencha.com/touch/2-0/touch/examples/production/kitchensink/index.html?deviceType=Tablet.
Browsing the kitchen sink, you should see that Sencha does most of the things jQuery Mobile does – including buttons, forms, animations and lists. However, it can also utilize some advanced data formats (including JSONP) and has built in media players for Audio and Video.
So why did I recommend jQuery Mobile in the first place? Both are open source, have a similar feature set, and, in fact, Sencha is more advanced in places. It requires you, however, to completely recreate your website. jQuery Mobile is a case of adding some tags and a few lines of HTML – Sencha is more a case of creating the whole website again – the results are fantastic if you have the time and patience, but jQuery Mobile is 90% of the product for 10% of the time.
If you fancy combining jQuery Mobile’s style with some of the backend features of Sencha, however, look no further than Ember.js – “a JavaScript framework for creating ambitious web applications that eliminates boilerplate and provides a standard application architecture.”
It is able to cope with most of the data handling that Sencha can, as well as using AJAX to minimise page reloads – something vital on a mobile device. In this day and age, people don’t have time to wait – they want information instantly. It also means that they don’t have to waste their data plan reloading an entire site, and just reload the bits that need to be changed.
Since Ember is simply JavaScript, it should be familiar to most people who have made a website – the fact that you’re using jQuery Mobile to build the site also suggests prior knowledge. However, there’s plenty of documentation the website, and even a novice should be able to pick it up fairly easily. It’s also open source, which means you can help contribute to making Ember a better product. There’s a huge API as well, and some demos that showcase Ember’s power – my personal favourite is the Todo list.
And that effectively conludes the jQuery Mobile, and Mobile Development series. I’ll probably revisit it later in the year once it’s been updated, to show you what’s new and how it can help create a more native mobile experience. If you’ve found this article insightful or of any use visit some of my previous articles on jQuery Mobile in the Rappsody Studios blog archives or take a look at the suggested articles below this one.
