Sencha Inc. | HTML5 Apps

Blog

HP TouchPad: The HTML5 Developer Scorecard

July 01, 2011 | Aditya Bansod

HP TouchPad: The HTML5 Developer Scorecard

It’s been a while since we’ve done an HTML5 browser scorecard so this week we bring you the latest entrant in to the tablet space, the HP TouchPad. The TouchPad is the first device to ship HP/Palm’s webOS 3, a reworking of the webOS that has previously been found on Palm’s smartphones, now shaped and built for tablets. webOS originally made a huge splash in the developer community, as the the entire operating system is based on HTML5 and modern web technologies—the well-known JavaScript server, Node.js, is part of the platform for instance.

“The TouchPad looks quite promising, but still seems rough around the edges.”



We spent some quality time with the TouchPad, running webOS 3.0.0 and putting it though our browser tests to see how well the WebKit implementation in the browser stood up as an HTML5 app platform. The results were very mixed. We found different behavior depending whether we used the browser directly or if we installed the app as a ‘native’ web app using webOS’ packaging capability. And while the browser has very mixed CSS3 and JavaScript results, it has the fastest Canvas implementation we’ve ever seen. Overall, the TouchPad looks quite promising, but it still seems like there is room for improvement from a web developer’s point of view.

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 a number of areas, namely JavaScript performance, HTML5/CSS3 features, rendering performance and rendering accuracy. To get there we use a variety of tests, including Modernizr, Acid3, SunSpider, our own Sencha Animator demos and our Sencha Touch Kitchen Sink.

TouchPad Acid3 Scores
The HP TouchPad did a less than stellar job rendering the Acid3 Test.

Acid3 and Modernizr

The Acid3 tests are a bit dated at this point, but still provide a fairly good indication of what the browser and developer experience on a particular device will be. The TouchPad scored 92/100 on the Acid3 tests. The failures are in bucket 5, and based on the fact that the browser attempted to download SVG files instead of render them for the test, it’s safe to assume that the low score is due to the lack of SVG support in the browser. Looking at the image further, you’ll notice two rendering artifacts. First, on the top left is the “You should not see this at all” message, and in the top right are a couple of squares. Given the relatively low Acid3 score on the device, these rendering glitches are not totally unexpected.

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. Since our last tests, Modernizr v2 has been released, so we used the test suite that Modernizr uses for our testing. The Modernizr suite failed after 241 tests were attempted (out of a total of 276). In these final, failing, tests, the Modernizr test results are compared against caniuse data, so it’s unclear if this is really a browser issue, or incorrect data used for the assertions.

(For comparison, the iPad scores a respectable 273, and a Honeycomb tablet scores 240. We believe low scores are often exacerbated by missing browser profiles in caniuse.)

Based on the Acid3 results, we knew that Modernizr would report that SVG isn’t supported and that’s in fact what emerged. There are a couple of other notable features lacking in the TouchPad’s browser. CSS 3D Transforms are not there, nor is there support for the HTML5 history API. Other than that, the TouchPad looks like most of the other tablets we’ve tested. We were happy to see that CSS animations were reported as supported.

We also like to take a look at the various device APIs that tablets support. The TouchPad has geolocation support, but webOS 3 continues to use a non-standard accelerometer API. When we tried to use the standard APIs, the device didn’t expose them in the global window namespace. We believe it would be very easy to write a polyfill to bridge these APIs, but for the moment the TouchPad continues to use a non-standard implementation.

Performance Testing

Like all other tablets, the TouchPad and webOS use WebKit as their core browser technology. However what’s unique about webOS is the whole operating system is built on web technology, so the entire UI is built using WebKit. The browser reports in its User-Agent string that it’s running WebKit version 534.6, which is a very recent build, too. On the hardware side, HP has married that core software platform with a 1.2GHz Qualcomm Snapdragon dual-core processor. This is an interesting choice of speed, since the Qualcomm data sheet lists the processor at 1.5GHz which implies they’ve under-clocked the CPU, possibly for reasons of battery life or heat emission.

At 1.2GHz, we expected the JavaScript engine on the TouchPad to be on par with any of the other recent browsers we’ve tested, so we were a bit surprised when we ran the SunSpider tests and saw the browser fell behind its competitors. The Motorola Xoom, the iPad 2 and the PlayBook are all within about 10% of each other. However, the TouchPad is on average 70% slower in terms of JavaScript execution as measured by SunSpider.

