BlackBerry Torch: The HTML5 Developer Scorecard

August 18, 2010 | Michael Mullany

The BlackBerry Torch 9800 is RIM’s new entrant in the smart(er)-phone market and the first device from RIM to incorporate a first class Webkit browser. Originally previewed back in April of this year, the Torch shipped last week. We were very excited to get our hands on it because our strategy for Sencha Touch is to allow developers to create rich application experiences across every device that can support them. Would the BlackBerry Torch measure up? We hoped so. As soon as we could, we tramped down to our local AT&T store and picked up a brand spanking new Torch.

Our First Look “Methodology”

The BlackBerry Torch has the usual collection of superb mail and enterprise security features, including BlackBerry’s unparalleled keyboard for long typing sessions. But this isn’t a product review, it’s a web developer first look, so we decided to test only browser features. Deciding specific tests to use is always a little arbitrary, but for this first look, we decided to run the Torch through a gauntlet of standards (ACID3), feature (Modernizr), performance (SunSpider) and real-world tests.

[And although we’re focused on HTML5 in this review, before we put the Torch through the wringer we browsed to a number of major websites using the Torch and the result was consistently great. For normal website viewing, the Torch does a excellent job of layout and image rendering at very reasonable performance.]

ACID3 & Modernizr

First up was ACID3. ACID3 is a wide ranging standards test suite that checks DOM, HTML4, CSS and a whole host of other capabilities. Webkit based browsers have been shipping with a score of 100/100 for about a year now, so the result here would tell us how recently the BlackBerry team took their branch of Webkit. And the result is: 100/100. The Torch browser is running a modern Webkit browser. Nice!

Next up, Modernizr. Modernizr is a Javascript library written by Faruk Ates and Paul Irish that checks feature availability of a wide range of HTML5ish features: among other things, localStorage, WebSQL, and HTML5 drag&drop. And the result is… again consistent with a very modern Webkit browser. Just a few minor features missing like some HTML5 input types and indexedDB, but all the big ones are there: geolocation, localstorage, HTML5 video & audio etc. Excellent!

Performance Testing

So now that we know the Torch has a first class browser, let’s press the accelerator pedal and see how well the browser does at Javascript benchmarks and real world speed tests. The SunSpider benchmark was a reasonable place to start. We did a casual comparative benchmark of the Torch vs. a gauntlet of other mobile phones. By no means scientific (we had to keep tapping the Torch to stop it from sleeping), we think SunSpider provides reasonable order of magnitude results that exercise the Javascript engine, the GPU and the CPU. We chose the iPhone 3G, 3GS, 4 – all running version 4.0 of the OS, a Samsung Android running version 2.1, and the Nexus One running Android 2.2 as our comparison suite. Selected results are below. Basically, the Torch is in the 3GS/Android 2.1 range when it comes to general performance. We’d summarize it as “good at text processing, bad at Math.” Since a lot of graphics capabilities use Math, we were wondering what that implied for graphics… so, onward!

Results of SunSpider test versus other leading smartphones. (Smaller is better.)

From here, we tested a variety of graphics capabilities from the very basic to the more advanced.

Basic CSS Animation performance was the first thing we checked. We used our own CSS3 vs. Flash ads page. The Torch supported the animations smoothly. (We weren’t intending to see if the Torch supported Flash, but as a side effect of this test we can say “No”, since the Flash ads didn’t load). Nice! Ok, on to a more stressful test – the Spiderman CSS3 movie. And urg… we saw the first page for about 15 seconds, then a few frames per second of content about half way through the animation, then the end page. So, we should cross off complex CSS3 animations from our support list.

After CSS, we wanted to test SVG performance, so we headed off to our favorite SVG library demo page. First up, static SVG. We checked out the tiger demo. Result: perfect rendering. Check! Next, a slightly more challenging dynamic pie chart. It’s a little sluggish, but still provides a reasonable experience. Our final test is the highly dynamic polar clock. Only the latest generation of iPhone and Android have the processor power to push this, so we’re crossing our fingers here… and no luck. The SVG animation tears and the text div flickers in and out.

Next up is Canvas. Canvas is a performance hog so we’re not holding our breath on this one. First up, a basic Canvas app from Opera for drawing lines and squares. Check. Works fine. Next, a github network graph in Canvas. Since it’s static Canvas, we’re hoping it will render. Unfortunately after a two minute wait, the graph still won’t load. Just for fun, we decide to see if a stressful Canvas color-cycling demo will run. And as expected, the answer is no.

The last test: HTML5 Video & Audio. The short answer: audio good, video bad. In fact, we couldn’t find a single Video example that worked. Perhaps it was a lack of the right codec (although the native YouTube player worked just fine.)

Sencha Touch Kitchen Sink

Onward to the topic closest to our hearts, our Kitchen Sink demo. As we walk through, we’re extremely excited! Thanks to the Webkit browser inside, the Torch does a great job rendering the UI. Not that everything’s perfect. The Torch seems to have performance difficulties combining CSS translations (which we use for list scrolling) with more advanced CSS effects like gradients and drop shadows. And our overlay menus seem temperamental. When we do our BlackBerry theme, we’ll need to explore using flat colors and go easy on advanced styling for optimal performance. There are also a few other areas of sluggish performance that will need optimization before we ship, but overall we’re completely stoked. With appropriate performance optimization, the Torch looks like a solid platform for Sencha Touch.

The BlackBerry Torch: Suggestions for HTML5 App Developer

After playing around with the Torch for a day or so, here are our initial suggestions for HTML5 developers targeting the platform:

1. You don’t have to worry about feature availability, the Torch has everything that a developer expects from a modern HTML5 browser. You can add Torch to the elite band of Chrome and Safari as the developer’s dream browser.
2. You don’t have to worry about performance if you’re simply presenting content, as long as you stay away from using Canvas. (If you need drawing capability, stick with SVG.) Unfortunately, this means that you’ll need to do SVG for BlackBerry and Canvas for Android, since Android (maddeningly) still doesn’t have SVG support.
3. You do have to focus on performance tuning for dynamic content and when building true applications. Here, stick to simple CSS styling and watch your use of dynamic CSS capabilities. Some work fine (aka simple CSS Animations), but the more advanced capabilities will have performance quirks.
4. And yes, don’t try to do heavy Math!

All in all, the BlackBerry Torch is an awesome advance in the BlackBerry browser. It provides a solid, lower-range HTML5 development platform, and developers should add it to the list of mobile devices that they test against and support. We are.