famous-il kick-off presentation
DESCRIPTION
Intro to FamousTRANSCRIPT
![Page 1: Famous-il kick-off presentation](https://reader030.vdocuments.us/reader030/viewer/2022020218/559c8a841a28ab87098b45e9/html5/thumbnails/1.jpg)
FAMOUS
![Page 2: Famous-il kick-off presentation](https://reader030.vdocuments.us/reader030/viewer/2022020218/559c8a841a28ab87098b45e9/html5/thumbnails/2.jpg)
A little about myself
![Page 3: Famous-il kick-off presentation](https://reader030.vdocuments.us/reader030/viewer/2022020218/559c8a841a28ab87098b45e9/html5/thumbnails/3.jpg)
Companies
![Page 4: Famous-il kick-off presentation](https://reader030.vdocuments.us/reader030/viewer/2022020218/559c8a841a28ab87098b45e9/html5/thumbnails/4.jpg)
Famo.us is a free, open source JavaScript framework that helps you create smooth,
complex UIs for any screen.
Famous
![Page 5: Famous-il kick-off presentation](https://reader030.vdocuments.us/reader030/viewer/2022020218/559c8a841a28ab87098b45e9/html5/thumbnails/5.jpg)
Demo
![Page 7: Famous-il kick-off presentation](https://reader030.vdocuments.us/reader030/viewer/2022020218/559c8a841a28ab87098b45e9/html5/thumbnails/7.jpg)
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
![Page 8: Famous-il kick-off presentation](https://reader030.vdocuments.us/reader030/viewer/2022020218/559c8a841a28ab87098b45e9/html5/thumbnails/8.jpg)
• 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
![Page 9: Famous-il kick-off presentation](https://reader030.vdocuments.us/reader030/viewer/2022020218/559c8a841a28ab87098b45e9/html5/thumbnails/9.jpg)
Javascript frameworksDesktop Mobile
![Page 10: Famous-il kick-off presentation](https://reader030.vdocuments.us/reader030/viewer/2022020218/559c8a841a28ab87098b45e9/html5/thumbnails/10.jpg)
A web app must have at least 40fps in interactivity to compete with native application and Famo.us solves this by promising 60fps
![Page 11: Famous-il kick-off presentation](https://reader030.vdocuments.us/reader030/viewer/2022020218/559c8a841a28ab87098b45e9/html5/thumbnails/11.jpg)
So how does it work?
![Page 12: Famous-il kick-off presentation](https://reader030.vdocuments.us/reader030/viewer/2022020218/559c8a841a28ab87098b45e9/html5/thumbnails/12.jpg)
• http://bennettfeely.com/csscreatures/
• http://anthonycalzadilla.com/css3-ATAT/index.html
• http://roxik.com/cat/ • http://codepen.io/juliangarnier/full/
idhuG/
It’s 2014
![Page 13: Famous-il kick-off presentation](https://reader030.vdocuments.us/reader030/viewer/2022020218/559c8a841a28ab87098b45e9/html5/thumbnails/13.jpg)
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
![Page 14: Famous-il kick-off presentation](https://reader030.vdocuments.us/reader030/viewer/2022020218/559c8a841a28ab87098b45e9/html5/thumbnails/14.jpg)
• 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
![Page 15: Famous-il kick-off presentation](https://reader030.vdocuments.us/reader030/viewer/2022020218/559c8a841a28ab87098b45e9/html5/thumbnails/15.jpg)
The matrix3d() CSS function describes a 3D transform as a 4x4 homogeneous matrix.
matrix3d
![Page 16: Famous-il kick-off presentation](https://reader030.vdocuments.us/reader030/viewer/2022020218/559c8a841a28ab87098b45e9/html5/thumbnails/16.jpg)
a1a2a3a4 b1b2b3b4 c1c2c3c4 d1d2d3d4
matrix3d
![Page 17: Famous-il kick-off presentation](https://reader030.vdocuments.us/reader030/viewer/2022020218/559c8a841a28ab87098b45e9/html5/thumbnails/17.jpg)
matrix3d definesRotation Scale
Skew Translation
![Page 18: Famous-il kick-off presentation](https://reader030.vdocuments.us/reader030/viewer/2022020218/559c8a841a28ab87098b45e9/html5/thumbnails/18.jpg)
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
![Page 19: Famous-il kick-off presentation](https://reader030.vdocuments.us/reader030/viewer/2022020218/559c8a841a28ab87098b45e9/html5/thumbnails/19.jpg)
The number of callbacks is usually 60 times per second, but will generally match the display refresh rate in most web browsers
window.requestAnimationFrame
![Page 20: Famous-il kick-off presentation](https://reader030.vdocuments.us/reader030/viewer/2022020218/559c8a841a28ab87098b45e9/html5/thumbnails/20.jpg)
• Optimize concurrent animations
• Not visible tab stops the animation
• Less CPU, GPU, memory usage
window.requestAnimationFrame
![Page 21: Famous-il kick-off presentation](https://reader030.vdocuments.us/reader030/viewer/2022020218/559c8a841a28ab87098b45e9/html5/thumbnails/21.jpg)
Surface and Modifier
<div><video>
<canvas><img>
<input>
Surface Modifier
![Page 22: Famous-il kick-off presentation](https://reader030.vdocuments.us/reader030/viewer/2022020218/559c8a841a28ab87098b45e9/html5/thumbnails/22.jpg)
Bodies - represent physical objects
Famous Physics Framework
![Page 23: Famous-il kick-off presentation](https://reader030.vdocuments.us/reader030/viewer/2022020218/559c8a841a28ab87098b45e9/html5/thumbnails/23.jpg)
Constrains - the ways objects can be connected
Famous Physics Framework
![Page 24: Famous-il kick-off presentation](https://reader030.vdocuments.us/reader030/viewer/2022020218/559c8a841a28ab87098b45e9/html5/thumbnails/24.jpg)
Forces - soft constraints
Famous Physics Framework
![Page 25: Famous-il kick-off presentation](https://reader030.vdocuments.us/reader030/viewer/2022020218/559c8a841a28ab87098b45e9/html5/thumbnails/25.jpg)
Example
http://hbsand.com/HappyBoxes/
![Page 26: Famous-il kick-off presentation](https://reader030.vdocuments.us/reader030/viewer/2022020218/559c8a841a28ab87098b45e9/html5/thumbnails/26.jpg)
• 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
![Page 27: Famous-il kick-off presentation](https://reader030.vdocuments.us/reader030/viewer/2022020218/559c8a841a28ab87098b45e9/html5/thumbnails/27.jpg)
• 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
![Page 28: Famous-il kick-off presentation](https://reader030.vdocuments.us/reader030/viewer/2022020218/559c8a841a28ab87098b45e9/html5/thumbnails/28.jpg)
Questions?