Sencha Inc. | HTML5 Apps

Blog

Apple iOS 5: HTML5 Developer Scorecard

November 04, 2011 | Aditya Bansod

Apple iPhone 4S with Sencha logo Whenever a new device or mobile operating system comes out, we do our HTML5 Developer Scorecard to help folks who are building mobile web apps understand how to take advantage of these new devices. In early October, iOS 5 (and the iPhone 4S) was released. In our last few reviews, iOS has come head and shoulders above other device platforms as the best platform for HTML5 developers. High performance, hardware accelerated rendering, super quick JavaScript, and speed of adoption of new HTML5 features, it’s been the best platform to build modern web apps on.

Mobile Safari continues to hold the crown as the best mobile browser, providing the best HTML5 developer platform.”

The latest Mobile Safari on iOS 5 continues in that tradition. Mobile Safari continues to hold the crown as the best mobile browser, providing the best HTML5 developer platform as well as adding new features and improving others.

As usual, we looked at the basics of the browser: JavaScript and HTML/CSS rendering. For raw JavaScript execution speed, iOS 5 (with the iPhone 4S) isn’t much of a surprise and looks a lot like any other dual-core mobile device (such as the PlayBook and the iPad 2). It scored 2,275ms on the SunSpider benchmark: a solid score, but nothing new in the current hardware landscape. Things that iOS was good at continued to be good, such as smooth and fast hardware accelerated CSS3 transitions and animations. Our typical Sencha Animator tests ran smoothly and continued to render at a higher frame-rate than any other mobile device we’ve seen.

Given how good Mobile Safari has been, we didn’t run the browser through the usual paces we would have. Instead for this HTML5 Developer Scorecard, we took a look at the things that are new or better on the latest Mobile Safari:

  • Canvas is crazy fast. In iOS 5, Canvas is between 5x – 8x faster. We tried two examples to see this work. First, the IE HTML5 Speed Reading Test. In iOS 4.x, the draw durations last roughly ~850ms, versus iOS 5, where they are a constant 10ms. Since that might be too synthetic, we also tried the Flash Canvas image manipulation benchmark. It reports the number of milliseconds the manipulation sequence takes. On iOS 4.x, this was ~19,000ms, but on iOS 5 it reported ~450ms. As with all benchmarks, take the result with a grain of salt, but for game developers building on Canvas, iOS 5 is a much more attractive platform for graphics.
  • WebGL logoWebGL is supported. Sort of. If you’re an iAd developer, you can use WebGL in your ads, but you can’t use it through Mobile Safari or through a wrapped UIWebView. This is a limitation put in place intentionally by Apple as it’s possible to work around the restriction in a wrapped UIWebView, but only by linking to private APIs — which means you can’t submit the resulting app to the app store.
  • You can use compass directions! The DeviceOrientationEvent now supports compass headings via a new webkitCompassHeading property. The property gives you the device’s orientation relative to magnetic north. Check out James’ sample on your iOS 5 device to see it working.
  • Better CSS position and overflow support. In iOS 5, position: fixed and overflow: scroll both work. If you’re looking to add some scrollable areas with native feeling bounce, you can now do it with these CSS properties. You don’t get a ton of control but if you’re looking to have a scrollable area in your web app, this is a really quick way to get it. There’s also a special iOS property, -webkit-overflow-scrolling: touch, which changes the scroll behavior to be more “iPhone”-like.
  • WebWorkers work! In our testing we confirmed that WebWorkers — the API to let you spin up background “threads” is now enabled in iOS 5. It makes sense that this arrives just as the iPhone goes multi-core. This is great for developers who need to do some background processing in their application. That can be data updates to a server, or preprocessing some information, or anything else you can imagine when you don’t want to block the main browser UI thread. Now that iOS 5 has support for the API, we’re interested to see how it’ll end up being used in mobile (and in using it ourselves).
  • HTML5 form fields are supported, including number, range, and date picker. This is great for an HTML5 developer because iOS now opens the appropriate on-screen keyboard based on the input tag type.
  • XmlHttpRequest, level 2 is supported. Anybody who builds complex apps that use XHR to talk to a server is used to the hacks that XHR level 1 required. In iOS 5, XHR level 2 is supported so you can use capabilities like cross-origin support, binary data support, and more.

Apple iOS5 icon Mobile Safari in iOS 5 continues Apple’s tradition of delivering a first class browser and innovating in device APIs. Of course, there are more we’d like to see soon, primarily the MediaCapture APIs so web developers can get better access to the device camera. We’re particularly happy about the super-fast Canvas and really interested to see what developers will do with WebWorker support in mobile.

There are 10 responses. Add yours.

James Pearce Sencha Employee

3 years ago

Just want to add that JavaScript performance has returned to homescreen-based web apps too - quite important after the missing Nitro debacle in 4.x.

Tyler

3 years ago

Does anyone know if you can access WebSQL databases from worker threads in iOS5?

James Pearce Sencha Employee

3 years ago

WebSQL caveats are mostly around the fact it’s no longer an active standard.

Web Worker caveats are mostly around the use of JSONP (since there’s no DOM) and other global objects.

I would have thought WebSQL in a Web Worker would be OK in theory, and I would expect the worker to scope the DBs according to the domain of the original main script.

As with all things mobile, the best thing to do is test it wink

interfaSys

3 years ago

It would be great if ST 2 could include libraries that can be used without DOM access. That could be useful for data retrieval and processing in the background.

Noah

3 years ago

Does this mean that soon we won’t have to use solutions like PhoneGap since iPhone (and hopefully other mobile phones) will incorporate native device APIs into their browser environment?

Wan Li

3 years ago

Does anyone have the Canvas performance numbers of ICS’s in stock browser?
IMHO, it should benefit the HW acceleration and V8 crankshaft.

Martin de Keijzer

3 years ago

I always love to use this site to make a feature comparison or just check if anything I need is already available on the platform I’m working with;
http://www.caniuse.com/#agents=mobile&eras=e0&statuses=All

Jay Robinson Sencha Employee

3 years ago

Looks like Apple is reading your wishlist, James! http://www.sencha.com/blog/a-web-developers-wishlist-for-ios-5

Harvey

3 years ago

OK, so you said “In early October, iOS 5 (and the iPhone 4S) was released. In our last few reviews, iOS has come head and shoulders above other device platforms as the best platform for HTML5 developers.” 

But, I didn’t see and data as compared to the “other device platforms”.  Looks like you just compared it to the previous version is iOS.

guest

3 years ago

I want to learn programming languages and want to make software. But I don’t know where should I get started. Some say I should begin with C language, while the other says begin with BASIC. Please tell me which one should I learn initially, http://www.rosettastoneoutletnow.com/ and kindly also tell me what is the difference between C, C++, BASIC and what should be the correct order to learn all programming languages.

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

Commenting is not available in this channel entry.