Introduction
WebKit is an open source layout engine that displays the content of web pages in browsers. It handles the look and feel of a web page using HTML, JavaScript, and CSS.
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)
Background
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,
We then started to look at various options as to how to get the app onto desktops and other devices. We did not want to have to build and maintain two sets of code, and Objective-C runs only on iOS and Macs. The primary options were Java FX, which does not run on iOS, Adobe AIR, and some form of HTML/JavaScript technology. The latter was daunting, because of the balkanization of JavaScript. Different implementations of JavaScript in different browsers mean that developers cannot count on their code running the same way everywhere. This is because the implementors do not, in reality, adhere to standards. Because of this track record, we believe in implementations, not standards. What we settled on was WebKit.
WebKit
WebKit is the basis of the Safari, Chrome, Sleipnir (Japan), Maxthon(China), and a score of other browsers. More importantly, it is used on the following mobile devices:
- 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.
A second point. Writing code in JavaScript is much simpler than Objective-C. With JavaScript, you don’t have to clutter your attention and time with finicky data types ( int vs uint vs short vs long vs char ), redundant header files, and pesky memory management issues. You focus on the logic of your program. The OO capabilities of JavaScript are not nearly as strong as Objective-C or Java, but we are adding them in (more on that later). We are also building in optional type-checking and property verification functions that we can add in once the logic is working. The complexities of building an interface with HTML & CSS & DOM make that aspect somewhat of a tossup compared with Cocoa or Java. But we only have to write it once, and it runs on every platform we need it to, and will need it to. This is good. Very good.
Hurdles
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.
- Mobile devices are slow. At one point, our app has to sort and display a list of 400 words. On a second generation iPod, this takes 8 seconds in JavaScript. We will have to use the Objective-C handle this faster on iOS. The rest of the program runs fine.
- 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.
Success
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.
See also
For more information, see the following pages on this site:
WebKit Works 