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

Famo.us - New generation of HTML5 Web Application Framework

3e6a21d5e1bc2d8371d17233338017c0?s=47 Cain Chen
October 12, 2014

Famo.us - New generation of HTML5 Web Application Framework

Introduction the Famo.us Framework

3e6a21d5e1bc2d8371d17233338017c0?s=128

Cain Chen

October 12, 2014
Tweet

Transcript

  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. RENDER ENGINE IN WEBKIT Simplified render parsing DOM tree
 construction

    Render Tree
 construction Layout of
 Render Tree Render Tree
 painting
  10. NEW “RENDER” Famo.us Render Tree

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

    Rules Framework
  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. – Jeff Pope, Sencha. 「Easy to learn, easy to build,

    easy to maintain!」
  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="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
  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="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
  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
  20. 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
  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="text">JSDC</span> </div> </div> JSDC All in DOM
  26. 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
  27. IN FAMO.US WAY <body> </body> All in DOM

  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="text">JSDC</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 EventsHandler Pipe Subscribe

  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 Surfaces Modifier

  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