Famo.us - New generation of HTML5 Web Application Framework
3 likes944 views
This document provides an overview of Famo.us, a new generation HTML5 web application framework. It discusses Famo.us' render engine and how it improves performance over traditional approaches by utilizing a virtual "render tree". Key aspects of Famo.us like modifiers, events handling, and views/widgets are explained. Examples are provided to illustrate challenges and their solutions in Famo.us. Integration with other frameworks like Angular and tools for building with Famo.us are also mentioned.
![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](https://image.slidesharecdn.com/jsdc2014-famo-141011071121-conversion-gate01/85/Famo-us-New-generation-of-HTML5-Web-Application-Framework-17-320.jpg)
![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](https://image.slidesharecdn.com/jsdc2014-famo-141011071121-conversion-gate01/85/Famo-us-New-generation-of-HTML5-Web-Application-Framework-19-320.jpg)
![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 */
}
);](https://image.slidesharecdn.com/jsdc2014-famo-141011071121-conversion-gate01/85/Famo-us-New-generation-of-HTML5-Web-Application-Framework-21-320.jpg)
![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);](https://image.slidesharecdn.com/jsdc2014-famo-141011071121-conversion-gate01/85/Famo-us-New-generation-of-HTML5-Web-Application-Framework-26-320.jpg)
![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](https://image.slidesharecdn.com/jsdc2014-famo-141011071121-conversion-gate01/85/Famo-us-New-generation-of-HTML5-Web-Application-Framework-60-320.jpg)
Famo.us - New generation of HTML5 Web Application 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
- 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
- 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)
- 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
- 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
- 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
- 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
- 51. LIBRARY • Math • Transform • Transition • Physics Engine • Device Input • Element Allocator
- 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.
- 58. FAMOUS-REACT • Not stable for now
- 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
- 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