First look: Famo.us remakes mobile app development

The Famo.us mobile Web framework runs faster than standard HTML and takes less development time than native code -- once you get up to speed

Page 2 of 5

The Famo.us framework
The high-level summary is that Famo.us is a modular JavaScript framework that can generate a virtual site using surfaces and styles, modified by transforms and rotations and rendered to HTML <div> tags, Canvas, or WebGL. When rendered to HTML, the <div> tags have absolute positioning and create a flat render tree. There's none of the time-consuming flow calculations you normally see in deeply nested HTML documents with relative positioning. At the next level above surfaces, you see views, which are collections of surfaces with their own behaviors, input and output event handlers, and a certain amount of encapsulation of their interior render trees.

Animation in Famo.us can use easing curves or physical simulations. It has a full-blown, game-like physics engine with a matrix-based graphics pipeline.

The framework builds from the simple to the complex. In fact, you can use it at whatever level works for your application. If there are high-level views that do what you want, use them. If not, build your own UI from surfaces, transforms, and animations, and you can turn that into a new view.

Displaying content and style. The most basic way to display content in Famo.us is to create a context, create and style a surface, and add the surface to the context:

var Engine = require('famous/core/Engine');
var Surface = require('famous/core/Surface');
var mainContext = Engine.createContext();
var firstSurface = new Surface({
    size: [200, 400],
    content: 'hello, infoworld',
    properties: {
         color: 'white',
         textAlign: 'center',
backgroundColor: '#FA5C4F'
     }
 });
 
mainContext.add(firstSurface);

There are a few points of interest in this little bit of code. To begin with, Famo.us uses require statements for modularity; only the required parts of the framework are loaded. The require statement is not standard JavaScript but comes from the RequireJS framework, a JavaScript file and module loader. According to Mark Lu, CTO, Famo.us does not actually need RequireJS per se, but it does need some sort of loader. Famo.us recommends RequireJS for what it provides in terms of debuggability.

The context is the rough equivalent of an HTML body tag, but Famo.us allows multiple contexts in an app, and it can also render contexts to canvases and WebGL, as I mentioned earlier. The surface is the equivalent of an HTML <div> tag. The properties look like CSS, only using camel case instead of dashes. That's because the standard CSS property names with dashes are not valid JavaScript -- the dash is interpreted as a minus sign or subtraction operator. Ultimately, these styles become their equivalent CSS properties when rendered.

Figure 1: Famo.us University
Figure 1: The layout lesson in Famo.us University demonstrates how to use some of the predefined views in the Famo.us framework. As in all Famo.us University lessons, the left-hand column holds instructions, the middle column is a live code editor, and the right-hand column is a live preview.
| 1 2 3 4 5 Page 2
From CIO: 8 Free Online Courses to Grow Your Tech Skills
View Comments
Join the discussion
Be the first to comment on this article. Our Commenting Policies