Introduction the Famo.us Framework

1. FAMO.US
New generation of HTML5 Web Application Framework

2. ABOUT ME
˖ )JOB$IFOBLBꟐ⯕崡
˖ !IJOBCMVF
˖ '3.3
:4'3.3
˖ +4%$
-JHIUJOH5BML
˖ 1)1$POG
8FC$POG
˖ */,*OD1BSUOFS
˖ #PVOUZ)VOUFS$50

3. WHAT IS FAMO.US?
Is it famous? In Taiwan, NO.

4. ABOUT 2 YEARS AGO
HTML5DevConf 2012
http://www.slideshare.net/befamous/html5-devconf-oct-2012-tech-talk

5. Steve Newcomb - CEO Co-funder, Famo.us.

6. WHAT IS FAMO.US?
• A framework for web application
• New way to handle the HTML Elements
• Simplify the DOM render in the browser
• Solve the performance of DOM/CSS and JavaScript
• Solve the difference in browsers
• Easy to develop the web app

7. DEMO PLEASE
http://famous-bird.herokuapp.com/

8. OLD “RENDER”
WebCore in Webkit

9. parsing DOM tree
construction
Render Tree
construction
Layout of
Render Tree
RENDER ENGINE IN WEBKIT
Simplified render
Render Tree
painting

10. NEW “RENDER”
Famo.us Render Tree

11. Physics
Engine
Render
Engine
Rules
Framework
THE FAMO.US WAY
famo.us render engine

12. parsing DOM tree
construction
Render Tree
construction
Layout of
Render Tree
Render Tree
painting
Physics
Engine
Render
Engine
Rules
Framework
WebCore
Famo.us

13. WHY FAMO.US ?
• New “Render Tree” ( an abstract DOM )
• All about JavaScript, no HTML ( Yes, If you do not like to write HTML )
• Modifiers control everything
• Very GOOD performance
• A little bad semantic structure of DOM
• Make sure the render result are all the same in the browsers

14. 「Easy to learn, easy to build, easy to maintain!」
– Jeff Pope, Sencha.

15. HOW ABOUT FAMO.US
• Easy to learn
• Easy to build
• Easy to maintain

16. CHALLENGE
div class=container
div class=animate cube style=width: 100px;
height: 100px; background-color: #3366ff;
span class=textJSDC/span
/div
/div
.cube {
animation-duration: 3s;
animation-iteration-count: infinite;
animation-name: rotate;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(180deg);
}
}
JSDC
JSDC

17. IN FAMO.US
var initialTime = Date.now();
/**
* ( 180 * Math.PI / 180 ) / 3
*/
var Modifier = new Modifier({
transform: function() {
return Transform.rotate(0, Math.PI / 3 *
(Date.now() - initialTime) % 3, 0);
}
});
var Surface = new Surface({
classes: [‘cube’],
content: ‘JSDC’
});
JSDC
JSDC

18. CHALLENGE
div class=container
div class=animate cube1 style=width: 100px;
height: 100px; background-color: #3366ff; transform:
rotateZ(60deg);
div class=animate cube2 style=width: 100px;
height: 100px; background-color: #3366ff; transform:
rotateZ(120deg);
div class=animate cube3 style=width: 100px;
height: 100px; background-color: #3366ff; transform:
rotateZ(240deg);
span class=textJSDC/span
/div
/div
/div
/div
I’m JSDC
a
cube.
$(‘.cube1’).on(‘click’, function(event) {
$(this).css(‘transform’, ‘rotateZ(180deg)’);
});
$(‘.cube3’).on(‘click’, function(event) {
$(this).css(‘transform’, ‘rotateZ(120deg)’);
});
cube.
JSDC
I’m a

19. IN FAMO.US
var Modifier1 = new Modifier({
transform: Transform.rotate(0, Math.PI / 3, 0)
});
var Surface1 = new Surface({
classes: [‘cube’],
content: ‘JSDC’
});
Surface1.on(‘click’, function() {
Modifier1.transformFrom(Transform.rotate(0,
Math.PI, 0));
});
I’m JSDC
a
cube.
cube.
JSDC
I’m a

