What’s Included in Famo.us

The Famo.us platform comes packaged with a wide variety of modules and utility classes that provide all you need to build a high-performance interface. You don’t need to know about all of these modules to get started, but you may want to bookmark this page for reference later.

Core

The core modules of Famo.us include all of the low-level componentry required to make Famo.us applications possible. (Note that many of the objects listed here are only for the Famo.us engine’s internal use.)

Context: The top-level container for a Famo.us-renderable piece of the document.
ElementAllocator: Internal helper object that handles the process of creating and allocating document elements for use in Surfaces (for internal engine only).
Engine: The singleton object initiated upon process startup which manages all active Contexts, runs the render dispatch loop, and acts as a listener and dispatcher for events.
Entity: A singleton that maintains a global registry of rendered surfaces (for internal engine only).
EventEmitter: EventEmitter represents a channel for events.
EventHandler: EventHandler forwards received events to a set of provided callback functions. It allows events to be captured, processed, and optionally piped through to other event handlers.
Group: An internal Context designed to contain surfaces and set properties to be applied to all of them at once (for internal engine only).
Modifier: A collection of visual changes to be applied to another renderable component.
OptionsManager: A collection of methods for setting options which can be extended onto other classes.
RenderNode: A wrapper for inserting a renderable component (like a Modifer or Surface) into the render tree.
Scene: Builds and renders a scene graph based on a declarative structure definition.
SpecParser: This object translates the rendering instructions that renderable components generate into document update instructions (for internal engine only).
Surface: A base class for viewable content and event targets inside an application.
Transform: A high-performance matrix math library used to calculate affine transforms on surfaces and other renderables.
View: Useful for quickly creating elements within applications with large event systems.
ViewSequence: Helper object used to iterate through items sequentially. Used in views that deal with layout.

Events

Famo.us implements an event interface, similar to the one used in Node.js, for communication between objects. You can use these objects to tie together the different modules in your application.

EventArbiter: A switch which wraps several event destinations and redirects received events to at most one of them.
EventFilter: EventFilter regulates the broadcasting of events based on a specified condition.
EventMapper: EventMapper routes events to various event destinations based on custom logic.

Inputs

Famo.us provides a number of input modules that allow your application to accept and handle user input, including those that synchronize input from different sources such as mouse and touchscreen.

Accumulator: Accumulates differentials of event sources that emit a delta attribute.
DesktopEmulationMode: Emulate desktop input on mobile devices
FastClick: FastClick is an override shim to speed up clicks on some browsers.
GenericSync: Combines multiple types of event handling into one standardized interface.
MouseSync: Handles piped-in mouse drag events.
PinchSync: Handles piped-in two-finger touch events to change position via pinching / expanding.
RotateSync: Handles piped-in two-finger touch events to support rotation.
ScaleSync: Handles piped-in two-finger touch events to increase or decrease scale via pinching / expanding.
ScrollSync: Handles piped-in mousewheel events.
TouchSync: Handles piped-in touch events.
TouchTracker: Helper to TouchSync that tracks piped in touch events, organizes touch events by ID, and emits track events back to TouchSync.
TwoFingerSync: Helper to PinchSync, RotateSync, and ScaleSync. Handles piped in two-finger touch events.

Math

Famo.us’ math functions and utilities are used throughout the Famo.us core and in Famo.us’ physics modules.

Matrix: Simple math libary for 3x3 numerical matrices.
Quaternion: Simple library for using Quaternions.
Random: Extremely simple uniform random number generator.
Utilities: A collection of static methods to help with math functions.
Vector: Three-element numerical vector library.

Modifiers

These modifier modules are implementations of the core Modifier pattern, which outputs transforms to the render tree.

Draggable: Makes added render nodes responsive to drag behavior.
Fader: Modifier that allows you to fade the opacity of affected renderables in and out.
ModifierChain: A class to add and remove a chain of modifiers at a single point in the render tree.
StateModifier: A collection of visual changes to be applied to another renderable component, strongly coupled with the state that defines those changes.

Physics

This collection of modules allows for physical simulation based on real-world physics, including particles, forces, bodies, and more.

Core

PhysicsEngine: The physics engine is responsible for mediating bodies and their interaction with forces and constraints.
SymplecticEuler: Ordinary Differential Equation (ODE) integrator. Manages updating a physics body’s state over time.

Bodies

Particle: A unit controlled by the physics engine which serves to provide position.
Body: A unit controlled by the physics engine which serves to provide position and orientation.
Circle: An elemental circle-shaped Body in the physics engine.
Rectangle: An elemental rectangle-shaped body.

Constraints

