Famo.us/AngularJs

Pavel Kurnosov

High Performance Animations

What we expect

">

Show stoppers

Can be tricky to do or impossible

Perfomance

What if you can do this with your AngularJs app?

https://github.com/zackbrown/flickrous

What is Famo.us?

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.

What makes Famo.us different?

Famo.us uses matrix3d WebKit transforms on <div> elements with absolute positions rather than using a conventional nested DOM tree in which child elements are positioned relative to their parent elements. Famo.us gains performance by using the hardware-accelerated matrix3d WebKit transforms and avoiding the relatively slow layout flow calculations of a typical HTML5 page.

Small introduction to Famo.us

Famo.us is 100% JavaScript

The Famo.us Render Tree

Famo.us abstracts away DOM management by maintaining a
representation of it in JavaScript called the Render Tree.

Render Tree has two types of nodes

Renderables

Modifiers

such as Surface

Renderables

Renderables are nodes that get drawn to the screen

Famo.us currently supports:

Surface Type	Associated Tag
Surface	`<div>`
ImageSurface	`<img>`
InputSurface	`<input>`
CanvasSurface	`<canvas>`
VideoSurface	`<video>`

Modifiers

Node that is capable of modifying the nodes below it in the Render Tree.

Modifiers are responsible for the layout and visibility
of the Render Tree below them

var modifier = new Modifier({
    transform : Transform.translate(100,200)
});

Views

In Famo.us, views are encapsulations of groups of renderables and modifiers that you wish to hide from the master Render Tree.

Deck

EdgeSwapper

GridLayout

HeaderFooterLayout

RenderController

Scrollview

SequentialLayout

And more.....

Lightbox

Physics transitions

Famo.us has a physics engine that can do a lot of game-like simulation, the least of which is to make animations bounce in a realistic-feeling way by using a spring model to guide the transitions.

Mixed Mode(New Cool Stuff)

Mixed mode, which allows you to render to DOM and WebGL simultaneously

Events

Famo.us has an EventHandler API that allows a user to broadcast, listen for, pipe to, and subscribe from events. Event handlers can broadcast with the emit or trigger method. Downstream handlers can listen for the event with the on method.

The event library comes with convenience modules for conditionally processing events, including event filtering, mapping, and arbitration.

Layouts

So, how integrate Famo.us with AngularJs?

Keep Famo.us perfomance
Support AngularJs way of building app
Support existing AngularJs and Famo.us components

Results

Famo.us way

var myView = new View();
var mySurface = new Surface();
mySurface.setContent("<div>I'm a surface</div>");
myView.add(mySurface);

<fa-view>
  <fa-surface>
    <div>I'm {{data.bound}}</div>
  </fa-surface>
</fa-view>

AngularJs way

What we have

You can integrate and use in angular way famo.us with any angular application
You can use Famo.us performance with angular structure, testability and rich ecosystem of components