Sencha Inc. | HTML5 Apps

Blog

iPad 2: The HTML5 Developer Scorecard

March 12, 2011 | Aditya Bansod

If you remember back to last week, in our review of the Motorola Xoom browser, 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 the Xoom. We knew from our experience that iOS provides a great modern browsing platform, so we had high hopes that with the iPad 2 it would get even better.

Apple truly delivers a top rate, no compromises HTML5 browser.”

We got our hands on an iPad 2 and ran it through our standard HTML5 tests. The iPad 2, like the first-gen iPad doesn't disappoint. It's fast, it's accurate and it's impressive. Apple truly delivers a top rate, no compromises HTML5 browser. 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 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, and our own Sencha Animator demos and our Sencha Touch Kitchen Sink.

iPad 2 Acid3 Results

Acid3 and Modernizr

The iPad 2, like the iPad first-generation, scores a 100/100 on the Acid3 tests. But we did find a few small rendering issues. If you look carefully at the image, you'll notice a few light red squares in the top right and in the bottom right of the test results. In the Acid3 reference results, the edges of the test area do not have any of those glitches. Without a doubt, the iPad 2's Acid3 results are solid, but it would have been nice to see this come up to full compliance.

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. Modernizr reported that nearly all the major browser features are supported on the iPad 2. Modernizr found support for SVG, CSS 2D transforms, CSS 3D transforms, CSS transitions, WebGL and Web Sockets. Interestingly enough, Modernizer reported that there was no Inline SVG although we were able to try a few demo sites and saw that it did in fact work, and it also reported that the browser supports WebGL, which we couldn't get to work. (Update: the working inline SVG examples were in XHTML pages, not plain HTML pages, so Modernizr was actually correct about iPad2 still not supporting inline SVG for HTML pages). As we found in our earlier scorecards, just because a browser says something is there, it doesn't mean it works. All the other HTML5 features except the ones mentioned worked beautifully.

Performance Testing

Underneath all of the tablets we've tested has been the open-source WebKit browser engine. On the iPad 2, Apple has married WebKit with their Nitro JavaScript engine. The browser reports that it's using WebKit version 533.17.9, which is a very recent build. Under the hood, the iPad 2 contains Apple's dual-core ARM processor, specifically the Apple A5. This class of processor is the same range and generation of the CPUs that power most tablets that are coming to market now so we expected SunSpider results in the same range as we saw on the Xoom. In our testing the iPad 2 landed right where we expected it. We don't anticipate JavaScript developers to be disappointed at all with the performance coming from Nitro. Interestingly enough, we've heard that the Nitro engine is disabled in UIWebView, which means hybrid apps won't get all the benefits of the new JavaScript engine.

iPad 2 SunSpider

The SunSpider tests are synthetic tests that push the JavaScript engine to its limit. As with last time, 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 iPad's Mobile Safari browser has the best CSS3 support of any mobile browser we've seen. We tested six demos that were made with Sencha Animator and they worked beautifully. All the frames were rendered, and the frames were rendered accurately and in full fidelity. Given the stuggles we had with complex animations on other devices, we're excited to see the iPad 2 hold the bar high and deliver a truly great CSS3 implementation. We also ran through our CSS3 vs Flash ads page and of course the Flash version of the ads didn't render, but the CSS3 ads worked perfectly well. The iPad 2 nails CSS3.

We also tested a few other real world areas for performance and correctness. First off, we tried a github network graph. Rendering performance is fine and rendering is accurate. We ran into issues with trying to move the graph around as the browser was often confused on drag events. Instead of panning the graph, it often panned the entire page. This looks 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've tested. We also tried Canvas Cycle and it was amazing. The framerate was high, the UI controls were responsive and the scene updates quickly. We thought this time we'd also try some more intense Canvas apps, so we tested Canvas Rider, a game made with Canvas and did a few of the ghost runs on the iPad 2. While it wasn't quite as fast as a desktop, it didn't have any issues being usable. Canvas support on the iPad 2 is first rate.

