Flipboard Engineering: 60fps on the mobile web

scrolling

Since earlier this week Flipboard now is a website too. As they wanted to mimic their mobile apps, it would sport lots of animations. During their first tests, they found the DOM being too slow (although that’s not entirely true, see this video and its description for example). And then, an epiphany:

Most modern mobile devices have hardware-accelerated canvas, so why couldn’t we take advantage of this? HTML5 games certainly do. But could we really develop an application user interface in canvas?

And so they did. They’ve built react-canvas for this, “high performance <canvas> rendering for React components”. Reminds me of Letterpress, which is an optimized OpenGL scene, and acko.net, which is a WebGL layer which renders the site.

60fps on the mobile web — Flipboard Engineering →
react-canvas →

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.