TouchPad SunSpider

We thought this was a little strange, so we decided to try another benchmark, this time applying the V8 Benchmark Suite, version 6. In this test, we couldn’t get the iPad 2 nor the TouchPad to actually complete the test, and only the Motorola Xoom finished it. Our running theory is that the scripts took so long to execute that the browser shut down script execution. Our TouchPad managed to get a bit further, finishing four out of the seven tests, and our iPad 2 (iOS 4.3) finished just two of the tests. In the end, these JavaScript tests were inconclusive. Running benchmarks always requires one to be a bit of a skeptic and in this case, we’re pretty sure that the JavaScript performance is “good enough”, just not world class.

TouchPad V8 Benchmark

The SunSpider and V8 tests are synthetic tests that push the JavaScript engine to its limit. As with other tablets, we then turned our attention to some more real world tests, looking at CSS3 performance on our own Sencha Animator demos as well as a few other targets.

“The TouchPad screams—it has the fastest Canvas implementation we’ve seen.”

Much like the JavaScript performance, CSS performance on the TouchPad is mixed. Many CSS animations and transitions worked quite well and smoothly when in predictable setups. Things started to slow down quite a bit when we started to zoom in to the animations or when transitions happened at non-90-degree angles. Frame rates that were otherwise quite good then dropped quite quickly and stuttered. We tested six of our standard demos and our latest Rocking the Boat of Flash tutorial demo. These demos tend to be very good at pushing browsers’ CSS support to the extreme, applying styles in more challenging ways than on regular web sites. On the TouchPad, in some specific cases, the border-radius was dropped, and then randomly reapplied (e.g the electrons in the Ionic Bonding demo), and in other cases, effects were simply dropped (e.g. the steam at the end of the Healthy Choice demo). We conclude that the TouchPad browser has serious issues rending more complex and sophisticated CSS.

We also tested a few other real world HTML5 apps for performance and correctness. First off, we tried a github network graph. Rendering performance is fine and accurate. We had heard good things about the Canvas support so we decided to push the browser further. So, we tried some of the Microsoft mobile performance tests to stress canvas. Here the TouchPad screams—it has the fastest Canvas implementation we’ve seen thus far. For example, on the Mobile Speed Reading test, the TouchPad gets 16 FPS (PlayBook gets 10 FPS, iPad 2 gets 3 FPS, and the Xoom fails to load the test). Even more impressive is the Fish Tank demo, where the TouchPad hovers around 25 FPS. Canvas performance is stellar.

We noticed that during the Speed Reading tests, the browser opened up a separate window to play the audio in that test, so we were a bit suspicious when we moved on to our audio and video tests. And yes, it turns out when you try to use the audio tag, the device opens up a new window and doesn’t play the audio inline to the page. Sadly, the same thing happened with video. In the page, we managed to get a big play button, but clicking on the button launched a new window with a dedicated video player. It looks like the TouchPad browser is incapable of playing HTML5 audio and video inline.

Sencha Touch running on an HP TouchPad running webOS
HP TouchPad webOS 3

Sencha Touch Kitchen Sink

Given the mixed bag of CSS3 support and the iffy JavaScript performance, we weren’t quite sure what to expect with the Sencha Touch Kitchen Sink. We found that Sencha Touch renders fine but it appears that webkit-mask is not supported, so many of the buttons have the wrong clipping. As a developer, there are ways to work around that such as through the use of background images, but we hope the webOS team adds in support for masks soon.

One of the more interesting things that we found is that while running our Kitchen Sink through the browser, the app had decent speed and decent performance, but we had issues with scrolling and touch events. The browser captured swipes as viewport pan gestures and does not pass them through to the application, so swiping your finger to scroll lists caused the whole window to move. However, when we packaged a Sencha Touch app into an IPK (webOS’ packaging format) with the Palm developer tools, and ran the app in a native shell, the overall performance was significantly better, and the swipe gestures were detectable by the application. For now, this remains the most satisfactory way to deploy and run web apps on this device.

HP TouchPad and webOS 3: Suggestions for the HTML5 App Developer

The TouchPad shows a lot of promise as a HTML5 development platform. With web technologies at its core, the possibly of using JavaScript, HTML5 and CSS3 to build apps for the TouchPad is great for app developers everywhere. As we noted earlier, the fact that a web app when packaged as a IPK runs well leads us to believe that the core software stack is very capable, but that the browser itself can still be improved.

