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

Famo.us - New generation of HTML5 Web Application Framework

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. FAMO.US
    New generation of HTML5 Web Application Framework

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

  8. OLD “RENDER”
    WebCore in Webkit

    View full-size slide

  9. RENDER ENGINE IN WEBKIT
    Simplified render
    parsing
    DOM tree

    construction
    Render Tree

    construction
    Layout of

    Render Tree
    Render Tree

    painting

    View full-size slide

  10. NEW “RENDER”
    Famo.us Render Tree

    View full-size slide

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

    View full-size slide

  12. parsing
    DOM tree

    construction
    Render Tree

    construction
    Layout of

    Render Tree
    Render Tree

    painting
    Physics
    Engine
    Render
    Engine
    Rules
    Framework
    WebCore
    Famo.us

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  16. CHALLENGE


    JSDC


    .cube {
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-name: rotate;
    }
    @keyframes rotate {
    from {
    transform: rotate(0deg);
    }
    to {
    transform: rotate(180deg);
    }
    }
    JSDC
    JSDC

    View full-size slide

  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

    View full-size slide

  18. CHALLENGE




    JSDC




    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

    View full-size slide

  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
    a
    cube.
    I’m
    a
    cube.
    I’m
    a
    cube.
    JSDC
    I’m
    a
    cube.
    I’m
    a
    cube.
    I’m
    a
    cube.
    JSDC

    View full-size slide

  20. CHALLENGE


    JSDC


    JSDC


    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

    View full-size slide

  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 */
    }
    );

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  24. IN HTML WAY


    JSDC


    JSDC
    All in DOM

    View full-size slide

  25. 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: 'JSDC',
    properties: {
    backgroundColor: ‘#3366ff'
    }
    });
    var view = new View();
    view.add(mod).add(surf);
    mainContext.add(view);
    JavaScript

    View full-size slide

  26. IN FAMO.US WAY


    All in DOM

    View full-size slide

  27. IN FAMO.US WAY

    JSDC


    JSDC
    After render

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  31. 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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  34. RENDER TREE IN ACTION
    Scroller
    Reflows
    Repaints

    View full-size slide

  35. HOW TO FAMO.US?

    View full-size slide

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

    View full-size slide

  37. MODIFIER IS KING!

    View full-size slide

  38. 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

    View full-size slide

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

    View full-size slide

  40. MODIFIER IS WAT !?

    View full-size slide

  41. 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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  44. EVENT IN RENDER TREE
    EventsHandler
    EventsHandler
    Pipe
    Subscribe

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  47. CREATE YOUR OWN VIEW
    Container
    Group
    Surfaces
    Modifier

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  51. WAT, WAIT, AGAIN !?

    View full-size slide

  52. INTERGRATIONS

    View full-size slide

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

    View full-size slide

  54. FAMOUS-ANGULAR
    • Not very good documentation (Actually, you can find more in source code)
    • You must follow the Famo.us render tree rules.
    • `• `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.

    View full-size slide

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

    View full-size slide

  56. FAMOUS-REACT
    • Not stable for now

    View full-size slide

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

    View full-size slide

  58. 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

    View full-size slide

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

    View full-size slide

  60. 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

    View full-size slide

  61. 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

    View full-size slide

  62. 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/

    View full-size slide

  63. 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

    View full-size slide