Welcome to my blog, if there’s something I didn’t cover feel free to leave me a comment below and I will respond as soon as humanly possible. Topic of today’s article is an in-depth review of Famo.us Framework.

Note: If this tutorial was helpful, need further clarification, something is not working or do you have a request for another Ionic post? Furthermore, if you don't like something about this blog, if something is bugging you, don't like how I'm doing stuff here, again leave me a comment below. I'm here to help you, I expect the same from you. Feel free to comment below, subscribe to my blog, mail me to dragan.gaic@gmail.com, or follow and mention me on twitter (@gajotres). Thanks and have a nice day!

PS. If you want my help, if possible (even if it takes you some time to do that), create a working example I can play with. Use Plunker for AngularJS based questions or jsFiddle for jQuery/jQuery Mobile based questions.

Link Examples GitHub Repo


This is Part 1 in a multipart series called: “Best HTML5 Mobile App Frameworks”
Note: I have no intention of stopping writing after I review Kendo UI. If you want me to review a framework you like or know about just write me a comment below.

What Is Famo.us Framework?

Famo.us is a free, open-source JavaScript framework that helps you create smooth, complex mobile applications. Like Ionic, Famo.us is made for hybrid mobile development, though, up to the point, it can be used for desktop web applications development (unfortunately, at this point, Chrome, Firefox and Chrome usage is still buggy). But, and here’s one large BUT, this framework is nothing you have seen so far. Famo.us development looks more like an animation or a game system than like conventional mobile app design.
This is because Famo.us is the only JavaScript framework that includes an open source 3D layout engine fully integrated with a 3D physics animation engine that can render to DOM, Canvas, or WebGL (this statement is only partly true because there are some other frameworks that can offer similar functionalities, like threejs.org).
An idea behind Famo.us is that browsers were never made to render apps, games were built to render apps. If you want smooth graphic and animation handling you need GPU acceleration, just the thing Famo.us offers and provides.
Famo.us is made as a modular JavaScript framework, using surfaces and styles to rendered to HTML <div> tags, Canvas, or WebGL. As you can see this approach is something completely new. Final rendered result is always absolutely positioned so an application will not suffer from common problems related to relative positioning. Surfaces are collected under Views. They handle everything from surface behaviors to event handling.
Another thing that makes it apart is built in Angular usage (also seen only in Ionic framework). Angular is needed because it offers a framework for page handling where Famo.us is only a rendering engine. For those of you who don’t know, AngularJS, commonly referred to as Angular, is an open-source web application framework maintained by Google and a community of individual developers and corporations to address many of the challenges encountered in developing single-page applications.
Its goal is to simplify both development and testing of such applications by providing a framework for client-side model–view–controller (MVC) architecture, along with components commonly used in rich internet applications. It’s pretty darn fast, it uses a simple syntax (at least compared to Backbone or Knockout) and like jQuery, has a large number of 3rd party plugins and extensions.
Together they provide a set of ready-made layouts/directives on top of which we can build our widgets, and ultimately applications.

What Famo.us is not?

Famo.us is not all around replacement for other mobile frameworks (especially not for the Three.js). It’s not a animation/tweening library nor it is a jQuery animation replacement tool.
Currently, you can’t use it for classic web development, it may change in the future. If you like HTML5 markup based frameworks then this is not a framework for you. Famo.us is very different from many Javascript frameworks since it endorses zero touches to the DOM. Querying the DOM can lead to both performance issues as well as unexpected behavior.

Main features

  • Open-source and free
  • Usable with AngularJS
  • iOS and Android support (including buggy desktop support)
  • 3D layout engine
  • 3D physics based animation library
  • 60 fps animations (though I would like to see this on lower end devices)
  • Can be rendered to DOM (Canvas, or WebGL are in a roadmap)
  • Supports Cordova, PhoneGap, Trigger.io or Crosswalk plus its own native wrapper
  • Help is available throug the IRC chanell

Code example



<!doctype html>
<html lang="en">
  <meta charset="UTF-8">
  <title>Example - example-example41</title>
  <link href="famous-angular.css" rel="stylesheet" type="text/css">
  <link href="style.css" rel="stylesheet" type="text/css">
  <script src="https://code.famo.us/famous/global/0.2.2/famous.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
  <script src="famous-angular.js"></script>
<body ng-app="faPipeExampleApp">
  <fa-app ng-controller="PipeCtrl">
      <fa-modifier fa-size="[100, 100]">
          <fa-surface class="blue-surface" fa-background-color="'blue'" fa-click="surfaceClick()">Click me!</fa-surface>
    <fa-view fa-pipe-from="eventHandlerB">
      <fa-modifier fa-size="[100, 100]" fa-translate="redTrans.get()">
          <fa-surface fa-background-color="'red'"></fa-surface>


    angular.module('faPipeExampleApp', ['famous.angular'])
        .controller('PipeCtrl', ['$scope', '$famous', function($scope, $famous) {
          var EventHandler = $famous['famous/core/EventHandler'];
          $scope.eventHandlerA = new EventHandler();
          $scope.eventHandlerB = new EventHandler();
          // all events received by eventHandlerA wil be piped to eventHandlerB
          var Transitionable = $famous['famous/transitions/Transitionable'];
          $scope.redTrans = new Transitionable([0, 100, 0]);
          // eventHandlerA emits 'myEvent' on click
          $scope.surfaceClick = function() {
          // eventHandlerA pipes all events it receives to eventHandlerB
          // This is an event handler defined on eventHandlerB for handling 'myEvent'
          $scope.eventHandlerB.on('myEvent', function() {
            $scope.redTrans.set([0, 200, 0], {duration: 2000, curve: 'easeInOut'})



Working embedded example:
Warning: If you can't see a working example that probably means plnkr.co is down ... again.
Continue Reading

  • Great series! I'm really enjoying them. Can you also do a review on Meteor?

    • One day I will, currently I'm only reviewing JavaScript used for mobile development.


    On the Availability,ease of use section. I feel like I just read the text from the bottom of my heart that try to tell me when I’m trying to learn this framework for about 1 mouth and just say good bye to my summer time.

    • LNWPOR

      1 month.* sorry for my English.

      • You should try it, things have changed for the better, I just need to update my article. Though starter app is still the best way of learning how this framework works. My advice, go for it.