BlackBerry PlayBook: The HTML5 Developer Scorecard
In the last few months, we've evaluated the growing selection of tablets, starting with our reviews of the Galaxy Tab, the Motorola Xoom and the iPad 2. This week we find ourselves with RIM’s entry, the BlackBerry PlayBook. With a PlayBook in hand what else did we do but run it through our HTML5 Developer Scorecard.
If you remember back to our Motorola Xoom post, we were less than excited about the quality of the Xoom as a modern web app platform. Our experience to date with Android has been lackluster, starting with the disappointing browser in the Galaxy Tab, and only a minor set of improvements for the (Honeycomb-equipped) Xoom. We hoped that the new BlackBerry Tablet OS would be a pleasant surprise.
“The PlayBook’s browser stands on its own as a truly modern mobile browser.”
We put our BlackBerry PlayBook through the gauntlet, and while it is occasionally rough around the edges, it’s pretty awesome. The PlayBook has an advanced HTML5 mobile browser and it stands up to the best of its competition as a great web app platform. Read on for the full test results.
Our First Look “Methodology”
Acid3 and Modernizr
The PlayBook, like a few of the tablets before it, scores a perfect 100/100 on the Acid3 tests. The thing which sets it apart from any tablet we've seen before is that it also nails the rendering perfectly. It’s the first mobile browser we've seen render the Acid3 tests without artifacts, rendering glitches, or missing drop shadows. The first perfect mobile results. We were impressed.
We then turned to Modernizr, one of our favorite tools to look under the hood of a browser and let us know what HTML5 features it supports. We were pleasantly surprised to find that Modernizr reported that nearly all the major HTML5 features are supported on the PlayBook. Modernizr found support for SVG, Inline SVG, CSS 2D transforms, CSS 3D transforms, CSS transitions, Web Workers and Web Sockets. In fact the only major HTML5 feature area the PlayBook is missing is WebGL - which today ships only on desktop browsers Firefox 4 and Chrome 10. It's a more complete list than any other mobile browser.
However, as we found in our earlier scorecards, just because a browser says something is there, it doesn’t mean it always works. While the PlayBook reports that it supports font-face, some web font services, like Typekit don't recognize the PlayBook user agent yet.
Without a doubt, the PlayBook browser has the best CSS3 support next to the iPad 2. We tested six demos that were made with Animator and they rocked. The animations worked beautifully. All the frames were rendered, and the frames were rendered accurately and in full fidelity. We're excited to see this level of commitment from RIM to not only support the newer standards but implement them well. The level of performance from these complex CSS3 animations left us thinking that RIM has successfully hardware accelerated CSS animation.
We also tested a few other real world areas for performance and correctness. First off, we tried a Canvas based GitHub network graph. Rendering performance is fine and rendering is accurate. We ran into issues moving the graph around as the browser was often confused about drag events. Instead of panning the graph, it often panned the entire page. This seems to be a trend in the way click/drag events are handled for Canvas objects in WebKit browsers as we've seen it on all tablets. We also tried out Canvas Cycle and it worked reasonably well. The framerate was good and we were able to change the scene without issue. Seeing how well the browser was going, we threw some more dynamic canvas animations at it and it worked at fairly reasonable frame-rates.
Next up, SVG! We tested Raphael JS demos for both static and dynamic SVG and were pleasantly greeted with very smooth SVG animations. It looks like RIM has done the work to make vector graphics high performance on the device. Many SMIL animations are also working well with good frame-rates including motion along a path for SVG shapes and text. In addition, the Playbook passes almost all the W3C SVG 1.1 test-suite. For those SVG folks who have been waiting to get their hands on a great mobile app platform for SVG. It's here!
Finally we tested embedded HTML5 audio and video. We were able to get both HTML5 audio and video working, including having video go full screen from within a web app. At times it was a bit difficult to hit the pause button, but without a doubt the functionality is all there.
Our Kitchen Sink app is built with Sencha Touch that tests all the features of Sencha Touch, our mobile web app framework. The Kitchen Sink gives mobile browsers a good workout as it exercises a huge set of browser features. As you might expect given the previous tests, the PlayBook performed well and responsiveness was reasonably snappy. We were impressed with the performance of the various transitions which gave more proof points that CSS3 is well optimized on the PlayBook.
However, at times we did observe some rendering glitches. For example, in a couple of instances we saw text ghosting and items double-rendered. We also noticed that the PlayBook forgot the border-radius of elements and drew a square corner where there should have been a rounded one.
BlackBerry PlayBook: Suggestions for the HTML5 App Developer
Overall the BlackBerry PlayBook browser is a great implementation of WebKit on mobile. We found that we had no trouble using it to access most websites and when we put it through a bevy of HTML5/CSS3 tests the results were highly positive. For any developer building for the mobile web, the PlayBook provide a great technical platform on which to build rich experiences using HTML5 and CSS3. The only downside was that we experienced a number of browser crashes during our testing - even when we were not stressing anything bleeding edge. But since we tested without the final update from RIM, perhaps these stability issues have been addressed.
In general, we were impressed with the RIM PlayBook and we're excited to have another high quality modern browser in the tablet market. From an HTML5 developer’s view point, the PlayBook’s is easily on par with the best mobile browser in the market.