Fast and flashy: Famo.us JavaScript framework revealed

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.

Follow the bouncing app

Right now, however, the Famo.us physics engine may be the most interesting. The idea here is to take the kinds of physics that are usually associated with high-end videogames and allow programmers to apply them to objects on a Web page — without needing to know the nitty-gritty of those engines. This could be something as simple as an overscroll bounce, for instance, or something a good deal more complex.

One demo, called “One to Many,” shows a grid made of squares that are viewable from multiple angles. Click on it, and the squares arrange themselves into a stack — again, viewable from multiple angles. The physics engine allows the programmer to specify such parameters as different, preprogrammed easing functions for the transitions, so many polished-looking effects that used to require lots of hand-coding can now be done out of the box.

Another Famo.us demo shows how the physics engine can be used to create responsive designs for applications. The demo involved a sphere made out of other spheres, with each sphere using a repulsion property to allow them all to maintain an equal distance from each other, even after adding more spheres. In the same way, elements on a Web page can be assigned physical properties. As Famo.us’s folks put it, this is that well-worn Web buzzword “responsive design” taken to the next level.

Yet another demo, an image gallery, makes it more clear how Famo.us works with the existing browser object model in a useful way. When I clicked on any of the images to zoom in on them, I was also able to right-click the image and open it in a new browser tab — just as I would if the image had been displayed on a conventional Web page. Text showed up as regular text, too. A final demo involves a simple incarnation of a Twitter reader app with an infinite scroll view and a smooth-sliding display.

Working in the real world

Famo.us is intended to be cross-browser, so I tried it in every browser I could get my hands on — with mixed results. Chrome and Safari yielded the best results. The 3D objects themselves rendered fine in Firefox, but the object controls didn’t always work. On both my iPad Mini and my Android smartphone, the images were still smooth and flowing, if slightly less impressive on the smaller screens.

One possible downside for developers on a tight bandwidth budget is the size of the Famo.us framework. The entire core JavaScript library takes some 355K or so, but Steve Newcomb, the CEO and founder of Famo.us, says it can be smaller. “We use require.js, which lets a developer only include the parts of Famo.us they need, which means you can deploy significantly smaller footprints.”

A new power tool

An easy criticism of Famo.us is that 3D on the Web is nothing new, but Fetterman argues that the larger point of Famo.us is not to reinvent the wheel. “We’re not inventing 3D on the Web, nor are we inventing WebGL. Famo.us is just an integration of a lot of these technologies to make it easy for someone to build this stuff. It’s hard to achieve the sort of level of sophistication and performance you see in a native iOS, Objective-C app by way of a Web technology.”

The strategy, as he put it, is to “build beautiful things,” get as many people as possible using them, “then have everyone else catch up — which is better than having us boil ourselves down to the least common denominator.”

The framework, along with a pack of templates to get people up and running with it quickly, is being released as an open source project under the Mozilla Public License Version 2.0. Famo.us is planning to make money from its work by offering a cloud-hosted analytics system, which app developers can hook into if they so choose — it’s not mandatory.

“When you build something in JavaScript,” Fetterman says, “you make it by necessity open source and sharable and reusable. I’m excited that nothing is going to get in the way of our core goodness as a platform. … What we’re able to do at the core of Famo.us is build a really a screaming-fast rendering engine in JavaScript, apply a physics engine to that, and apply some bells and whistles and refined principles that mean you can build beautiful things using Web technology across a multitude of devices. Putting things in the way of that makes me unhappy,” he says.

This story, “Fast and flashy: Famo.us JavaScript framework revealed,” was originally published at InfoWorld.com. Get the first word on what the important tech news really means with the InfoWorld Tech Watch blog. For the latest developments in business technology news, follow InfoWorld.com on Twitter.