Passionately Curious

Menu

Famo.us Intro

A JavaScript framework which helps you create smooth, complex UIs for any screen. Stress on the smooth part. Famo.us elements are styled with position:absolute and their positions are defined by matrix3d webkit transforms. This is what makes Famo.us performant.

2. What are context, renderables, surfaces, views, stateModifier…?

context: isolated rendering environments that renderables live in. Like a canvas. You can have multiple contexts in a Famo.us app but if you’re building a mobile app or a full-page web app, you usually just have one.

renderables: objects that map to an actual element on the screen that you can see. In Famo.us, the most primitive renderable is a surface, which maps to a DIV element in the DOM.

surface: a kind of renderable, actually a div, whose css could be specified in JS

views: views group surfaces together. Not necessary. Events could be set directly upon views through myView._eventInput.on(‘click’, function() {}); and emitting it to the outside through myView._eventOutput.emit(‘hello’); and being catched from the outside through myView.on(‘hello’, function() {});

stateModifier: an option to position a div in a form of css transform, before adding it to the context

lightbox: specify how our surfaces transition in and out, and opacity change when they do. There are six properties: inOpacity/outOpacity, inTransform/outTransform (scale, translate…) and inTransition/outTransition (easing, duration…)