20. CHALLENGE
div class=container
div class=animate cube1 style=width: 100px;
height: 100px; background-color: #3366ff; transform:
rotateZ(60deg);
span class=textJSDC/span
/div
div class=animate cube2 style=width: 100px;
height: 100px; background-color: #3366ff; transform:
rotateZ(120deg);
span class=textJSDC/span
/div
/div
var $elem = $(‘.cube1’);
$({deg: 0}).animate({deg: 120}, {
duration: 2000,
step: function(now) {
$elem.css(‘transform’, ‘rotateZ(‘ + now + ‘deg)’);
}
}, function(event) {
$(‘.cube2’).css(‘transform’, ‘rotateZ(180deg)’);
});
JSDC
JSDC
JSDC
JSDC

21. IN FAMO.US
JSDC
JSDC
JSDC
JSDC
var Transitionable = new Transitionable([0, Math.PI /
3, 0]);
var Modifier1 = new Modifier({
transform: Transitionable
});
var Surface1 = new Surface({
classes: [‘cube’],
content: ‘JSDC’
});
Transitionable.set(
Transform.multiply(Transitionable.getFinal(),
Transform.rotate(0, Math.PI * 2 / 3, 0)),
2000,
function() {
/* Rotate the Cube 2 */
}
);

22. All JavaScript,
NO HTML.
(If you want)

23. RENDER TREE

24. http://en.wikipedia.org/wiki/File:Person-tree.jpg#mediaviewer/File:Person-tree.jpg

25. IN HTML WAY
div class=container
div class=animate cube style=width: 100px; height: 100px; background-color: #3366ff; transform:
rotateZ(60deg);
span class=textJSDC/span
/div
/div
JSDC
All in DOM

26. IN FAMO.US WAY
JavaScript
var mainContext = Engine.createContext();
var mod = new Modifier({
size: [100, 100],
transform: Transform.rotateZ(60 * Math.PI / 180) /* radians = degrees * (pi/180) */
});
var surf = new Surface({
classes: ['animate', 'cube'],
content: 'span class=textJSDC/span',
properties: {
backgroundColor: ‘#3366ff'
}
});
var view = new View();
view.add(mod).add(surf);
mainContext.add(view);

27. IN FAMO.US WAY
All in DOM
body
/body

28. IN FAMO.US WAY
div class=famous-container
div class=famous-surface animate cube style=width: 100px; height: 100px; -webkit-transform-origin: 0%
0%; -webkit-transform: matrix3d(0.5, 0.866025403784439, 0, 0, -0.866025403784439, 0.5, 0, 0, 0, 0, 1, 0, 0, 0,
0, 1); background-color: #3366ff;”
span class=textJSDC/span
/div
/div
JSDC
After render

29. All JavaScript,
NO HTML.
(If you want)

30. DEMO PLEASE
http://codepen.io/hinablue/pen/itpuf

31. RENDER TREE STRUCTURE
Context
Surface
Context
Modifier
Surface
Context
Modifier
ScrollView
Surface 1 Surface 2

32. RENDER TREE PERFORMANCE
• Keep DOM structure simple and clean
• Less Reflows and Repaints in browser
• Use EventsHandler to handle all the events
• Calculate with JavaScript, paint and animate with CSS3
• Math Library
• Provide a Physics Engine to do more simulate feature

33. RENDER TREE IN DOM
Container
Group
Surfaces
Context
Modifier
BODY

34. REFLOWS REPAINTS
• Very fast Reflows and Repaints
• No Repaints, if not necessary

35. RENDER TREE IN ACTION
Scroller
Reflows
Repaints

36. HOW TO FAMO.US?

37. COOL TOOLS
• Famous/Browserify-Seed
• Famous/generator-famous
• Famous-Webpack-Seed

38. DEMO PLEASE

39. MODIFIER IS KING!

40. MODIFIERS
• Modifier can modify EVERYTHING
• Modifier can modify modifiers with Modifier Chain
• Modifier can modify modifiers and modify his own children of modifier with
Modifier Chain
• Modifier and ModifierChain are little different between Famo.us and famo.us-
Angular

