Mobile frameworks are frameworks that deliver a mobile experience when a website is viewed on a mobile device. Alternatively, these mobile frameworks could also be used to develop installed applications, such as PhoneGap by Adobe. In either case, these will be mobile websites running on good old HTML, CSS and JavaScript, with the latter often being used to mimic native capabilities such as transitions and effects.

Without further ado, let’s look at the most popular frameworks currently available:

jQuery Mobile (jquerymobile.com)

Considered by many as the old man on the block, jQuery Mobile is probably the most fully featured of all mobile frameworks. However, this also means that JQM is rather bloated and slightly slower than most other mobile frameworks. But do you need lightning speed, or all the widgets and gadgets they have ready for you — all tested by thousands of developers all over the world and mostly bug-free.

jQuery Mobile provides you with a support system second to none. They have a wonderful community and the documentation is extremely good. jQuery Mobile tries to be device agnostic, with a generic look and feel for all devices, and while the nativity of mobile is lost, a nice consistency is achieved.

There are wonderful things in jQuery Mobile, such as page panels, form controls, page layouts, headers, footers, etc. If you are looking for a cross platform framework that has all (OK, most) of the bells and whistles, JQM is for you.

If you are looking for a native look and feel, this JQM might annoy you.

Onsen UI (onsen.io)

At first glance, Onsen is absolutely amazing. The documentation seems great, the UI looks great, and then you start building and you realize that there is a lot to learn here.

Onsen have essentially created their own html DOM tags to target. Why they had to do this is completely beyond me, as the HTML5 specification does allow for data-* attributes (as used in JQM.)

But the result looks good — you get a definitively native look, with some native looking effects — but at a cost: if you, like me, only build mobile apps now and again, do you really want to commit yourself to this much learning? Sure, if all I do are PhoneGap apps, I might, but with a lot more competition out there giving pretty much the same results, I don’t think I want to commit to this much time.

If you have time to learn, this might be for you. If you need to get work done, I think you’ll do better with another framework.

Chocolate Chip-UI (chocolatechip-ui.com)

If you’re looking for a cross-platform look and feel, you could do a lot worse than ChocolateChip-UI. It comes with a decent JavaScript API, nice CSS implementation and a nice set of widgets. It claims to be the only truly cross-platform UI for mobile, but that isn’t really the case. Also, the JavaScript API can get a little tricky to implement when you are working on a complicated page with a lot of detail, but it works consistently.

Stay away from this if you are looking for speedy development though. The API is quite exhausting when you are looking for a specific feature, and the documentation could be a lot better.

Ratchet (goratchet.com)

Ratchet has promise, and I’ve been watching this project for a while. From the guys who brought you Twitter Bootstrap, comes the mobile UI we’ve all been waiting for.

Except it is not complete.

Ratchet features some nice widgets, nice layouts and nice documentation (probably the best looking documentation) but the implementation is not complete. Also, they have implemented their own transition functionality that kinda works (when you have other JS in the HTML, forget about it).

So why am I including this here?

Ratchet is great for prototyping. The UI for Android as well as IOS is near perfect. If you have a client pestering you for a look and feel of his new app and your designer has the flu, use ratchet to prototype that app in no time. Or just use it when designing your app. Any which way, it’s good for prototyping and it makes life easy when you need to see what a native implementation might look like.

Mobile Angular UI (mobileangularui.com)

We all like using Angular, and when we want a UI for it, this is a good start. You get the regular Angular experience here, without the pain of worrying about the UI or trying to get the UI to work along with Angular, which can be a bit fussy at times — as we all know.

With some nice components and some interesting methodologies, this project is on its way to the big time — but it isn’t quite there yet. The documentation is quite sketchy in parts and extremely vague in others, but this is being improved and a community is growing around this little project, which makes it worth watching.

Conclusion

There are a lot of mobile UI projects out there at the moment. Everyone, including me, wants to build one at some stage (and if there weren’t already so many around I would) but I think we could all contribute to these projects and help them grow — that’s what open source is about. In the meantime, give them a shot — there are many more out there, so the choice is yours.