Collision: Allows for two circular bodies to collide and bounce off each other.
Constraint: Allows for two circular bodies to collide and bounce off each other.
Curve: A constraint that keeps a physics body on a given implicit curve regardless of other physical forces are applied to it.
Distance: A constraint that keeps a physics body a given distance away from a given anchor, or another attached body.
Snap: A spring constraint is like a spring force, except that it is always numerically stable (even for low periods).
Surface: A constraint that keeps a physics body on a given implicit surface regardless of other physical forces are applied to it.
Wall: A wall describes an infinite two-dimensional plane that physics bodies can collide with.
Walls: Walls combines one or more Wall primitives and exposes a simple API to interact with several walls at once

Forces

Drag: Drag is a force that opposes velocity. Attach it to the physics engine to slow down a physics body in motion.
Force: Force base class.
Repulsion: Repulsion is a force that repels (or attracts) bodies away (or towards) each other.
RotationalDrag: Rotational drag is a force that opposes angular velocity. Attach it to a physics body to slow down its rotation.
RotationalSpring: A force that rotates a physics body back to target Euler angles.
Spring: A force that moves a physics body to a location with a spring motion.
VectorField: A force that moves a physics body to a location with a spring motion.

Surfaces

These surface modules are extensions of the core Surface module, providing a concrete interface to common visual document elements.

ContainerSurface: An object designed to contain surfaces and set properties that must be applied to all of them at once.
FormContainerSurface: A surface to contain form elements.
ImageSurface: An image element.
InputSurface: An input element.
SubmitInputSurface: A form submit button.
TextareaSurface: A textarea element.
VideoSurface: A video element.
CanvasSurface: A canvas element.

Transitions

Transitions are used to create animations, usually by providing data to Modifier instances.

CachedMap: A simple in-memory object cache. Used as a helper for Views with provider functions.
Easing: A library of curves which map an animation explicitly as a function of time.
MultipleTransition: Transition meta-method to support transitioning multiple values with scalar-only methods.
SnapTransition: SnapTransition is a method of transitioning between two values (numbers, or arrays of numbers)
SpringTransition: SpringTransition is a method of transitioning between two values (numbers, or arrays of numbers) with a bounce.
Transitionable: A state maintainer for a smooth transition between numerically-specified states.
TransitionableTransform: A class for transitioning the state of a Transform by transitioning its translate, scale, skew and rotate components independently.
TweenTransition: A state maintainer for a smooth transition between numerically-specified states.
WallTransition: WallTransition is a method of transitioning between two values (numbers, or arrays of numbers) with a bounce.

Utilities

The utilities collection hosts various helper classes and static methods that may be useful throughout your Famo.us applications.

KeyCodes: Collection to map keyboard codes to plain English.
Timer: An internal library to reproduce JavaScript time-based schedulers such as setTimeout.
Utility: Other miscellaneous, standalone utility functions.

Views

Views are higher-level, visual, interactive components for use in applications. They provide a convenient wrapping over many lower-level components to support several common interface expressions.

ContextualView: ContextualView is an interface for creating views that need to be aware of their parent’s transform, size, and/or origin.
Deck: A Sequential Layout that can be opened and closed with animations.
DrawerLayout: A layout which will arrange two renderables: a featured content, and a concealed drawer. The drawer can be revealed from any side of the content (left, top, right, bottom) by dragging the content.
EdgeSwapper: Container which handles swapping renderables from the edge of its parent context.
FlexibleLayout: A layout which divides a context into sections based on a proportion of the total sum of ratios. FlexibleLayout can either lay renderables out vertically or horizontally.
Flipper: Allows you to link two renderables as front and back sides that can be ‘flipped’ back and forth along a chosen axis.
GridLayout: A layout which divides a context into several evenly-sized grid cells.
HeaderFooterLayout: A layout which will arrange three renderables into a header and footer area of defined size, and a content area of flexible size.
Lightbox: Lightbox, using transitions, shows and hides different renderables.
RenderController: Show, hide, or switch between different renderables with a configurable transitions and in/out states.
ScrollContainer: A scrollview added within a container surface.
Scroller: Doc: Lays out a collection of renderables, and will browse through them based on accessed position.
Scrollview: Lays out the sequenced renderables sequentially and makes them scrollable.
SequentialLayout: Lays out specified renderables sequentially.

Widgets

Widgets is a collection of small, useful views. Unlike the modules in the views library, widgets make some assumptions about styling.

NavigationBar: A view for display for displaying the title of the current page, as well as icons for navigating backwards and opening further options.
Slider: A view for a slider.
TabBar: A view for display various tabs that dispatch events based on the id of the button that was clicked.
ToggleButton: A view for transistioning between two surfaces based on a ‘on’ and ‘off’ state.

Next: Browser & Device Support »