Sencha Inc. | HTML5 Apps

Blog

BlackBerry PlayBook: The HTML5 Developer Scorecard

April 19, 2011 | Aditya Bansod

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”

Our HTML5 scorecard consists of a series of tests aimed to help mobile web developers understand new devices and new form factors as they come to market. We test in an number of areas, namely JavaScript performance, HTML5/CSS3 features, rendering performance and rendering accuracy. To get there we use a variety of tests, including Modernizer, Acid3, SunSpider, and Sencha’s own Sencha Animator demos and our Sencha Touch Kitchen Sink.

PlayBook Acid3 Results

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.

Performance Testing

The PlayBook browser is based on the same WebKit core that powers the iOS' Mobile Safari as well as the Android Browser. The browser reports that it’s using WebKit version 534.8, which is slightly older than the WebKit found on the Xoom but newer than iOS 4.3, so quite recent. Under the hood, the PlayBook contains a dual-core ARM processor, specifically the TI OMAP 4430. This class of processor is the same CPU range and generation that powers today’s other tablets so we expected SunSpider results in the same range as the Xoom and the iPad 2. This generation of tablets ships with dual-core processors and they all have roughly the same JavaScript optimizations. While one browser may be +5% in one category and -5% in another category, from our testing it’s a wash: all the browsers’ JavaScript engines are now in the same ballpark.

PlayBook Sunspider Results

The SunSpider tests are synthetic tests that push the JavaScript engine to its limit. So, next we turned our attention to some more real world tests, looking at CSS3 performance using our own Sencha Animator demos as well as a few other tests.

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.

Sencha Touch Kitchen Sink on BlackBerry PlayBook Sencha Touch Kitchen Sink

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.

There are 26 responses. Add yours.

Vali

4 years ago

there’s a small typo: “It&rsquos; here!”

Andrea Cammarata

4 years ago

Thank you for all the provided informations.
I’m really curious to make some canvas rendering test.

Remoorejr

4 years ago

Nice to hear that RIM put so much effort into HTML5 / CSS3 support.

Apple has set a very high standard that nobody else seems to have come even close to. Microsoft and Google should be ashamed of their current mobile browsers.

It sounds like the RIM development team got it right.

Congrats to the RIM team.

bigfish

4 years ago

Does it support true multitouch—multiple simultaneous touches? And if so, is the API the same as for the iPad (touches, changedTouches, etc)

Aditya Bansod Sencha Employee

4 years ago

@Vali—thanks, fixed.

Michael Mullany Sencha Employee

4 years ago

@bigfish - yes, true multi-touch is in there. All you get from any of the browsers is touchstart, touchmove, touchend. Are you thinking of native touch events?

Michael Mullany Sencha Employee

4 years ago

@andrea - if you want to write a test, I can run it and send you a video.

bigfish

4 years ago

The event which is given to the handlers for the touch events have a ‘touches’ and ‘changedTouches’ properties.  changedTouches will just have one item in it (the touch which fired the event) while the touches should have all the current touches. On the iPad you get access to all of the active touch event objects, but on Android it seems the touches array always has a length of 1 (the one which fired the event). Moreover, on Android (tested on my Nexus One running Gingerbread), it seems that you cannot get another touchstart if the use is already touching the surface elsewhere.

Michael Mullany

4 years ago

@bigfish - yes, you get a proper array of touches. eg. from http://openlayers.org/dev/examples/multitouch.html
evt.touches.length is reported properly on Playbook. Playbook will detect up to 4 touches - it doesn’t detect a fifth.

I should note that Android Honeycomb does detect multiple touches correctly on the same test page - all the way up to ten. (Yes, I tested an eleventh touch using my nose)

bigfish

4 years ago

Good to know, thanks!

Gary

4 years ago

Is there a compelling reason to buy this over an iPad2?

Paul Ellis

4 years ago

How about the Samsung one?
I heard it’s great one with low price.

Paul Ellis

remoorejr

4 years ago

Gary .. great question and one that every company entering this space needs to focus on. (Or at least their shareholders should be asking!) That said .. no one is going to be able to compete without jumping into the pool so I really applaud those that at least try, but I’m sure glad I’m not funding the effort.  Ah ..  It’s so easy to be a critic!

I’m going to pick up a Playbook (my first tablet other than an iPad) just to make sure the software we’re working on (mobile app development : HTML5/CSS3/JavaScript) runs as well as I think it can on this device. All of the other tablets I’ve tried .. Motorola Xoom and Samsung Galaxy have been a disappointment because of poor browser HTML5/CSS3 implementations.

Will it replace my iPad .. I seriously doubt it. Apple has set a very high bar that will be tough to meet and exceed.

Johnny Carter

3 years ago

Are there workarounds for the CSS glitches like the masking errors (search field, arrow in the pull-to-update plugin, etc.)?

Nenad Ristic

3 years ago

Thanks for a good overview of the HTML5 support on the PlayBook… Now I am really looking forward to receiving mine!

Michael Mullany

3 years ago

@Johnny - we have to do a 1.1 update with some more workarounds for these glitches.

Johnny Carter

3 years ago

Great news!
Is it worth documenting these glitches with you or RIM? I’ve noticed that they release frequent updates, but I’m not sure if they’re working on fixing visual problems with the browser.

Johnny Carter

3 years ago

@Used car search - Hahahaha! Nice try wink

unlocking blackberry

3 years ago

Great Job by RIM, I have first hand experience of Blackberry Playbook and it’s really cool.

Johnny Carter

3 years ago

Cool until you start using gradient in lists :D

suresh

3 years ago

My question is just out of the Conversation that If we cant get Native Code ( ie. COD) by Using Sencha Touch then What is Benefit of Using it Because Browser is not Always appropriate and Comfortable .
So Rim must decide to go for launching tools for Generating Cod files from Sencha touch Browser based Project. Other Wise for the initiative Steps I congrats to Rim.

Allie McBill

3 years ago

The latest PlayBook OS update fixes a lot of issues. Maybe it’s time for a scorecard update? wink

Michael Mullany Sencha Employee

3 years ago

Allie - it’s probably time for an omnibus update - but we’d like to wait for Android ice cream sandwich before it all happens

Allie McBill

3 years ago

Good thinking smile

Blackberry Developer

3 years ago

we are looking forward to work on blackberry playbook

lala

3 years ago

is there any iPad games on playbook? like ‘fruit ninja’ or ‘angry honey’ or even ‘cooking mama’....

Comments are Gravatar enabled. Your email address will not be shown.

Commenting is not available in this channel entry.