Specifically for the HTML5 app developer, here are a few things to look out for when building for the TouchPad. Avoid SVG — not only is it not supported, when the browser encounters it, it does strange things. The same goes for audio and video. The browser attempts to download files it doesn’t recognize or isn’t able to handle and passes it off to another app. We’re sure HP will fix this in an update, but it’s best to avoid it right now. Lastly, be wary of complex CSS transitions and animations. At certain zoom states, or when combined with other CSS effects, the results are unpredictable.

We’re excited to have a new entrant in to the tablet space, and based on our testing, we think the TouchPad is off to a good start. There’s a way to go, and the browser is rough around the edges, but there’s definitely a lot of potential in the webOS platform, and we look forward to future updates.

There are 14 responses. Add yours.

Alex

3 years ago

This device is DOA.  If you can’t beat the iPad, no one is going to bother.  You’re just going to get reviews like this. There is no reason that I read which makes me want to get a touchpad.  HP, if you’re listening, your browser stinks, Sencha is just being nice.  You’re marketing your tablet as a web operating system for goodness sake!  Please for the sake of competition get with the program and give apple a run for the money.

Jose Ayerdis

3 years ago

@Alex way to troll i think that HP TouchPad is fairly good, they are starting to get their hand on that field lets wait what happen

Rahim Dobani

3 years ago

I have been obsessed with the Ipad. The only way I would try this is at Bestbuy’s display and that’s it. Sorry HP bu tI have had bad exps with your devices and PDAs

Kai Sellgren

3 years ago

Does it support scrollable elements/divs? Is that one- or two-finger scrolling? Smooth?

What about position fixed? What kinds of touch events does the engine support?

Thanks for the information!

Corey Menscher

3 years ago

fantastic analysis! Thank you. I’m writing this on a TP right now. It’s definitely buggy overall, but webos 3 has some REALLY nice touches. I own a Pre 2, and love webos, but the TP definitely isn’t for everyone right now.

The browser doesn’t support fixed position, and it is a tad slow for some js heavy sites like google apps. But it performs better than my ipad on many sites, such as facebook. Being able to watch inline flash youtube vids is great…but i guess I haven’t encountered html5 media tags yet. Also, the scrolling of pages is not especially smooth, and I really miss the ipad’s “locking” the scroll to columns while scrolling zoomed in,

it does seem to handle scrolling areas better than the ipad (two fingers are never needed) but some areas don’t move at all…like Google maps. This makes me sad.

i’m disappointed in many of your findings, I can only hope HP improves things with an update.

Mounaam

3 years ago

Hi,
no one has noted the mistake/contradiction between the v8 benchmark suite v6 and its conclusion.
You wrote:
> Our iPad 2 (iOS 4.3) managed to get a bit further, finishing four out of the seven tests,
> and the TouchPad finished just two of the tests.

But the picture show the opposite: only two tests finished for iPad and 4 tests for Touchpad.

Even if the HP Touchpad must suffer from some weaknesses of youth, I think the choice of HP for a more open development model than Apple for those who wish, will (I hope) in some years make the difference

Aditya Bansod Sencha Employee

3 years ago

@Mounaam—this for finding the mistake, it’s been updated. The chart had the correct data, so I’ve fixed the body text.

Getrud Islenmanheimer

3 years ago

Thank Sencha Blog for your scorecards! I was undecided regarding a hackaton taking place next week, but I think I’ll go and try to get some answers as to how best iron out problems when developing using Sencha Touch.

Steven J

3 years ago

Do you have the figures for the TouchPad vs the iPad 1? If what Apple is claiming is true, that the iPad 2 is twice as fast and the iPad 1, shouldn’t the Touchpad then be better than the iPad 1?

I was hoping that HP would have stepped up their game and delivered something that could be pit up againts the iPad.

David Kaneda

3 years ago

Great review!

Jamie Avins

3 years ago

Thanks Aditya!

sam

3 years ago

Does anyone know if the contenteditable attribute set works as intended on the HP Web OS Tablet?

vettivong

3 years ago

I used this version much better.
Thanks for the information very well.

Dan Boyle

3 years ago

@Alex - The tablet market is big bucks. HP can cash-in without attempting to top Apple. Their goal is not going to be a direct competition with the iPad but to pick up the lower-hanging fruit.

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

Commenting is not available in this channel entry.