Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
FAMOUS
A little about myself
Companies
Famous 
Famo.us is a free, open source JavaScript 
framework that helps you create smooth, 
complex UIs for any screen.
Demo
Demo 2 
http://disrupt.famo.us/ 
periodic402/
History 
1. Famo.us started in 2011 
2. Seed funding in December 2011- 
1.1M$ 
3. March 2013 - 4.1M$ Series A funding 
4. ...
History 
• v0.1 - Initial release on 9 of 
April 
• v0.3.0 - released on 1 of 
October. Still no wrapper. 
• You should us...
Javascript frameworks 
Desktop Mobile
A web app must have at least 40fps in 
interactivity to compete with native application 
and Famo.us solves this by promis...
So how does it work?
It’s 2014 
• http://bennettfeely.com/ 
csscreatures/ 
• http://anthonycalzadilla.com/css3- 
ATAT/index.html 
• http://roxi...
Before 
1. You trigger css based animations 
2. Browser apply hardware 
acceleration and recomputes the 
layout of your pa...
After 
• Famo.us uses CSS matrix3d transform 
and window.requestAnimationFrame 
function 
• It describes the complete layo...
matrix3d 
The matrix3d() CSS function 
describes a 3D transform as 
a 4x4 homogeneous matrix.
matrix3d 
a1 a2 a3 a4 
b1 b2 b3 b4 
c1 c2 c3 c4 
d1 d2 d3 d4
matrix3d defines 
Rotation Scale 
Skew Translation
window.requestAnimationFrame 
The requestAnimationFrame 
function tells the browser that you 
wish to perform an animation...
window.requestAnimationFrame 
The number of callbacks is 
usually 60 times per second, 
but will generally match the 
disp...
window.requestAnimationFrame 
• Optimize concurrent 
animations 
• Not visible tab stops the 
animation 
• Less CPU, GPU, ...
Surface and Modifier 
<div> 
<video> 
<input> 
Surface Modifier 
<img> <canvas>
Famous Physics Framework 
Bodies - represent physical 
objects
Famous Physics Framework 
Constrains - the ways 
objects can be connected
Famous Physics Framework 
Forces - soft constraints
Example 
http://hbsand.com/HappyBoxes/
Integrations 
• Meteor - Famous - https:// 
github.com/raix/Meteor-famono 
• Angular - Famous - https:// 
github.com/Famou...
Check it out 
• http://famo.us/ 
• https://github.com/Famous/physics 
• https://www.npmjs.org/package/generator-famous 
• ...
Questions?
Questions? 
• alexarsh5 at gmail.com 
• http://about.me/alexarsh
Upcoming SlideShare
Loading in …5
×

Famous-il kick-off presentation

366 views

Published on

Intro to Famous

Published in: Engineering
  • Be the first to comment

  • Be the first to like this

Famous-il kick-off presentation

  1. 1. FAMOUS
  2. 2. A little about myself
  3. 3. Companies
  4. 4. Famous Famo.us is a free, open source JavaScript framework that helps you create smooth, complex UIs for any screen.
  5. 5. Demo
  6. 6. Demo 2 http://disrupt.famo.us/ periodic402/
  7. 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. 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. 9. Javascript frameworks Desktop Mobile
  10. 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. 11. So how does it work?
  12. 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. 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. 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. 15. matrix3d The matrix3d() CSS function describes a 3D transform as a 4x4 homogeneous matrix.
  16. 16. matrix3d a1 a2 a3 a4 b1 b2 b3 b4 c1 c2 c3 c4 d1 d2 d3 d4
  17. 17. matrix3d defines Rotation Scale Skew Translation
  18. 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. 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. 20. window.requestAnimationFrame • Optimize concurrent animations • Not visible tab stops the animation • Less CPU, GPU, memory usage
  21. 21. Surface and Modifier <div> <video> <input> Surface Modifier <img> <canvas>
  22. 22. Famous Physics Framework Bodies - represent physical objects
  23. 23. Famous Physics Framework Constrains - the ways objects can be connected
  24. 24. Famous Physics Framework Forces - soft constraints
  25. 25. Example http://hbsand.com/HappyBoxes/
  26. 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. 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. 28. Questions?
  29. 29. Questions? • alexarsh5 at gmail.com • http://about.me/alexarsh

×