Subscribe / Unsubscribe Enewsletters | Login | Register

Pencil Banner

Jumping JavaScript! Hands-on with the Famo.us framework

Martin Heller | May 2, 2014
Famo.us is an open source JavaScript framework for building high-performance mobile Web and hybrid mobile apps. The framework gets its speed and sizzle by replacing the browser's slow, DOM-based rendering mechanism with its own rendering engine and by tapping the GPU acceleration provided by CSS3's 3D transformation functions -- no plug-ins or native code required.

Famo.us is an open source JavaScript framework for building high-performance mobile Web and hybrid mobile apps. The framework gets its speed and sizzle by replacing the browser's slow, DOM-based rendering mechanism with its own rendering engine and by tapping the GPU acceleration provided by CSS3's 3D transformation functions — no plug-ins or native code required.

In the lore of Famo.us, the origin of the framework was the original team's struggle with HTML5, CSS3, and the DOM (Document Object Model). According to architect Dave Valdman, writing on the Famo.us site, "We wondered if we could move a square <div> at 60 FPS entirely in JavaScript without relying on CSS3 keyframe animations... then we built a framework around it." Valdman now adds one comment to that for context: "Animation is our humble roots, but our library has matured into much more."

To introduce you to the way Famo.us works, I've captured and explained a series of screens from the Famo.us tutorials, demos, and samples. When the company can clear up its backlog of beta applicants (more than 80,000 at the time of my visit) and fix the issues that inevitably surface after a developer product launch, you'll be able to try the framework yourself.

Hello, Famo.us

The "Hello Famo.us" lesson creates a device emulator (shown here as an iPhone), then adds a background surface in color #FA5C4F, three slide images, and onClick logic to the slide surface to create a simple slideshow app. The most impressive part of the demo is that the preview updates instantly as you change the code online.

Note the settings near the top of the code. Transition animations can follow standard or custom easing curves or physical simulations between endpoints, vary opacity, and change the translation, rotation, origin, and size of surfaces.

Displaying content

The first actual lesson in Famo.us 101 covers how to display and style content in Famo.us using JavaScript, HTML, and CSS. You'll notice that styling surfaces in Famo.us is just like writing CSS, except that the properties are written using camelCase instead of dashes. That's because the standard CSS property names with dashes are not valid — the dash is interpreted as a minus sign or subtraction operator. Ultimately, these styles become their equivalent CSS properties.

Note the use of require statements in the code above. The require statement is not standard JavaScript, but comes from the RequireJS framework, a JavaScript file and module loader. Famo.us expects to eventually eliminate the use of RequireJS for its own framework.

Transforms

The second lesson in Famo.us 101 starts by covering translations and state modifiers. In this example the createSurface function defines the 100-by-100-pixel square in the upper left with the text "surface," and the createModifiedSurface function creates the other square with the text "modified surface" and translates it 150 pixels to the right and 100 pixels down.

 

1  2  3  4  Next Page 

Sign up for CIO Asia eNewsletters.