 |
|
Aditya Bansod |
In early December, Google released the latest major upgrade to its Android mobile operating system, Android 4, codenamed Ice Cream Sandwich. For Web developers, this represented a prime litmus test of Android: could HTML5 be a viable cross-platform solution for building on both iOS and Android? At Sencha, we've examined the latest versions of both Apple's iOS (version 5) and Android (version 4) to understand what each platform offers the Web application developer and its specific advantages and merits.
To deliver a first-rate Web app platform, a browser needs to provide a handful of core functions to the Web app developer: a rendering engine, which displays the visual elements of the interface in the most fluid manner possible; a JavaScript engine, which executes the application logic; and the DOM and browser APIs, which provide HTML5 features and the ability to make network requests, upload files, manipulate the page, and more. To compare Android 4 and iOS 5 from the perspective of the Web app developer, let's take a look at each of these three layers.
WebKit: Android 4 shows big gains, but still has gaps
Nearly every mobile Web browser starts with the WebKit rendering engine. An open-source project originally forked by Apple from KDE/KHTML and now backed by the participation of Apple, Google, Qualcomm, RIM and many others, it's now the de facto standard for rendering Web content on mobile. Both the Android 4 and iOS 5 browsers are based on WebKit, with each implementing a slightly different version. For the former, it implements WebKit 534.30, while the latter implements 534.46.
While iOS has a slightly newer version, the difference is minimal as it's the actual implementation of the WebKit engine on the hardware and software that makes the most difference when it comes to rendering. In our testing, we've found that Android 4 is a major step up from Android 2.x and Android 3 in terms of visual rendering. Touch scrolling is much smoother and the jerkiness that was commonly associated with Android has mostly gone away. Unfortunately, there are notable bugs in the rendering performance, such as flickering or slow scrolling when moving elements on the screen using JavaScript or CSS3. For Web apps that rely on dynamically moving content, Android 4 performs worse than Android 2.2. Overall, Google has taken a big step forward by making the browser experience more organic.
Also, in the rendering feature set, Android 4 has added support for many of the CSS3 features that had long been integral to iOS 5. Specifically, Android 4 now properly supports CSS3 2D and 3D transformations, animations, transitions and reflections. This is a major step forward for Android as Web developers can now start to leverage the skills they've been honing on iOS to make fluid and expressive Web applications. With these features now supported, we're hoping that Google and the Android hardware vendors will polish off their implementations to make them flicker-free and deliver higher performance so developers can truly rely on these advanced rendering features.
JavaScript: performance parity
In iOS 5, Apple introduced a new JavaScript engine called Nitro, which significantly increased the performance of JavaScript in the Mobile Safari browser. For a while, iOS 5 had the fastest-executing JavaScript in the mobile browser ecosystem. Again, Android has caught up: the JavaScript engine in Android 4 is a major step up from Android 2.x (Gingerbread). Depending on the hardware, it can outperform iOS 5. To accomplish this, Google brought in the V8 JavaScript engine that had originally been a part of the Chrome browser, resulting in a 2x+ increase in the execution of JavaScript. As a result, iOS 5 and Android 4 are fairly equivalent in term of how they JavaScript, which means application developers should assume there are only minor differences when considering developing for one platform versus another.
iOS 5/Safari leads with more APIs
The last part of the browser stack is the APIs, where capabilities like network access, file system access, Canvas and other rich app-like functions are exposed. iOS has long been the standard-bearer in API support and, even with the improvements embodied in Android 4, this continues to be the case. iOS 5 added support for features like "overflow: scroll"; the WebKit-proprietary "-webkit-overflow-scrolling: touch" (which allows independent scrollable areas and touch bounces); Web Sockets (for more real-time communication); Web Workers (for background processing); and many different HTML5 input types (such as number and date). Android 4 still lacks support for these common HTML5 features, but does have one standout addition, which is support for the File API. The File API makes it possible for developers to manipulate local files on the device, allowing richer apps and access to features such as the phone's camera roll. Nonetheless, iOS 5 offers a richer set of browser APIs and broader support for HTML5 features.
For now, iOS 5 has the overall lead
The leader in mobile browsers still remains Apple's iOS 5. While Android beats it in raw JavaScript performance, overall, Mobile Safari offers more API support and higher performance graphics. Android 4's browser is a major step forward for Android browsing: with its better (though buggy) visual effects and rendering performance and a faster JavaScript engine, Android 4 is markedly better than any Android that came before it. Developers who are looking for Web-standards to deliver a cross-platform solution should feel more comfortable than ever using HTML5, as the improvements in Android 4 show huge momentum on Google's part, opening up a huge potential market for their applications.
Aditya Bansod is senior director of product management at Sencha Inc.