This blog post is an expanded version of a comment I wrote for Bruce Lawson’s blog post about what the web platform needs next (it hasn’t shown up at the time of writing, so it’s either held in moderation or didn’t submit properly). The ideas it contains are things I’ve been thinking about for a while though.
One area where I believe web apps still fall behind native apps, particularly on mobile, is in providing rich, animated UI. The kind of effects Pasquale D’Silva talks about in his post Transitional Interfaces. These kind of effects show up all the time in native apps, but are much rarer in web apps. It’s not that they’re impossible, frameworks like jQuery Mobile provide them, and people like Chris Coyier and Steve Sanderson have done some heroic work showing how you can roll them yourself.
I’d like to see animation hooks built into all parts of the platform, so I can declaratively say: When I navigate via a link, transition between pages like this. When a new DOM node is inserted into a list, animate its entry like this and, when it’s removed, animate its exit like this. It can often be generalised into a matter of saying, when my UI is in state X, and I switch to state Y, transitions my UI elements like this. Building this would require defining the states that are implicit in the UI platform, and the edges between them, then providing a mechanism to control what happens at the edges.
This needs to be done in the layered fashion that Alex Russell and others have been advocating. So we get both low-level, imperative JS APIs that can be used to get fine-grained control and deal with rare use cases, as well as high-level declarative APIs (which can be expressed in terms of the low-level APIs) that let us easily achieve common use cases, like “give me an <ul> with fancy slide-in and slide-out animations when items are added or removed”.
The Web Animations spec is an important first step, as it defines a common model for what we have (CSS animations and transitions, and SVG) that can be used to build other things in a consistent fashion. There’s even an impressive looking prototype/polyfill of the spec available, developed by Google by the looks of it, available to tinker with. However there’s still a lot of work to be done to define other parts of the platform in terms of that model, and to create the declarative APIs that will sit on top of it. I have some ideas about how those APIs might look, and plan to work up some prototypes of my own, if I get the time.