Finally we tested embedded HTML5 audio and video. Again, the iPad 2 nails it. Audio plays back quickly and lets you pause and resume. Video comes up quickly and streams without issue in the browser page. The iPad 2's media support is solid.

Sencha Touch Kitchen Sink

Given that the iPad 2 has tested to be the best mobile browser we've seen yet, as you'd expect the Sencha Touch Kitchen Sink works quite well. Animations were snappy, lists scrolled quickly and everything just worked. Sencha Touch relies on high performance CSS3 and as our CSS3 testing earlier showed, the iPad 2 performs well in the pure CSS3 tests as well as in our Kitchen Sink.

iPad 2: Suggestions for the HTML5 App Developer

The iPad 2's Mobile Safari browser is the best implementation of WebKit on a mobile device. In our testing we tried to throw everything we could at the browser and it had no issues keeping up with the most advanced HTML5 and CSS3 sites. For any developer building for the mobile web, the iPad 2 provides an outstanding platform from which you can use modern browser features.

In our testing we did have a few snafus, like the minor Acid3 rendering artifacts. As we look forward to the future of the iOS platform, we would love to have support for the Media Capture APIs. We also can't understand why Nitro is disabled in UIWebView. Nitro delivers huge improvements for JavaScript performance and UIWebView is commonly used to deliver the web to native apps. We hope Apple enables it soon.

Apple's devices are leading the vanguard of mobile browser innovation and for the HTML5 app developer this is great news. We're excited to see not only the rate at which Apple adds new features, but the quality of their implementation.

There are 33 responses. Add yours.

Henry

4 years ago

Great write-up!  Sencha is becoming the best destination to get the facts on the state of html5 on phones, tablets, and desktop browsers.  Looks like Apple is smoking the competition, and android is far behind.  Is there hope for RIM or MS?

Saad Salman

4 years ago

Awesome! Video demonstration would be nice.

kl

4 years ago

It’s a shame that HTML5 apps are not using new Nitro engine and work only at fraction of possible speed. It’s tempting to make conspiracy theory about crippling AppStore competition…

Trey Copeland

4 years ago

Good read!

Jay Robinson

4 years ago

Henry, look forward to our coverage of some RIM devices soon.

Saad, great idea. We’ll definitely look into this for next time!

Mats

4 years ago

Nice review, agree with the comment about a video. How about something like the “Will it blend?” series? smile

Aditya Bansod

4 years ago

@Kl - my hope is that it’s just a bug that gets fixed in a dot release soon.

Jacob

4 years ago

Why is it that there is such a discrepancy between IOS and Android browser functionality/performance, if they are both running WebKit and similar hardware? Doesn’t WebKit implement all the rendering?

Ariya Hidayat

4 years ago

@Jacob: The short answer is as follows. WebKit is the engine dealing with logic of parsing, DOM, CSS, SVG, etc, the underlying platform still needs to provide the actual mechanism to draw something, get the data via the network, fire on and off timer, manage memory chunks, obtain user location, etc.

An analog: even if two cars are using the same combustion engine, their on-the-road performance might be different. There are still few important factors that sit between an engine and the user (or passenger) experience.

Vishal Kumar Singh

4 years ago

Thanks a lot Ariya for the explanation.
Thanks SenchaInc for the review

Michael

4 years ago

having a hard time getting excited about HTML5 - so many different browsers out there that support different levels or none of it.. its starting to look like coding for different versions of IE all over again.

Rvanlaak

4 years ago

I also love the Sencha blogs, because of articles like these. It exactly is what the Sencha dev wants to know about the current platforms in my opinion.

Okay, the iPad2 is the focus in this case, so what I’d like to know is what a beginning Sencha dev should do to create its perfect development environment. Buy an iPad2? wink

alYsa

4 years ago

HTML5 is getting closer to being a real replacement for Microsoft Word (HTML after all is a document language).
If everyone is trying to make apps in HTML, why noone is trying to make apps in Word? I bet it would be easier to make a game in Word smile
Probably people still don’t get that HTML was never intended to be an application platform and glueing all these new extensions on top of ugly DOM is quite counter productive. It would be better if W3C would start working on something that would become a new app platform for a cloud-web. Until then, development on the web is becoming more and more ridiculous…

