Archive

Archive for November, 2010

Adventures at Open MIC 8

November 7th, 2010 No comments

A couple of weeks ago, a friend of mine in Bath, Julian Cheal, pointed a friend of his, Chris Book my way on Twitter. Chris runs OpenMIC (Mobile Innovation Camp) and was looking for Brighton based mobile developers to meet up with to promote the upcoming OpenMIC 8, held at The Grand Hotel in Brighton on 4th November.

Naturally I invited him down to Brighton to attend the monthly meeting of the Brighton iPhone Creators group and get royally drunk with some fellow mobile devs in The Basketmakers, and equally as naturally Chris agreed.

The next day, slightly worse for wear, Chris and I met for a coffee to chat about life, business and mobile development. During this time I mentioned that I was currently investigating PhoneGap and was intrigued by Titanium as alternatives to native development. I knew very little about them at the time and wanted to learn more. Obviously whatever I said must have inspired Chris for later that day he asked whether I would like to present the result of my investigations at OpenMIC. After some consideration I decided that I would be a fool to pass up the opportunity to speak at a conference for the first time and accepted. I then realised that I had less than two weeks to pull everything together.

In reality, I had even less time than that. With other work commitments and the existing commitment of talking at the Five Pound App that Tuesday to present an app that Ian and I had been working on, it ended up boiling down to one full day and 2 evenings. I had decided to write the same app twice, once in each technology, and compare the results. I wrote the Titanium app on the Sunday afternoon, the PhoneGap app on the Monday evening after a full days work and the presentation on Wednesday.

Luckily for me it all came together (quite late on Wednesday night) and Ian and I rocked up on the Thursday morning at The Grand raring to go. There were 4 talks in the morning session, followed by a developer panel, then after lunch  2 ‘barcamp’ style sessions before the evenings socialising (partly funded by Microsoft).

Up first was Tom Hume of Future Platforms talking about how he felt that using web technologies in mobile app dev was the future. He explained how HTML and CSS were mature technologies that had already solved a lot of the UI problems that were still incredibly difficult to achieve when developing natively and proposed that mixing the two, using HTML where most suitable, and native when tackling more difficult problems, was his ideal.

Then came Stuart Scott, CEO of infohand, who had a lot of commercial experience and knowledge in the mobile world. He explained about the economics of mobile experiences and developing mobile applications and how perhaps using the web in mobile could help reduce the costs of creating engaging applications.

Next up was Mike Ormond, a developer evangelist at Microsoft. Mike showed us Windows Mobile 7, a handset and operating system that had so far been unmentioned when talking about cross platform development. Windows mobile 7 looks fantastic and his argument was that in order to keep the experience fantastic you had to develop specifically for the device, and that meant natively. Despite the talk being centered purely around WM7, I felt that the point stood in relation to all devices.

Finally it was my turn. Mine was the only purely technical talk, showing code. I felt rather embarassed when we got the first page of code and discovered that the colours had washed out totally on the projection and it was very hard to read what it said, but subsequent feedback was that this made me explain the code in a detail which I might otherwise have missed and so made the talk more useful. I learned a valuable lesson about displaying code snippits on projectors. You can view my presentation on SlideShare, download the code at GitHub and read more about it on this blog post.

I got asked to stay up on ‘stage’ for the developer panel which I gladly did. The panel was asked to explain why should a client pay multiple times for an application written natively for many devices, and not just pay once for a mobile website to cover all devices. The general conclusion was that it all came down to that last 5% of polish that makes a good mobile app a fantastic mobile app and that last 5% was far harder to achieve using the mobile web that with native apps.

Somehow I got volunteered to run a barcamp session about PhoneGap and Titanium in the afternoon and also managed to get a good play in with a Galaxy Tab that one of the delegates brought along. After that it was beers and more beers and then curry with beers. All of the delegates that I met were fantastic. So many knowledgable and friendly people and I had lots and lots of fun.

I am now trying to organize my time so that I can make it to the next openMIC on 2nd December in Oxford. Chris, Pinar and co have developed a great conference and I highly recommend that you find the time to go if one happens to pop up in your area in future, or make the effort to attend one somewhere else in the country.

Experiments in PhoneGap and Titanium

November 7th, 2010 6 comments

I talked recently at OpenMIC8 at the Grand Hotel on 4th November 2010 and the theme was native vs web. I decided to talk about the investigations I had recently been doing in cross platform development tools such as Titanium and PhoneGap.

I decided to write a simple app twice, once in each technology. I decided to replicate the first proper iPhone app that I wrote. This was a simple app that I wrote for Ian for a presentation that he was giving about the uses of Artificial Intelligence in the modern world. The app used a webservice that he had created that used Optical Character Recognition to read text in images and return the transcribed text. This meant that the app needed to do 4 main things:

  1. Take a photo with the camera (or choose from library)
  2. Upload an image to an external API
  3. Parse JSON response from API and display
  4. Play streaming Audio of transcribed text

