Intro to Famous

1. FAMOUS

2. A little about myself

3. Companies

4. Famous
Famo.us is a free, open source JavaScript
framework that helps you create smooth,
complex UIs for any screen.

5. Demo

6. Demo 2
http://disrupt.famo.us/
periodic402/

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

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

9. Javascript frameworks
Desktop Mobile

10. A web app must have at least 40fps in
interactivity to compete with native application
and Famo.us solves this by promising 60fps

11. So how does it work?

12. It’s 2014
• http://bennettfeely.com/
csscreatures/
• http://anthonycalzadilla.com/css3-
ATAT/index.html
• http://roxik.com/cat/
• http://codepen.io/juliangarnier/full/
idhuG/

13. Before
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

14. After
• 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.

15. matrix3d
The matrix3d() CSS function
describes a 3D transform as
a 4x4 homogeneous matrix.

16. matrix3d
a1 a2 a3 a4
b1 b2 b3 b4
c1 c2 c3 c4
d1 d2 d3 d4

17. matrix3d defines
Rotation Scale
Skew Translation

18. window.requestAnimationFrame
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

19. window.requestAnimationFrame
The number of callbacks is
usually 60 times per second,
but will generally match the
display refresh rate in most
web browsers

20. window.requestAnimationFrame
• Optimize concurrent
animations
• Not visible tab stops the
animation
• Less CPU, GPU, memory
usage

21. Surface and Modifier
<div>
<video>
<input>
Surface Modifier
<img> <canvas>

22. Famous Physics Framework
Bodies - represent physical
objects

23. Famous Physics Framework
Constrains - the ways
objects can be connected

24. Famous Physics Framework
Forces - soft constraints

25. Example
http://hbsand.com/HappyBoxes/

26. Integrations
• Meteor - Famous - https://
github.com/raix/Meteor-famono
• Angular - Famous - https://
github.com/Famous/famous-angular
• Famous - React - https://
github.com/Famous/famous-react

27. Check it out
• 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/

28. Questions?

29. Questions?
• alexarsh5 at gmail.com
• http://about.me/alexarsh