Embed Size (px)
DESCRIPTION
Intro to Famous
Citation preview
FAMOUS
A little about myself
Companies
Famo.us is a free, open source JavaScript framework that helps you create smooth,
complex UIs for any screen.
Famous
Demo
1. Famo.us started in 2011 2. Seed funding in December 2011-
1.1M$ 3. March 2013 - 4.1M$ Series A funding 4. Official release on 9.4.2014 5. August 2014 - 25M$ Series B funding 6. Founder and CEO - Steve Newcomb
History
• v0.1 - Initial release on 9 of April
• v0.3.0 - released on 1 of October. Still no wrapper.
• You should use Cordova, Trigger.io or any other
History
Javascript frameworksDesktop Mobile
A web app must have at least 40fps in interactivity to compete with native application and Famo.us solves this by promising 60fps
So how does it work?
• http://bennettfeely.com/csscreatures/
• http://anthonycalzadilla.com/css3-ATAT/index.html
• http://roxik.com/cat/ • http://codepen.io/juliangarnier/full/
idhuG/
It’s 2014
1. You trigger css based animations 2. Browser apply hardware
acceleration and recomputes the layout of your page from the DOM change
3. You see inconsistent and slow performance
Before
• Famo.us uses CSS matrix3d transform and window.requestAnimationFrame function
• It describes the complete layout and animation of your app in a way that’s hardware accelerated with consistent performance.
After
The matrix3d() CSS function describes a 3D transform as a 4x4 homogeneous matrix.
matrix3d
a1a2a3a4 b1b2b3b4 c1c2c3c4 d1d2d3d4
matrix3d
matrix3d definesRotation Scale
Skew Translation
The requestAnimationFrame function tells the browser that you wish to perform an animation and requests that the browser call a specified function to update an animation before the next repaint
window.requestAnimationFrame
The number of callbacks is usually 60 times per second, but will generally match the display refresh rate in most web browsers
window.requestAnimationFrame
• Optimize concurrent animations
• Not visible tab stops the animation
• Less CPU, GPU, memory usage
window.requestAnimationFrame
Surface and Modifier
<div><video>
<canvas><img>
<input>
Surface Modifier
Bodies - represent physical objects
Famous Physics Framework
Constrains - the ways objects can be connected
Famous Physics Framework
Forces - soft constraints
Famous Physics Framework
Example
http://hbsand.com/HappyBoxes/
• Meteor - Famous - https://github.com/raix/Meteor-famono
• Angular - Famous - https://github.com/Famous/famous-angular
• Famous - React - https://github.com/Famous/famous-react
Integrations
• http://famo.us/ • https://github.com/Famous/physics • https://www.npmjs.org/package/generator-famous • http://schonne.com/famous/ • http://leaverou.github.io/animatable/ • http://leandigo.github.io/leanorama/ • http://trigger.io/cross-platform-application-
development-blog/2014/08/12/wrapping-famo-us-with-trigger-io-for-silky-smooth-ui-animations-at-60fps/
Check it out
Questions?