As the first native iPhone app that I had written, only having implemented tutorial examples before, this app took me approx 14 hours to create. At this point all I had done in PhoneGap was some toy examples and I had not got further than downloading and installing Titanium. I thought this would make a good comparison point for the two techniques.

PhoneGap is the most versatile of the cross platform techniques. You write HTML and CSS which gets executed from inside an app using WebKit. It is basically a mobile website embedded inside your app. PhoneGap works on all iOS, Android, Symbian, Blackberry and Palm devices, but you must download and install each SDK and development environment, and then integrate PhoneGap with each. You then build and deploy your app inside the platform build environment. However, you can pretty much write your mobile site inside your web dev environment of choice and then just import it into the platform environments when it’s done. Then it’s just a case of making small, platform specific changes (there are small differences in the availability of methods for each platform).

Titanium is currently only available for iOS and Android, although there is a Blackberry version in beta. You download Titanium and it installs Titanium Developer, a project creation and execution environment. You then use your own favorite editor to write Javascript. This Javascript again runs within webkit, but instead of providing an HTML interface, it creates and uses native components, giving your app the look, feel and more of the speed of a native app. From within Titanium Developer you can then execute your app on iPhone devices or simulator, and Android devices or simulator at the touch of a button. You can also either use TD to deploy and package your app for the store, or to generate a platform specific project to import into the plaform development environment for packaging.

With both PhoneGap and Titanium, you can write your own native functionality and provide an interface to call from Javascript inside the non-native part of your app.

I started reading Titanium’s documentation, hungover, at 1pm on a Sunday afternoon. I found the documentation pretty good and it was very easy to find examples of everything that I needed to do. The Kitchen Sink app that you can download from GitHub contains a demonstration of all the features of Titanium and a couple of quick Google searches gave me everything else I needed.

By 6pm I had the main bones of the app, but another couple of hours (including time to create some images) gave me the final thing. The whole app is in one file, app.js. Despite not knowing a lot of javascript I found the whole experience easy and fairly enjoyable.

You can view the code here.

On Monday evening, about 6pm I started on the phonegap app. I had already done most of the examples that I could find so there was no need for the initial documentation reading that I had needed to go through for Titanium.

At this point I need to point out that I do not do web programming. I know no CSS and have very little HTML experience and no HTML5 knowledge. In fact, I have avoided as much front end web programming as I could throughout my whole career. I chose to use JQuery Mobile as I’d looked at it previously and I found that it provided some very nice looking components which massively reduced the need for me to know any css at all. For me this was hugely important. It enabled me to get to the point of having a most of my app within 2.5 hours of starting. It did, however, look utterly appalling. For this I needed to recruit some help from a friend of mine who knew CSS. I spent 30 minutes with him on Tuesday and we got it all looking fine.

However, it took me an awful lot longer than 3 hours to complete the app. It took 4 hours and 3 different people to solve the biggest problem I had – uploading the image to the webservice. In both the Objective C and Titanium versions this had caused only small, easy solvable problems. However all of the upload examples for PhoneGap used code that attached the image data as a URL query parameter to the POST. The webservice, however, needed the image attached as a file on a multipart message. Constructing the multipart header was no problem , but it took quite some time to discover that the message was being posted base 64 encoded. The webservice only returned a HTTP Status 500 so we had to debug for some time before we figured out what was wrong. However, even when i used a Javascript base64 decode function before posting, the webservice still failed to understand the message.

In the end we created a new webservice that did the base64 decode after posting, but this was not an idea solution. I have since (with help from Keiran Gutteridge) I have worked out how to add my own PhoneGap function to send the image base64 decoded so I can use the original webservice. This headache sadly took up most of Monday night and part of Tuesday and Wednesday. It also took 3 people. PhoneGap total: 8 hours & 4 people.

You can view the PhoneGap code here

In conclusion, writing cross platform code is far quicker and simpler than writing native. The results, for very simple apps, are almost as good. Titanium, building native components, gives an device experience almost as responsive as if you had written it natively. If I had been an experienced web developer, the look and feel of the PhoneGap app would have been almost as good as the real thing, and if I were to do PhoneGap development in future, I would have to ensure I had a CSS and HTML expert to handle the creation of CSS transitions and beautiful interfaces. Even then, the responsiveness of the result is somehow not quite good enough. It’s just slightly laggy and the transitions just don’t look perfect. If you app relies heavily on that last 5% of Wow factor to set it apart, I would still choose native.

Also, even though Titanium gives access to far larger parts of the device than PhoneGap, to do really complex functionality you still need to write it yourself natively and then you need to wire it in to your chosen non-native environment. In my opinion you would need a really good reason not to go native, but if that reason was there, then I would choose Titanium. If I were an experienced web dev, perhaps I would have more time for PhoneGap, but for me it’s not really an option. I will probably use Titanium again, for rapid prototyping, but would write natively once the prototype was finalised.