Home

Core

We’ve done the housekeeping, covered how to get set up, and talked about why you might want to use Famo.us. Now, let’s dust off our hands and start exploring the exciting stuff: the Famo.us platform itself. We’ll start by covering the core components of Famo.us, and gradually build our knowledge from there.

Most of the logic in your Famo.us application will deal with manipulating a set of six basic building blocks, namely:

Each of these building blocks plays a central role in creating what appears on the screen. Understanding how each works on a conceptual level, and how they interoperate, is essential to understanding Famo.us as a whole.

The engine

Every Famo.us application has one engine. It’s a single object that orchestrates all the components of your application. It manages all contexts, runs the render loop, and dispatches events. If your Famo.us application were a film, you could think of it as the director. (You’re the producer; you ultimately call the shots!) More about the engine »

The context

The context is a container for all visual elements in a Famo.us application. Anything that needs to be displayed on the screen must be added to the context. Although there can be more than one context in a Famo.us app, it’s most common for there to be only one. In film terms, you could think of the context as the stage. More about contexts »

The render tree & render nodes

The render tree is a hierarchical object that describes how all visual elements in your Famo.us application will be displayed. It’s made up of many render nodes that keep track of the size, position, opacity, and transform of displayed elements. You could almost think of the render tree as a storyboard, describing what every visual element will look like during every frame of the scene. More about the render tree »

Surfaces

Surfaces are the atomic unit of displayed content in any Famo.us application. They are one of the two predominant types of render nodes. They are the only type of Famo.us element that actually connects directly to a visible HTML element; every Famo.us surface maps to a visible HTML element (such as a <div>) in the DOM. Surfaces are individually animatable, and can be scaled, rotated, or skewed in 3D space. Think of surfaces like the actors and the props in your film. More about surfaces »

Modifiers

Modifiers control how rendered elements are displayed. Think of them like individual stage directions. They tell displayed elements where to go and, to a degree, what to look like. Modifiers are one of the two predominant types of render nodes. Although modifiers themselves are not displayed, they can affect the properties of one or many displayed elements. More about modifiers »

Transforms

Transforms control the position, scale, rotation, and distortion of rendered elements. Used in conjunction with modifiers, transforms can give visible elements the effect of motion through space, scaling up in size, or spinning. More about transforms »

Next: The engine & contexts »