After much anticipation, hype and controversy, Famo.us is finally being released today for limited public consumption. When I first saw the Famo.us webpage in late 2012, I was intrigued by what I thought was impossible to do on the web. Suspending disbelief for a moment, I began to wonder what code would look like if the animation magic I was seeing were suddenly possible to write in JavaScript.
Ultimately, developing in Famo.us is straightforward; however the concepts do differ from standard web development. In this primer I’m going to go over why Famo.us is different, the basics of writing Famo.us apps, and a list of resources to help you become a guru.
These days, web browsers apply hardware acceleration to certain CSS properties. When rendering a typical webpage, you can gain the benefits of this acceleration if you trigger CSS based animations. The browser still has to work hard to recompute the layout of your page from a change to the DOM. In practice this means that if your app is making changes to the DOM that require the browser to re-layout your page, you’ll lose hardware acceleration and generally see inconsistent and slow performance.
Famo.us is built around a neat idea: by directly using the CSS matrix3d transform in combination with the window.requestAnimationFrame function, you can describe the complete layout and animation of your app in a way that’s hardware accelerated with consistent performance.
Surfaces
The basic building blocks of a Famo.us application are Surfaces. Surfaces are simply divs that contain HTML. They make up your app at the most granular level and often do not contain sophisticated layout or content that you want to animate within the surface. A typical app is built out of many surfaces containing mostly text or images and targeted with basic visual CSS.
The Scene Graph contains your app’s surfaces along with Transforms. Transforms are used to position surfaces and thereby layout the UI of your app. They are also used to describe animation.