Best HTML5 Mobile App Frameworks: Famo.us

Written by on April 7, 2015

Best HTML5 Mobile App Frameworks: Famo.us

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, you need further clarification, something is not working or you have a request for another Ionic post? Furthermore, leave me a comment below if you don't like something about this blog, if something is bugging you, don't like how I'm doing stuff here. Feel free to comment below, subscribe to my blog, mail me to dragan.gaic@gmail.com. Thanks and have a nice day!

Link
Examples
GitHub Repo

Intro

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

HTML:

<!doctype html>
<html lang="en">
<head>
  <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>
</head>
<body ng-app="faPipeExampleApp">
  <fa-app ng-controller="PipeCtrl">
    <fa-view>
      <fa-modifier fa-size="[100, 100]">
          <fa-surface class="blue-surface" fa-background-color="'blue'" fa-click="surfaceClick()">Click me!</fa-surface>
        </fa-modifier>
    </fa-view>
    <fa-view fa-pipe-from="eventHandlerB">
      <fa-modifier fa-size="[100, 100]" fa-translate="redTrans.get()">
          <fa-surface fa-background-color="'red'"></fa-surface>
      </fa-modifier>
    </fa-view>
  </fa-app>
</body>
</html>

JavaScript:

    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();
          $scope.eventHandlerA.pipe($scope.eventHandlerB); 
          // 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() {
            $scope.eventHandlerA.emit('myEvent');
          };
          
          // 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'})
          });

      }]);

Example:

Demo

Working embedded example:


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

Continue Reading

Categories

5 thoughts on “Best HTML5 Mobile App Frameworks: Famo.us”

  1. 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.

Leave a Reply