Friday, 11 February 2011

Building Native-like Web Apps for Mobile

Sencha Touch
I spent a few months at the back end of last year working on a project to bring company information down to mobile devices within that company.  I took the decision early on in the project to implement the solution using a web browser to host the application and a Javascript tool kit to fake the look and feel of a native application inside the web browser.  It's this technique and tool kit that I want to focus on here.

The first key decision in a project such as this is whether to go with a native application or an app delivered through the browser.  Since in this particular case the people I was writing for all used iPhones, perhaps the natural choice would have been to write a native iPhone application.  They could, however, just as easily have been using Android or a whole host of other devices.  The real benefit of the native application (aside from speed perhaps) is the ability to interact with the hardware on the device your application will be running on.  Since I did not require access to a camera, GPS, accelerometers or any other phone features, delivery through a web browser was a very realistic option.  In giving up the ability to access these hardware features you gain the ability (if done carefully) to write-once run-anywhere.  That is, the application I came up with would be able to run on an iPhone and Android or pretty much any device with a web-kit based browser and a decent touch screen interface, but at the cost of not being able to use, for example, a bar code scanner.

There are probably others but to the best of my knowledge there are currently three Javascript toolkits positioning themselves for the mobile space.  Dojo MobileJQuery Mobile and Sencha Touch.  Did I just say positioning for mobile space?  Lucky you, if you're playing buzzword bingo, sorry!  At the time of creation, Dojo and JQuery weren't options, they are both only now ramping up development in this area and in the case of JQuery releasing early alpha drops.  Sencha Touch was much more advanced and already at a 0.90 beta when I first started playing with it.  I followed it through the beta development cycle over the summer months in 2010.  Fortunately, it seemed the timing of the production release of Sencha Touch was likely to be at the same time the first phase of my customer work went live so it became the obvious choice.

As a bit of background (and again this is my understanding so may not be absolutely accurate) Sencha was formed by the merger of JQ Touch and the EXT JS toolkit when the original author of JQ Touch, David Kaneda, joined forces with EXT development.  Essentially, Sencha Touch is the next generation version of JQ Touch but now has a small army of developers, a community, and a company behind it to provide a support network.

I quite like the approach of delivery mobile apps through the web browser, where it's appropriate to do so of course.  I've already discussed that in my view you can develop a web app in the browser if you don't need access to the device hardware.  If you don't require that sort of access, it's hard to see why you'd want to develop any other way.  As an Android user, I often get frustrated when apps (pointless or otherwise) are released only for the iPhone simply because that's what an iPhone user expects.  One example I had recently was while reading through my subscription of BBC Good Food magazine who seem to provide only an iPhone or iPad application.  In fact if you go to their web site they also provide a Chrome app and a Samsung Wave app, why I wonder?  The magazine simply displays content with little or no interaction from the user, sure the online versions contain video and other features you can't put down on paper but there's nothing there to suggest the maintenance of a myriad of different apps for different mobile platforms is worthwhile.  Not to mention my surprise that an organisation such as the beeb are carving up their community by device type rather than, as we'd expect, supporting the masses as we saw with iPlayer coming to Mac and Linux after their early Windows only versions.  Surely, a javascript toolkit approach here would be better?

In the early days of my playing around with the Sencha Touch beta code I wrote a mobile version of a badminton web site I maintain.  It's not particularly advanced and certainly not representative of all the things you can do with a toolkit like this but thought I'd put it out there anyway.  It should, at the time of writing work with iPhone, iPad, Android and Blackberry devices and quite probably with others too.  If you're trying on your desktop then make sure you're using a WebKit based browser such as Google Chrome or Safari, or for something a little bit different the great little browser Midori.  For a better selection of demos take a look at the Sencha Touch Demo page and for a developer perspective on the widgets and options available in the toolkit have a look at their Kitchen Sink demo which gives a simple overview of many of the components.


Anonymous said...

Just curious, but what aspect of WebKit does your application depend on?

Graham White said...

Hi Ed,

Sencha Touch is developed for mobile browsers which are typically based on WebKit. The default CSS the toolkit uses contains a lot of WebKit specifics in it and as far as I know wont work well with other rendering engines. I don't know how easy it would be to generate something for other browsers, Sencha Touch is certainly very customisable (and it's easy to customise too) but I suspect it might be a fair amount of effort.

Thanks for the comment. What did you have in mind? Was there something you wanted to do in another browser or was it just a question about how universal this type of technique might be?

Anonymous said...

Oops, sorry, forgot to reply to this earlier.

Partly it was a question about what's special about web pages on mobile devices but also a concern that we don't need another wave of browser-specific developments.

Graham White said...

I agree and do worry about what might happen when someone brings out a browser for a mobile device that isn't compatible with the tool kit. With that in mind, I think this is an area where JQuery and Dojo mobile will be stronger. Also, there's enough of a community behind Sencha that should this ever happen they would be able to pull something out of the bag to support it fairly quickly I should think. For now, their strategy is OK.