Fast and flashy: Famo.us JavaScript framework revealed

Famo.us's product to bring complex 3D graphics, realistic motion to stock Web browsers and ordinary Web developers

The biggest problem with most HTML5 apps is that they're slow. Not because JavaScript runs slowly, but because the overhead involved in manipulating your browser's DOM (Document Object Model) to do the kinds of useful things people expect from a modern app brings everything to a grinding crawl.

Back in October, InfoWorld's Eric Knorr wrote about a little San Francisco startup called Famo.us. Its product, which has attracted some 70,000 developers for a private beta, is a framework for creating Web and mobile JavaScript applications that break the performance bottleneck without plug-ins or native code.

Today, Famo.us is announcing that it will be offering its framework under an open source Mozilla Public License Version 2.0 (MPLv2) license and is unveiling demonstration code on the Codepen code-sharing site. It is also partnering with Firebase, a database as a service for mobile and Web apps.

Why so much fuss over another JavaScript framework? Mainly because it is unlike any other framework out there: Famo.us replaces the browser's rendering engine with its own, which is written entirely in JavaScript, and fuels it with the GPU acceleration provided by CSS's 3D transformation functions. Most any device these days that can run a modern browser -- even a modest smartphone -- has some kind of GPU supporting it, so why not leverage that? Armed with Famo.us, developers can maintain a single code base that performs well across many platforms.

This isn't a hack, either. It's all industry-standard CSS3, and the library itself is pure JavaScript with no binaries or other add-ons.

Laying the groundwork

One sign of how Famo.us might be onto something is that it's managed to snag none other than David Fetterman, the former mobile engineering manager for Facebook. He originally pooh-poohed HTML5 for not performing well enough. And when he met with the folks at Famo.us for the first time, he was a skeptic. "I was going to tell them it was a bad idea [to build pure HTML5 apps]," he tells InfoWorld. "But I came in, learned how it worked, and got excited about it." He's now a full-time team member.

At its core, the Famo.us library consists of four elements: a rendering engine, a physics engine, a gesture engine for input, and an output engine -- again, all written entirely in JavaScript. The rendering engine uses CSS3's transform: matrix3d() and transform-style: preserve-3D() functions to do the heavy lifting, which allow CSS elements to be treated like 3D objects -- scaled, rotated, transformed, and so on. Right now, Internet Explorer has a couple of bugs with preserve-3D, but Famo.us and Microsoft are working together to get that fixed.

The Famo.us rendering engine preprocesses everything, the results of which can be sent through DOM or WebGL -- the latter enabling much more finely rendered applications or graphical objects. WebGL isn't turned on by default in some browsers, but Famo.us is being written to anticipate that happening -- much the same way JavaScript was not at first on by default but now is. Famo.us CEO Steve Newcomb believes that when developers use frameworks like his to access the power of WebGL across the board, the Web will get a "facelift," with much richer applications and graphics becoming the default.

1 2 Page 1
Page 1 of 2