Looking into the Famo.us framework

Quick post - February 2, 2015

I’ve been messing around with the Famo.us framework a bit in my spare time lately. I’ll have more to say about it soon, after I find some time to actually create something and see how it all works in practice. For now I’ll just say that it’s an interesting approach to get some big performance gains out of html apps that require highly interactive and animated interfaces.

The people over at Famo.us have taken a fairly drastic approach, basically rebuilding how html is rendered in the browser. It is able to render your application, all built in javascript and using some familiar html and css syntax, using the DOM, Canvas, and WebGL. They’ve even built in a physics engine to make transitions more interesting than can be achieved with standard ease transitions. There’s a set of custom Angular directives available to make building with the framework a bit closer to html, but I think that part of the project is a younger, and it didn’t seem to work as well as advertised for me.

I’m on the fence about what kinds of applications this framework could make sense for, given the steep learning curve and drastic deviation from standard practices. Right now I’m thinking that it’s definitely not something you’d want to use for your standard website, but a mobile app that is meant to be packaged to look native using something like Cordova might benefit from the performance gains Famo.us offers.

Just to give you an idea of how different coding for Famo.us is from normal html/css/js, here is one of the code samples they provide that creates a red square and animates it to the coordinates 100, 300 in your view:

var Engine = require('famous/core/Engine');
var Surface = require('famous/core/Surface');
var Transform = require('famous/core/Transform');
var StateModifier = require('famous/modifiers/StateModifier');

var mainContext = Engine.createContext();

var surface = new Surface({
  size: [100, 100],
  properties: {
    color: 'white',
    textAlign: 'center',
    backgroundColor: '#FA5C4F'
  }
});

var stateModifier = new StateModifier();

mainContext.add(stateModifier).add(surface);

stateModifier.setTransform(
  Transform.translate(100, 300, 0),
  { duration : 1000, curve: 'easeInOut' }
);

See it in action

Like I said, I hope to dive into it further soon, and when I do I’ll be back with more detailed information – maybe even a tutorial – but if you want to check it out for yourself, the Famo.us University has a well put together series of interactive tutorials you can complete right on their site. Fair warning though, Famo.us is not for the feint of heart. From the marketing copy on their site and the brevity of their tutorials, it seems as though they may be underestimating just how foreign this type of development may be for most people that were raised on html and haven’t had to build interfaces in code.