If you don’t live in a cave you’ve probably noticed that there is presently a really a big mobile boom. So it should also be no surprise that a lot of frameworks are popping up to fill this field and make mobile coding less painful.
When you think that there are hundreds of types of devices all running different operating systems, you’re in for a big headache to make your website compatible with most of them – and I’m not even talking about the logistics of acquiring the most popular phones to test with. In fact, even targeting a single device like the iPhone can be a challenge, as people using the iPhone do not always upgrade their phone, and with older operating systems come older browsers.
Between web solutions like jQuery mobile, jQtouch, Sencha Touch and and native solutions like Titanium appcelerator, PhoneGap (ouuuffff) it’s pretty difficult to know where this all leads to. I thought it would be helpful to provide a little run down of all these frameworks to show how they compare and also to look deeper into the mobile web.
The mobile web and its Frameworks
People are really getting exited about the mobile web, primarily because of the mobile WebKit browser. WebKit is the first truly modern mobile browser. Before it, browsing on a mobile device was a pain, and not a lot of people were even going to the trouble of doing it. WebKit introduced a desktop browser to the mobile world, and added goodies like CSS 3D animation on top of that. Finally you could, in fact, build a web application that would look like a real, native, application experience like those applications coming from the Apple Appstore.
But here lies the problem: creating mobile web applications for the iPhone 4 is easy, but creating it for all the rest of the devices is so lot harder. Let’s go through a run down of the frameworks that can help you along the way.
This is one of the first frameworks that popped up back in the days of the iPhone 2g. It currently supports the iPhone and somewhat supports Android. What you get is a basic framework for making lists and text based applications. That being said, I turned my own blog into a mobile website with jQtouch in one night – blazing fast development and easy to understand.
Meet jQTouch from David Kaneda on Vimeo.
Sencha actually bought jQtouch (and hired the guy that was making it) some time ago. jQtouch is still a free release, but if you want all the big guns, you need to go have a look at Sencha Touch. With this framework they really, really tried to emulate the native application environment. From what I’ve tested, they pretty much succeeded, with support for the iPhone, Android and the iPad. However, from my tests, the examples are a bit clunky and buggy on Android.
Also worth mentioning is that the framework is not free for commercial use, but the fees are pretty low at $299 per developer, for unlimited websites/year.
The jQuery team recently added a late entry to the mobile framework game. jQuery mobile aims to support virtually all modern mobile devices, including Nokia, and BlackBerry devices. If you are not familiar with mobile browsers, let’s just say that most browsers beside WebKit (currently used by both the iPhone and Android devices) are a bit like dinosaurs. And getting your mobile website or application working on them is going to be pretty hard.
jQuery Mobile is an odd beast, as developing with it is pretty focused on only HTML and CSS. The framework relies on custom html tags that it will interpret if the browser is supported, if it’s not supported, your users can still browse your text (something they can’t do with Sencha Touch). This is the goal jQuery Touch is trying to achieve; any device can view your site even if it is not perfect.
jQuery Mobile is currently still in beta, so I cannot really be “hard” on it. But for a framework that aims to support a lot of browser is seems to have some big difficulties supporting android devices. Recently I created a mobile application using jQuery Mobile and I saw a lot of weird problems on Android, only using examples from their official documentation. But if they figure it out the issues, it could really become a strong contender as a fast and easy solution for mobile web development.
Zepto.js, the minimal framework
Zepto‘s philosophy is the smaller the better. With Sencha, jQtouch, and jQuery Mobile you have an enormous memory footprint, and unfortunately mobile devices are not really that good at handling big files. Zepto is only a 2k library that handles the most basic drudge work with a nice API. In fact, it’s very similar to jQuery, and you will feel right at home if you are a jQuery developer.
It’s also in beta, but worth a look if you’re still unsure about what framework you will use in the future.
The Native Way
A big problem with mobile web applications, even if you are only targeting the iPhone, is that you can’t use all the nice API’s you normally could if you were developing a native app, for example, the notification system. To be fair, WebKit recently added the acceleromater API, but we’re still a long way from competing with native on that point, in addition to the added bonus of free promotion on the appstore for native apps.
Being a native app also has some big disavantages. Goodbye cross compatibility with iPhone and Android! And don’t forget having to learn Java and Objective-C – being a web developer that is probably not what you want to do with your free time.
Along the way, some entrepreneurs saw the potential of web developers on the native space and created some frameworks that make developing natively a much more compelling experience. That’s how we got Appcelerator Titanium and Phonegap, 2 native frameworks aimed at web developers.
A Bit of Controversy
There was a big surprise in the community when Apple changed their developer agreement terms earlier this year and added this paragraph:
“Applications that link to Documented APIs through an intermediary translation or compatibility layer or tool are prohibited.”
This is in fact what Appcelerator and Phonegap are doing. But it seems like this change was really targeted at Adobe, who was rumoured to be integrating a parser with the Adobe Creative Suite that would allow Flash developers to build iPhone application without using Xcode – something you can’t do with Appcelerator and Phonegap.
To this day, applications built with those two frameworks are still getting released in the Apple Appstore.
Appcelerator Titanium, web to native
Titanium is a cross platform technology that goes beyond the mobile and currently supports iPhone, Android devices, desktop applications, Windows and Mac, with plans to support the BlackBerry in the near future.
With BlackBerry support coming soon, it will also become much more attractive since BlackBerry has really a big following in the business world and could potentially become a huge market for mobile applications.
PhoneGap, the web in a native environment
PhoneGap has a different philosophy than Titanium. This framework does not compile in native code, but instead it opens a webkit view in a native application. So your html and css is shown exactly how it will look in the real application.
There is no question that mobile will be a huge market in the future, especially as devices and frameworks become more and more advanced. For now, mobile web applications are lagging a bit behind, but within a year, I’m pretty sure we’ll see some significant changes.
If you want more information about the state of the mobile web, I would advise you to follow Admobs mobile reports, it’s really full of very interesting information.
This piece was written by Cedric Dugas, CakeMail’s Interface Developer. You can follow Cedric on twitter @posabsolute.