In the last month or so I have been exploring mobile development. I wrote basic native Android and iPhone apps. I also build cross platform apps using Rhodes, Titanium, and PhoneGap. I thought it would be good to share my thoughts and experiences on the mobile dev space.
If you want full control and are doing a lot of local heavy processing (CPU bound) native is the way to go. I program to the web data without access I don't do much interesting. When the whole app basically relies on live data I feel javascript, HTML, and CSS is the way to go. Not only am I already familiar with it, but basically the app can share code with the mobile site. Also, using JS, HTML, and CSS gives the most flexibility in terms of supporting multiple devices. Since I wasn't using anything specific to a single mobile device or really pushing the hardware, I quickly moved away from fully native apps. It wasn't worth the time and extra effort to write nearly the same app in Java, Objective C, and whatever else. Game developers, and those doing a bunch with video, photos, etc are probably most interested in native apps and probably won't be as interested in other options.
This lead me to explore Rhodes, Titanium, and PhoneGap as alternatives to purely native apps. All of which let you leverage HTML and CSS for building a UI.
Rhodes lets you write code in Ruby using a MVC framework. You leverage html (erb/haml) views using a Ruby back end to make remote requests, interact with a DB, and interact with native phone components. It is a cool framework, and obviously since it is Ruby, I enjoyed writing the code. However, it obscured the actual process of making an app for a device a bit much for my comfort. If something went wrong anywhere in the stack or if you wanted to break out of the Rhodes way to do something native on a platform it was difficult to do. It tries to manage the entire app development end to end hiding any per device customizations away from you. Since I wanted to be able to use some existing libraries for Android and iPhones, this limitation was a dealbreaker.
Titanium and PhoneGap use the same basic approach as each other providing a javascript library, which interfaces with native code for each device. You write an app in JS/HTML/CSS and make calls to the JS library to interact with native elements like the accelerometer, GPS, buttons, etc. I think it's a big win to be able to write most of the app in familiar web languages basically utilizing Ajax and local storage to give a nice mobile experience. Getting up and running on either Titanium or PhoneGap was painless. Again, in the end I wanted more control over some native components which caused me to choose PhoneGap over Titanium. While the concept is the same for both of these products, their approach is very different.
Titanium is a bit more all or nothing of an approach, you develop in Titanium's little world and it is best to not go out of
it. PhoneGap takes a extremely lightweight and minimalist approach to getting your project running on each device. It gives you basically the bare necessities and gets out of your way. PhoneGap doesn't try to configure the build environment and it doesn't manage simulators. To create a app with PhoneGap for any mobile platform you point to the same web directory (HTML, CSS, JS, and images), then generate a native app for the device. At that point you have the same native app project you would have if you were to start from scratch but you have a few nice libraries and code started for you. If you don't like the way PhoneGap does something, that is fine delete it, override it, extend it. You need to do something native PhoneGap doesn't support add your own JS handlers and interact with new or existing native code. I needed to allow for FaceBook connect login on Android, which PhoneGap doesn't support no problem. FaceBook maintains a Android SDK, which I imported into my PhoneGap project and added JS handlers which call to the FaceBook Android native code. There is a bug in Androids SSL cert verification for WebKit that was causing errors for HTTPS access, drop into java override the SSL Cert verification and fixed that. This would be difficult to do with Rhodes or Titanium because they don't allow you easily write and interact with your own native code. The project has to work only through the API provided to you to stay cross compatible. Which is great in some ways, but very limiting if you want to break out and just tweak a few little things.
I have been extremely happy working with PhoneGap, it rocks. It lets you build a native mobile app as a locally cached and privileged mobile website. You can leverage existing mobile site code for the native app. It will still be better than a pure website experience. It lets you piggyback on skill web developers already have. It is a great way to make use of HTML5 local DBs, local data, and HTML templates. It encourages you follow best practices for building a mobile site that works offline and requests only minimal JSON so it can fast over slow internet.
Before building an app with PhoneGap I recommend building a mobile site. Learn about best practices for the mobile web. If you are new to developing sites for mobile, I highly recommend following the recommendations from Yehuda Katz on building great mobile sites. He discusses some things specific to Rails 3, but mostly just good JS practices.
In many ways when building a PhoneGap app you are just building a mobile website. You have access to utilizing some native things that you can't with pure HTML/CSS. Local storage is a good example, it is supported by HTML5, but the earlier Android webkit didn't support it. Using PhoneGap you have local storage on old devices and it can use standard HTML5 local storage on newer devices.
Last but not least, PhoneGap has a great active community. Drop into #phonegap on freenode and people are always around to help out. The mailing list has a constant flow of questions and answers. While PhoneGap docs are a little out of date, there are people actively working on improving them. There are many example applications and open code on github to check out how to use PhoneGap. Also, the code is small and simple enough it is a great project to get involved in and give back. After working with it awhile, you will start to understand the internals and could help contribute patches, features, and plugins to the community.
Comments (18)
Can you point me to resources on the custom JS handlers in PhoneGap? Does it mean that I can write a JS bridge to anything available in the native API?
Posted by Luigi Montanez | July 7, 2010 10:34 AM
Posted on July 7, 2010 10:34
Extending Titanium isn't as easy as it could be - fair criticism. While it is completely possible to write custom Titanium modules today (several community members have done so successfully), we're actively working on a more formal module system to allow folks to easily extend Titanium. Hopefully that criticism won't be as fair in a month or two ;).
Also, it's worth mentioning that you can do a full HTML/CSS app in a web view in Titanium if that is your preference.
Posted by Kevin Whinnery | July 7, 2010 10:57 AM
Posted on July 7, 2010 10:57
Luigi yeah you can do that exactly.
My blog comments suck and wouldn't let me type code, so here is a gist explaining it.
http://gist.github.com/466946
I learned from this example I found online:
This isn't the easiest to follow example, but I learned how to add handlers based on it.
http://www.somms.net/2010/05/28/native-messages-for-android-phonegap/
Posted by Dan | July 7, 2010 11:00 AM
Posted on July 7, 2010 11:00
Kevin,
Yeah the full HTML/CSS is definitely possible in Titanium hopefully I didn't make it sound like it wasn't an option. Titanium is really awesome, and for some projects it would be the best choice. If Titanium gets better support for user developed plugins and Device Specific plugins I would definitely give it another shot. Another thing to note is PhoneGap currently has support for more devices, but I know Titanium is launching BlackBerry soon and likely other devices as well.
Thanks,
Dan
Posted by Dan | July 7, 2010 11:07 AM
Posted on July 7, 2010 11:07
Thanks for the reply, Dan. You're correct on platforms Titanium supports - in addition to iOS and Android, BlackBerry beta just launched (next up is likely webOS). One more comment and I'll leave your blog in peace...
Another distinction that didn't quite come through is that Titanium and PhoneGap don't do the same thing. I think you nailed the description of a PhoneGap app - it's basically a locally cached, privileged mobile website. PhoneGap actually has more in common with Titanium Desktop or Adobe AIR than Titanium Mobile in that sense.
A Titanium Mobile app has more in common with, say, a MacRuby / HotCocoa app - the JavaScript code you write is interpreted on the device, indirectly invoking native APIs through the Titanium JavaScript namespace. So when you create a tab group, a map view, a table view, a button, a slider, etc. those are real native components which behave like native components. However, as I noted earlier, if you want to do a full HTML/CSS/JavaScript UI, Titanium lets you do that also via a native web view component.
That might be why you feel Titanium forces you into 'it's own little world' - our JavaScript API is designed to map as directly as possible to the underlying native APIs. A key factor driving the development of Titanium is a desire to get apps as close to native as possible while providing a more productive (and cross-platform) programming environment.
Please do keep tabs on Titanium - we're working on making the process of hacking native code a bit more accessible.
Posted by Kevin Whinnery | July 7, 2010 11:56 AM
Posted on July 7, 2010 11:56
Kevin,
That is a good point. That PhoneGap allows you to access native components, but only through a webUI. Where as Titanium lets you utilize native UI elements etc through the interpreted JS. That is definitely a distinction worth making, and that I should have made more clear.
One negative I should have mentioned about PhoneGap is that it doesn't do ANY UI work for you, it leaves you to build all CSS on your own (using libraries like IUI if you want). This means if you want to build out a webUI that has a native look and feel you have to do a lot more work to make things look like the tab bar, or other items. Titanium is definitely way ahead in terms of building cross compatible UI by providing access to native UI elements. Making it slightly more similar to Rhodes than PhoneGap. In fact I would like to see some more of the native UI interaction elements made accessible in PhoneGap, but that isn't really the projects goal.
Posted by Dan | July 7, 2010 1:14 PM
Posted on July 7, 2010 13:14
Great post Dan. I cycled between the three of those frameworks for sometime, until primarily working with Rhodes. I definitely agree with you regarding the point around Rhodes feeling like it's working against you sometimes when you are trying to do something a little different.
I think people can probably choose to go with any of the frameworks you mentioned, but I would re-iterate your point regarding developing a mobile site first and thinking in a HTML5/JS/CSS headspace rather than committing yourself to the way any one particular framework operates.
It's been an absolute plus in the application I'm building currently (which I'm actually writing a HTML5 mapping library for as well) as if I wanted to I could easily jump to any of the others and only have to spend a couple of days coding (at most) to get there.
Posted by Damon Oehlman | July 14, 2010 3:47 AM
Posted on July 14, 2010 03:47
"I program to the web data without access I don't do much interesting."
I can't seem to parse that into anything that makes sense!
Posted by Tony | August 9, 2010 12:08 PM
Posted on August 9, 2010 12:08
FYI - iPhone module development guide is available, Android one is in production:
http://developer.appcelerator.com/doc/mobile/iphone/module_sdk
Posted by Kevin Whinnery | September 17, 2010 5:45 AM
Posted on September 17, 2010 05:45
Hi Dan,
I've just started tinkering around with PhoneGap too and it was a great article to read.
I tried to get the Facebook SDK to work in my app, but it gets stuck after displaying the initial "Loading" progress dialog.
I think this is because Android apparently doesn't support multiple WebView instances in the same app.
The SDK Examples work great. Its only when I try and do it with PhoneGap I face this issue.
It would be great if you could give me any pointers to overcome this problem. I've spent a couple of nights on it already and I'm running out of beer ;)
Cheers.
Posted by Len | September 20, 2010 4:53 PM
Posted on September 20, 2010 16:53
Damon Oehlman,
Sorry that wasn't worded the best. I was trying to say, I program to data on the web. Without web access I can't do much interesting. I don't program games, I program mostly apps that require live data and interaction with a server.
Posted by Dan Mayer | October 3, 2010 8:30 PM
Posted on October 3, 2010 20:30
Kevin Whinnery,
Great about module development for the iPhone, looks like Android is in progress. I will give Titanium another shot sometime.
Posted by Dan Mayer | October 3, 2010 8:35 PM
Posted on October 3, 2010 20:35
I'm very interested in iphone/android mobile app development. I'm a lead C#/.NET developer and thought of developing using MonoTouch but then the steep price ($399 for Pro edition) stopped me. So, the othe options are naturally open source.
I really like the comments about Titanium. I'm not a hardcore web designer or a HTML guru. Also, I haven't done much work in CSS. But, I have done intermediate work using Javascript. All I'm looking for is whether Titanium has a design view where I can drag and drop iphone specific UI elements onto the designer and write code for the events? I'm thinking in those lines of Visual Studio IDE which does exactly what I'm looking for. So, the Titanium should have a IDE to both tweak HTML and also support for drag and drop of UI elements.
Thanks.
Posted by VS | January 11, 2011 8:50 PM
Posted on January 11, 2011 20:50
VS,
So I do think you should check out Titanium, it may or may not have drag and drop UI elements, but it have a really easy to build UI. They have prebuilt crossplatform UI elements that you can use. You set it up in JS and then it compiles to native and looks really solid and is fast. If you have to build a UI from scratch and your UI experience is weak, Titanium is definitely the way to go. I do like phone gap, but you are basically entirely on your own for UI, which takes more time / experience. For applications that fall in the constraints of Titanium, I think it is a incredible resource.
Posted by Dan Mayer | January 12, 2011 8:34 PM
Posted on January 12, 2011 20:34
Thanks. This post answered the very questions we had about developing cross-platform connected mobile hybrid web-apps with native hooks to device extensions. I'm sure you've saved us a lot of time and expense.
I expect we'll find lots of good stuff on your blog as we venture into the mobile dev space. Keep up the good work!
Posted by Red3 | January 18, 2011 9:19 AM
Posted on January 18, 2011 09:19
Hi,
One thing you don't talk about is the UI framework you used with PhoneGap. From what I understand, Rhodes has it's own UI (based on jQTouch), Titanium uses the native one, so what do you use on PhoneGap. I know Sencha is a great solution, and jQuery Mobile is coming up, but in the meantime, I'm not aware of any Javascript UI framework that would provide something nice on iPhone, Android, Blackberry (including old versions like 4.6). To me, this is the biggest challenge with PhoneGap : sure, it supports all those platforms, but building a UI for all those devices is difficult. The last iPhone and Androids support a large set of HTML5 and CSS3, but once you move toward older devices, you're screwed.
I'd be interested to have your thoughts on this.
Posted by Cyrius | January 24, 2011 5:17 AM
Posted on January 24, 2011 05:17
Yeah there isn't a great cross phone UI framework for phonegap. That said straight HTML/CSS is cross compatible. You don't have to use a UI framework and make it look like a 'native' app. You don't have to be constrained to native looks and feels. You can do anything that CSS can do, basically to look good across phones you just need to support webkit, which is the base that powers both the iPhone and Android browsers. Old androids are on a older more limited version of webkit, so a bit of testing is good.
I support Android 1.5 and can make a variety of UI with the support that is offered at the point. It doesn't have as many of the fancy fades and transitions.
Posted by Dan Mayer | February 7, 2011 5:47 PM
Posted on February 7, 2011 17:47
Hi !
Great article. Do you have any infos about integrating facebook connect in phonegap ?
Did you push your code over on github ?
Thanks
Posted by gabriel | February 15, 2011 10:01 AM
Posted on February 15, 2011 10:01