41. MODIFIER IS ATTRIBUTE
Container
Group
Modifier
style=“transform:
matrix(…);”

42. MODIFIER IS WAT !?

43. MODIFIER’S WAT!
• Modifier MUST have a context, like Surface or etc
• Modifier can NOT allocate
• Modifier can only use the Transitionable or the object in roles
• Modifier and StateModifier is MORE different from Famo.us ~0.2.x
• Modifier in the render tree is an RenderNode just the same with others but
“isModifier” property is “true”
• RenderNode usually can get the Modifier, if use “.get()” method

44. DEMO PLEASE
http://jsfiddle.net/arayi/gjdgbrfr/

45. EVENT HANDLER
• Defined your own events
• Use pipe/subscribe to transmit the events
• Not depend on DOM
• Multiple events

46. EVENT IN RENDER TREE
EventsHandler
Subscribe Pipe
EventsHandler

47. DEMO PLEASE
http://codepen.io/hinablue/pen/itpuf

48. VIEW AND WIDGET
• Modifier + Surface
• Modifier + View
• Modifier + Widget
• Modifier + ElementAllocator
• View + View
• View + Widget

49. CREATE YOUR OWN VIEW
Container
Group
Modifier
Surfaces

50. DEMO PLEASE
http://famous.hinablue.me/SlideShow/

51. LIBRARY
• Math
• Transform
• Transition
• Physics Engine
• Device Input
• Element Allocator

52. DEMO PLEASE
http://periodic.famo.us/?source=NL_062314

53. WAT, WAIT, AGAIN !?

54. INTERGRATIONS

55. FAMOUS-*
• Famous-Angular
• Famous-React

56. FAMOUS-ANGULAR
• Not very good documentation (Actually, you can find more in source code)
• You must follow the Famo.us render tree rules.
• `fa-` directive is not really compatible with others.
• `fa-` Events and `ng-` Events can use together, but not recommend.
• Customize directive in Famo.us is too hard to use if you are Angular beginner.

57. DEMO PLEASE
http://goo.gl/5fMRKc

58. FAMOUS-REACT
• Not stable for now

59. DEMO PLEASE
http://famous.github.io/famous-react/

60. MORE INTEGRATION DEMOS
• MeteorJS + famo.us
• Famono
• famous-views for Meteor
• Pete Hunt, famous-react
• Firebase with Famo.us
• Backbone, source code from famous demo
• [Video] famo.us + D3.js
• [Video] Leap Motion

61. FUTURE

62. 中⽂文社群 FAMOUS.TW
https://www.facebook.com/groups/famous.tw

63. THANK YOU

64. LINKS
• Web App Performance, a story of becoming famo.us
• Unlike Facebook, Famo.us thinks HTML5 rocks. Here is why.
• Famo.us Cracks The Secret Of High-Performance Apps By Tapping Another Dimension
• Famo.us Reveals More Details About Its HTML5 Turbo-Charger
• Famo.us describes how it created a magical user interface for the web

65. LINKS
• Viewing Chrome's Paint Cycle
• Minimizing browser reflow
• Rendering: repaint, reflow/relayout, restyle
• REFLOWS REPAINTS: CSS PERFORMANCE MAKING YOUR JAVASCRIPT SLOW?
• Improve Rendering Performance with Chrome Dev Tools
• Scrolling Performance

66. LINKS
• http://codepen.io/befamous/
• https://hackpad.com/Famo.us-links-kPsHMaDFboE
• https://github.com/famous
• http://famous-bird.herokuapp.com/
• http://www.famospace.com
• http://codepen.io/hinablue/pen/itpuf
• https://famo.us/blog/modifiers-affect-subtrees/
• http://periodic.famo.us/
• http://demo.famo.us/lightbox/
• http://demo.famo.us/paper/
• http://famous.hinablue.me/SlideShow/

67. LINKS
• https://github.com/zackbrown/flickrous
• http://thomasstreet.com/famous-angular-google/
• https://github.com/continuata/fa_tutorial1/
• https://github.com/hinablue/famous.tw
• https://github.com/hinablue/famous.tw/issues
• https://www.facebook.com/groups/famous.tw