Famous

My presentation from the Famous-il kick-off meetup

Transcript

1. FAMOUS
2. A little about myself
3. Companies
4. Famo.us is a free, open source JavaScript framework that helps you create smooth, complex UIs for any screen. Famous
5. Demo
6. Demo 2 http://disrupt.famo.us/ periodic402/
7. 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
8. • 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
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. • http://bennettfeely.com/ csscreatures/ • http://anthonycalzadilla.com/css3- ATAT/index.html • http://roxik.com/cat/ • http://codepen.io/juliangarnier/full/ idhuG/ It’s 2014
13. 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
14. • 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
15. The matrix3d() CSS function describes a 3D transform as a 4x4 homogeneous matrix. matrix3d
16. a1 a2 a3 a4 b1 b2 b3 b4 c1 c2 c3 c4 d1 d2 d3 d4 matrix3d
17. matrix3d defines Rotation Scale Skew Translation
18. 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
19. The number of callbacks is usually 60 times per second, but will generally match the display refresh rate in most web browsers window.requestAnimationFrame
20. • Optimize concurrent animations • Not visible tab stops the animation • Less CPU, GPU, memory usage window.requestAnimationFrame
21. Surface and Modifier <div> <video> <canvas> <img> <input> Surface Modifier
22. Bodies - represent physical objects Famous Physics Framework
23. Constrains - the ways objects can be connected Famous Physics Framework
24. Forces - soft constraints Famous Physics Framework
25. Example http://hbsand.com/HappyBoxes/
26. • 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
27. • 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
28. Questions?
29. • alexarsh5 at gmail.com • http://about.me/alexarsh Questions?