Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Famo.us - New generation of HTML5 Web Applicati...

Cain Chen
October 12, 2014

Famo.us - New generation of HTML5 Web Application Framework

Introduction the Famo.us Framework

Cain Chen

October 12, 2014
Tweet

More Decks by Cain Chen

Other Decks in Technology

Transcript

  1. ABOUT ME ˖ )JOB$IFOBLBꟐ⯕崡 ˖ !IJOBCMVF ˖ '"3.&3 :&4'"3.&3 ˖

    +4%$ -JHIUJOH5BML ˖ 1)1$POG 8FC$POG ˖ */,*OD1BSUOFS ˖ #PVOUZ)VOUFS$50
  2. 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
  3. RENDER ENGINE IN WEBKIT Simplified render parsing DOM tree
 construction

    Render Tree
 construction Layout of
 Render Tree Render Tree
 painting
  4. parsing DOM tree
 construction Render Tree
 construction Layout of
 Render

    Tree Render Tree
 painting Physics Engine Render Engine Rules Framework WebCore Famo.us
  5. 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
  6. CHALLENGE <div class="container"> <div class="animate cube" style="width: 100px; height: 100px;

    background-color: #3366ff;"> <span class="text">JSDC</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
  7. 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
  8. 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="text">JSDC</span> </div> </div> </div> </div> I’m a cube. I’m a cube. I’m a cube. JSDC $(‘.cube1’).on(‘click’, function(event) { $(this).css(‘transform’, ‘rotateZ(180deg)’); }); $(‘.cube3’).on(‘click’, function(event) { $(this).css(‘transform’, ‘rotateZ(120deg)’); }); I’m a cube. I’m a cube. I’m a cube. JSDC
  9. 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 a cube. I’m a cube. I’m a cube. JSDC I’m a cube. I’m a cube. I’m a cube. JSDC
  10. CHALLENGE <div class="container"> <div class="animate cube1" style="width: 100px; height: 100px;

    background-color: #3366ff; transform: rotateZ(60deg);"> <span class="text">JSDC</span> </div> <div class="animate cube2" style="width: 100px; height: 100px; background-color: #3366ff; transform: rotateZ(120deg);"> <span class="text">JSDC</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
  11. 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 */ } );
  12. IN HTML WAY <div class="container"> <div class="animate cube" style="width: 100px;

    height: 100px; background-color: #3366ff; transform: rotateZ(60deg);"> <span class="text">JSDC</span> </div> </div> JSDC All in DOM
  13. IN FAMO.US WAY 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="text">JSDC</span>', properties: { backgroundColor: ‘#3366ff' } }); var view = new View(); view.add(mod).add(surf); mainContext.add(view); JavaScript
  14. 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="text">JSDC</span> </div> </div> JSDC After render
  15. 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
  16. 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
  17. 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
  18. EVENT HANDLER • Defined your own events • Use pipe/subscribe

    to transmit the events • Not depend on DOM • Multiple events
  19. VIEW AND WIDGET • Modifier + Surface • Modifier +

    View • Modifier + Widget • Modifier + ElementAllocator • View + View • View + Widget
  20. 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.
  21. 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
  22. 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
  23. 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
  24. 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/