indicizzazione motori ricerca

4 years ago

It would be super when Nitro would be enabled for better JS performances . Please Apple enables it soon smile)

MS

4 years ago

Is it possible to add FireFox on Android to your benchmarks?

http://www.mozilla.com/en-US/mobile/

J

4 years ago

Can you add in the bargraph for which supports Flash? That would be great, thanks.

Michael Mullany

4 years ago

@alYsa - your history needs to be updated. HTML5 was started by the WHATWG as an explicit effort to improve the web browser as an application platform - in reaction to the lack of progress in the W3C on these technologies
http://www.whatwg.org/news/start

alYsa

4 years ago

@Michael Mullany
That’s OK, hopefully WHATWG is faster than W3C, but the problem is that the core is rotten (HTML, DOM) and they are just gluing crap around it…They should start from the scratch…

alYsa

4 years ago

@Michael Mullany
Take a look at the latest article in the blog “Sencha Touch: Optimizing Memory Usage”.
Developers have to do too many workarounds and hacks - this should be handled by the runtime.
Browser is not an OS, and I hope it will never be, otherwise it will be like developing a C++ windows application and having all the hacks done so it would run on Linux, Mac, iOS and Android…
If someone masters HTML5, does not mean they are smart or using the right tools for the right job smile

Bill Smith

4 years ago

Please check the data for the graph. It appears the Moto Xoom scored the exact same number on every test. I think it more likely that there was a data entry error in generating the graph.

Michael Mullany

4 years ago

@ Bill - the Xoom result is always 1.00 - performance for the others is relative to the Xoom.

Rodrick @ same day courier

4 years ago

Amazing post Aditya though agree with john to see video demonstration! Great to know about HTML5 browser. I not work with HTML5 yet, but looking forward for your iPad2. When it going to release?

Peter Hansen

4 years ago

Nice article, but you’d promised (after the Xoom HTML5 post) one “next week” showing the “awesomeness” of the PlayBook browser.  Did someone ask you not to post it yet?  Where is it?

Michael Mullany

4 years ago

Peter - RIM asked us to hold off on a detailed review until they ship the Playbook, so we did :-|

prekybos iranga

4 years ago

IPad’s have so much problems with flash, so no wonder, that html 5 is one of possible solutions.

jmmx

4 years ago

Well done!! I am impressed!

It would be nice to see more side by side comparisons with other products so that it would be easy to compare.

Thanks again.

Hamranhansenhansen

3 years ago

> It’s a shame that HTML5 apps are not using new Nitro engine and work only
> at fraction of possible speed. It’s tempting to make conspiracy theory
> about crippling AppStore competition…

Many App Store apps also have Web views, same as HTML5 apps, and also lack access to the Nitro engine, same as HTML5 apps. So your conspiracy theory would be ludicrously wrong. It’s not HTML5 apps that are being excluded from Nitro, it is 3rd party apps. Likely because of the JIT compiler. But maybe because they just didn’t get it done yet.

Maybe we should wait until someone — anyone — creates a better HTML5 app environment than Apple before theorizing that Apple is sabotaging HTML5? Why would App Store need to cheat, anyway?

bisnis

3 years ago

Nice review and best product.
Video demo would be nice.

Gabriel

3 years ago

Thanks for this post!

Paul Irish

3 years ago

You mentioned that Modernizr was giving you a false negative for inline SVG.

I have a little test page for SVG inline with HTML here: http://paulirish.com/demo/inline-svg
And it is seemingly failing on iPad2..

I think you might have been testing SVG inline in XHTML, which is a different story. smile

Michael Mullany Sencha Employee

3 years ago

Hi Paul - you’re right on that. I checked the test pages we were using and they were XHTML not HTML5. I’ll put an update in the blog post to clarify.

Raki

3 years ago

Every thing is fine. But iPad2 is not supporting all the features of canvas as well as video tags. It is unable to display the video tag instance as image in canvas…....

Prekybine iranga

3 years ago

IPad2 - very good product.

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

Commenting is not available in this channel entry.