In the last months we refactored a Flex/Flash app to HTML5.
The app is part of the german university ranking. It allows the user to select criteria and to watch universities rearranging in a circular manner.
It is called Quick Ranking and it is hosted by ZEIT ONLINE.
Why
The main reasons to use HTML5 instead of Flex/Flash were:
- make the app accessible for IOS-based devices
- integrate the app more tightly in the surrounding website
- facilitate app development. No special tools are required, no compilation is needed.
For sure, not every flash app is suitable to be refactored to HTML5. The Flash animation engine is still outstandig and if you have a lot of elements moving and flying around, maybe Sound and Video and cutting edge visual effects, Flash is still state of the art.
But most of the Flash Apps are not cutting edge. They shift some elements from A to B, the user can interact lightly, elements are shown and hidden. No too fancy.
And that is exactly the kind of app we decided to reimplement in HTML5.
Canvas Object
Our first approach was to use the Canvas Object. We saw outstandig examples, very fast browser based games and we thought that Canvas Object is the way to go. Especially if you want to do it real HTML5, like the pros do. But after first experiments we were rather desillusionated. Canvas is fast, regarding the performance in the browser, but it’s very slow, regarding development speed.
With Canvas you have to do all the things again, that you – as a web developer – did the last time some 15 years ago, while you were studying animation arts and discovered that you can use computers as well instead of good old Bolex cameras. With Canvas you need (some say, you are enabled… :)) to do all the basic things from “Essential Computer Graphics, Volume 1″ again. Implement double or tripple buffering for smoothness. Repaint the background when your object moves. Doing dirty region analysis. Re-implement the easing stuff. When the going gets tough, the tough get going…
DIVs
But hold on. What we realized – after understanding what it really means to work with Canvas – is: Modern Browsers have really good graphic engines as well. You don’t have to do it on your own. Why not using div animation and your good old friend jQuery.
That is, what we finally did. With the help of jQuery we create DOM elements on the fly, scale them and move them around. Performance is rather good, however we had a close eye on tuning all the time.
Speed
We found some rules, that increased the speed of our app massively:
* create as few DOM elements as possible. Especially IE was speed up significantly, when creation of DOM elements were reduced
* do not scale images in animations. Remember the concept of key phases from your former analog animation days. If you have an image inside a div and the div has a border, and you want to scale them down, just do the following: Only animate the border and do the resizing of the image in one step at the beginning or at the end. Your audience won’t notice, but your CPU will
* don’t use jQuery live()-Events when you create and delete DOM elements a lot. Live()-events are comfortable, but it is much more performant to attach the event directly to the target element. Remember that live() events mean, that jQuery has to scan the DOM-tree for matching elements. That costs.