Overview

Famo.us is a JavaScript platform for building high-performance user interfaces. It’s free to use and the source is on GitHub. It’s written in mainstream web technologies, supported by modern web browsers and mobile devices, and is compatible with tools that package websites into smartphone applications. The current stable version is 0.3.5.

What can I build with Famo.us?

Famo.us is a platform for building user interfaces. Anything the user can see or directly interact with — a navigation menu, a game, an advertisement, a single-page app — is a candidate to be built in Famo.us.

What is it like to build with Famo.us?

// @famous-block
// @famous-block-option preset famous-0.3.0-globals
// @famous-block-group s1
var Engine = famous.core.Engine;
var Surface = famous.core.Surface;
var context = Engine.createContext();
var surface = new Surface({
  size: [200, 200],
  content: 'Hello world!<br><br>I am a <strong>surface</strong>, the basic way to display content in Famo.us.',
  properties: {
    textAlign: 'center',
    padding: '1em',
    backgroundColor: '#fa5c4f'
  }
});
context.add(surface);

The example above gives a solid first look at what it’s like to build with Famo.us. In it, we can see how a few of the core components of Famo.us interact: we use an engine to create a context in which a surface is displayed.

Suppose we wanted to center some content on the screen. Making this kind of change in plain HTML and CSS can be surprisingly tricky. In Famo.us, we use an object called a modifier and two properties, align and origin, to put content in the center of the screen.

// @famous-block
// @famous-block-option preset famous-0.3.0-globals
// @famous-block-group s2
var Engine = famous.core.Engine;
var Surface = famous.core.Surface;
var StateModifier = famous.modifiers.StateModifier;

var context = Engine.createContext();

var surface = new Surface({
  size: [200, 200],
  content: 'Content can easily be centered using a <em>modifier</em> to control its alignment and origin point.',
  properties: {
    textAlign: 'center',
    padding: '1em',
    backgroundColor: '#fa5c4f'
  }
});

var modifier = new StateModifier({
  align: [0.5, 0.5],
  origin: [0.5, 0.5]
});

context.add(modifier).add(surface);

Broadly speaking, when working with Famo.us, you will:

Spend most of your time writing JavaScript — just JavaScript. You’ll occasionally write CSS. You’ll write HTML even less frequently. Famo.us has been designed with richly interactive apps and games in mind.
Write in a modular style. Famo.us works best when you approach development using modular programming techniques. In JavaScript, this means you’ll need a strong understanding of prototypal inheritance and composition. In Famo.us, you’ll build your interface out of encapsulated views that communicate via events.
Consider interactivity from the very start. If you’re already a web developer, you may be accustomed to building out your static elements first, and only then adding interaction on top. But, as the whole purpose of Famo.us is rich interaction, it makes sense to flip your thinking and ask: How will my app behave?

Paradigm shift

Although Famo.us is built in a familiar language, coding in Famo.us may feel a bit unusual at first, especially if you’re accustomed to building UIs with conventional HTML, CSS, and JavaScript. Notions like normal flow and floated elements, the bread and butter of modern website constructions, are peripheral — even completely avoided — when using Famo.us.

In fact, building an interface in Famo.us feels a lot more like building a native app than it does building a website. That’s why many developers love to use it, but it can take getting used to!

Many techniques that are second nature for experienced web developers have been designed out of Famo.us entirely. Before you start coding, think through the differences covered here. Understanding how a Famo.us application differs from a conventional website will save you time — and potentially a lot of head-scratching.

Document vs. context

When building a traditional webpage, our text content, image assets, icons, and structural elements are all said to live on a page or within the document. But in Famo.us, we call that home for elements the context. The context is similar to what other multimedia platforms call the “stage”. The Famo.us context is simply an area where visible content is displayed. Since its behavior is very unlike a real-world page, it’s incorrect to think of it as one.

Fixed vs. flexible coordinate origin

In traditional webpages, the coordinates (0, 0) always represent the top-left corner of the document, or the top-left corner of a specific element. In Famo.us, that origin point is fully controllable by the programmer, and can vary across elements. In Famo.us, the combined concepts of align and origin are used together to position elements with respect to points in space.

Hierarchical vs. flat elements

When developing traditional webpages, it’s widespread practice to nest HTML elements. (For example, you might have a <div> representing a sidebar component, and another <div> representing a tab button within that sidebar.) Nesting is often used to represent elements’ status within a hierarchy of information, as well as to obtain the benefit of inherited styles. But in Famo.us, you often can’t (or shouldn’t) rely on nesting. Instead, you’ll use the render tree.

Parent-relative vs. manual positioning

When coding a traditional webpage, it’s trivial to adjust elements’ positions with respect to their parent elements. Setting percentage-based widths in CSS, for example, is a common way of achieving a columnar layout.

In Famo.us, accomplishing that same task involves very different techniques. However, there’s a good reason: Famo.us makes trade-offs that enable you to do things that are downright impossible in a traditional website. And, fortunately, Famo.us provides a suite of pre-built layouts that cover most of the most common layouts seen around the web today.

More to explore!

The differences covered here are just a few of those you’ll find when migrating from a more traditional webpage development approach to Famo.us. If you’ve recently started using Famo.us, and feel that something else should be included on this page, please let us know.

Next: Download & installation »