This article explains why we are using WebKit as the basis of our app programming.
(Most of this article was written in September, 2011, two months before I became a Senior Technical Trainer for Sencha. There have been a few edits since then, in an effort to keep it accurate and up to date. – Jim)
Our task was to develop an app to help people learn foreign language vocabulary, similar to flash cards, but electronic, and on your mobile device. The initial target platforms were iPods and iPhones. But we also wanted the same program to run on desktop computers, for those who did not have Apple’s iOS devices. For various pedagogical and technical reasons, we did not want to run the app inside a browser. We wanted real apps, mobile and desktop.
An initial version had been programmed for iOS using Objective-C, Cocoa and XCode. We finished the program and it was delivered in the summer of 2010, where it proved to be extremely effective in a pilot study,
- Apple iOS, including iPhone, iPod, and iPad
- Android mobile devices, including all phones and tablets
- Amazon Kindle 3 (experimental)
- newer BlackBerry phones and tablets
- Symbian, MeeGo (Linux) and Bada (Samsung) phones and tablets
WebKit also runs on Adobe AIR, which is the desktop platform for much of its Flash technology. This means that the exact same WebKit-based .air program runs on Windows, Mac and Linux desktops.
Other mobile/desktop options come from Sencha and Appcelerator’s Titanium, app frameworks that run on iOS, Android, Blackberry, Windows, and Mac, and they use WebKit. There are other frameworks that also use WebKit, but Adobe AIR, Sencha and Titanium have a desktop option, which was critical for us.
To summarize, WebKit runs on every modern desktop and mobile OS, with only 2 exceptions, Windows phone and Maemo (Nokia 900), and they are struggling to gain market acceptance.
Even better, all of these platforms are running nearly the same implementation of WebKit, derived from the same (open) source code. This means that we are writing one set of source code, and 90% of that code works consistently on all our target platforms. This streamlining of otherwise complex code represents a huge savings in development and testing costs, and opens up markets that we would otherwise not have.
Of course, not everything is perfect. We had to deal with the following hurdles :
- WebKit is not in all browsers. Run as an html page, our app works quite well in Firefox, well in Opera, and not so well in MS Internet Explorer. We could use a portability framework such as JQuery to solve some of these problems, but we are not targeting browsers so we don’t worry about it.
- We need audio support, to play recordings of what the words sound like, The HTML 5 <audio> tag is not yet a standard, so we have to rely on PhoneGap to give us access to the audio capabilities of mobile devices. Adobe AIR does the same for desktop devices.
- We also need to record information about what the student is doing during and between sessions. We need to store this information in some kind of persistent cookie. Again, PhoneGap’s localStorage and Adobe AIR’s SharedObject provide the means to handle this on various platforms.
- Scrolling. For some bizarre reason, iOS and Android do not to support scrolling of the content of lists and tables inside a frame on iOS, like a normal web browser should and does. Currently we are using iScroll to handle this for us.
- WebKit does not have the exact look and feel of a native app. There are books written by Jonathan Stark about how to make an HTML/CSS app look like an iPhone or Android app, and we will follow many of his recommendations. It will get pretty close, and certainly be easily useable. It is the most cost-effective choice available. (Later:) Sencha Touch and JQuery Mobile look like helpful libraries for providing a good look and feel on mobile devices.
One programmer is getting a powerful app to run on four, soon to be more, platforms. WebKit made this possible. WebKit allows us to write code much faster, and provides for platform consistency at a 90% level. PhoneGap and Adobe AIR take care of the other 10%. This is good. This is why we are programming to WebKit.
For more information, see the following pages on this site: