W2E Day 1: Building Cross-Platform Mobile Web Apps with Jonathan Stark
This was a good companion to this morning’s session (okay, yesterday morning’s session now: Alex’s workshop took so long to write up that now I’m behind.) It covered a lot of the same ground but in a more hands-on, less theoretical way. It discussed the same CSS3 features: transforms, transitions, animation, gradients, rounded corners, and text shadows, but gave more complete code examples, took some time to explain them, and tweaked a lot of parameters to show their effect.
Jonathan disagreed with Alex on one thing: they both gave equal weight to Web Storage (for keeping simple persistent data on the client) and app cache manifests (for keeping resources on the client), Jonathan went on to give a gung-ho demo of HTML5′s SQL database integration, which Alex dismissed yesterday saying the API was “a mess”. One reason might be that Jonathan was speaking specifically about writing mobile pages, which means WebKit (which has the SQL API) while Alex, despite being a chrome developer, was being careful to keep his talk cross-platform and highlight the Firefox and Opera way to do things. I’m not sure now if Alex meant that the db situation is “a mess” because there is no convergence, or if he had actual problems with the API design.
Apart from the new CSS and HTML practical overview, Jonathan did cover some more philosophical questions: is it better to use native UI toolkits to write a mobile app for each device, or just write your “app” in HTML and use these new features to make it look as much like an app instead of a web page as possible? HTML is the clear winner in terms of developing for multiple devices (no need to learn Objective-C just to build for iPhone), distribution, and updating (just dump the new version to the live site), but native apps still have slightly better cosmetics and – critically – access to device features. Random apps on a web site aren’t allowed to access the camera, dial the phone or open the address book.
It’s important to note that Jonathan was talking about building apps through HTML, not just web pages. His examples blatantly ignored a lot of Alex’s optimization (or more precisely “not sucking horribly” advise), but as he reminded me when I talked to him afterwards, not blocking on network performance doesn’t matter as much when the app is all installed. He swears by Steve Souders for performance advice: I’ll need to check out his stuff to see how it compares. (I see he and Alex both work for Google, so probably Alex got it from him in the first place.)
Jonathan also touted the JQTouch library that he maintains, originally written by David Kaneda, whose presentation I’m going to see tomorrow. (Today, now. In fact, I’ve already seen it. But let’s maintain the fiction that I just walked out of the workshop.) It looks like a pretty good widget toolkit – built on jQuery, but I won’t hold that against it for native development. I wonder how hard it would be to rip out the jQuery usage and replace it with Alex’s h5.js…
Jonathan had some useful advice for mobile developers as well: as well as the obvious small screen and slow, unreliable, expensive data channels, remember that the user’s interaction with a mobile device will be different because they are almost always using it in a distracting environment. Users want to pop open the app, perform a tiny task, and be done before they reach the head of the line. That means always let the user know how much is left to go in their interaction, try to break things up into tiny chunks, and if there is ever the slightest pause for God’s sake throw up a progress bar or something!
A more specific recommendation: on a touch decvice, put controls (search bars, navigation buttons, etc) on the bottom of the page, since reaching up to tap a control will block the user’s view. Good common-sense advice; I hadn’t thought of that.
Other than that, a pretty good presentation, and it was good to see that a web designer is just as excited about new HTML features as browser developers expect (and for much the same reasons – both easier to write and faster).
Slides and some extended notes are promised at http://jonathanstark.com/web20.
(While I’m attending this conference on behalf of Research In Motion, this blog and its contents are my personal opinions and do not represent the views of my employers. )