Develop for iPad with HTML5: Trial and Error

At Apple’s Worldwide Developer Conference (WWDC) last week, Apple CEO Steve Jobs told developers that it supported two development platforms for its various iDevices: the App Store, and web applications written with HTML5, CSS, and JavaScript.

Though there are certainly practical limits on what may be achieved with web applications targeted for these devices, ambitious developers like Thomas Fuchs (of script.aculo.us fame) are pushing those limits to see what is possible.

screenshot of the Every Time Zone app running on iPad

In an illuminating blog post, Fuchs explains the various technical choices he was forced to make in order to achieve acceptable performance on Apple’s iPad when developing the gorgeous Every Time Zone application, which is optimized for the iPad:

  • Avoid images and CSS gradients, but painting gradients on HTML5 <canvas> tags is OK.
  • Avoid CSS shadows, which again means relying on <canvas> for glows and shadows.
  • Use CSS for animations, and keep them simple, since hardware acceleration goes away when things get complicated.
  • Use JavaScript touch events (e.g. ontouchmove), rather than onclick when they are available.
  • Avoid CSS opacity, which tends to disable hardware acceleration when you least expect it.
  • Roll your own JavaScript code, because current frameworks like jQuery are only optimized for desktop browsers.
  • Use 3D CSS animations, even when you only need 2D, because Mobile Safari only offers hardware acceleration for 3D translations.

Reading between the lines, it seems clear that developing for Apple devices using web technologies is still very much a trial-and-error process. As mobile devices from Apple and others continue to evolve rapidly, the rules will change frequently over the next few years.

If you want to play in this arena, you really need to know your code, which will enable you to attempt with confidence two or three different approaches to the same problem. If you are used to working with jQuery, for example, now might be a good time to take a course like JavaScript Live to get some experience writing your JavaScript from scratch.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Justen

    Re: javascript, I can’t imagine myself coming up with JS that is better optimized than a solid library, especially if I’m intending the app to work on both the iPhone/Pad and other environments with minimal conditional work (which I probably would as I don’t live in Appleland and don’t even own either device – I would expect any web app to run in any modern standards-supporting browser as a user and I’d deliver no less as a developer). Maybe the sane real-world answer is to run a pared-down version of your library of choice with only the features you absolutely need. Most libraries will let you pick and choose a custom build; I would start from there. Squeezing a tiny bit more performance out of the thing is nice, but not if it increases the workload a hundred times.

    • http://www.lunadesign.org awasson

      Well I think if you intend to do any development for the iPad/Phone market you’ll need to get the hardware because it seems that the emulator doesn’t reflect a real world representation of it. …And it seems according to Thomas Fuchs’ blog that the hardware will choke on regular practices which is why you would likely need to roll your own library or wait until someone releases an iPlatform specific edition; a great deal of what is included in desktop libraries either aren’t supported or aren’t necessary for iPhone/Pad.

  • http://www.lunadesign.org awasson

    Wow….Interesting stuff in that blog about their iPad development experiences. I can understand rolling your own JavaScript and using the conventions of the platform but inline CSS… Yuck : (

    I wonder who will be the first to write an iPad specific JavaScript library. I bet it won’t be long and it’ll probably be a whole lot leaner than the ones we use for the desktop.

  • rnystrom

    I’ve been working on a webapp for about a week now, and my biggest issue is memory usage which eventually leads to choppy (or sometimes even skipped) animations. Revamping my pages to get rid of JQuery seems like a daunting task. What I’d really love to see is an interactive webapp with smooth animations/effects using purely barebones Javascript and CSS3 before I get in over my head.

    Do you have any such suggestions?

    I haven’t used at all though, maybe I need to be on Sitepoint more…

  • Anonymous

    ughh screw ipad

    • http://www.lunadesign.org awasson

      Well, I’m sure someone said that about HTML in the mid 90′s and missed out on a golden opportunity. The facts are that the iPad is selling faster than the stores can stock them so app building and iPad/Phone enabling web development might be a good niche to cultivate.