Famo.us - New generation of HTML5 Web Application Framework

Slide 1

Slide 1 text

FAMO.US New generation of HTML5 Web Application Framework

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

OLD “RENDER” WebCore in Webkit

Slide 9

Slide 9 text

RENDER ENGINE IN WEBKIT Simpliﬁed render parsing DOM tree  construction Render Tree  construction Layout of  Render Tree Render Tree  painting

Slide 10

Slide 10 text

NEW “RENDER” Famo.us Render Tree

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

CHALLENGE

JSDC

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

CHALLENGE

JSDC

Slide 21

Slide 21 text

IN FAMO.US JSDC JSDC JSDC JSDC var Transitionable = new Transitionable([0, Math.PI / 3, 0]); var Modiﬁer1 = new Modiﬁer({ 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 */ } );

Slide 22

Slide 22 text

All JavaScript, NO HTML. (If you want)

Slide 23

Slide 23 text

RENDER TREE

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

IN HTML WAY

JSDC

JSDC All in DOM

Slide 26

Slide 26 text

IN FAMO.US WAY var mainContext = Engine.createContext(); var mod = new Modiﬁer({ 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

Slide 27

Slide 27 text

IN FAMO.US WAY All in DOM

Slide 28

Slide 28 text

IN FAMO.US WAY

JSDC

JSDC After render

Slide 29

Slide 29 text

All JavaScript, NO HTML. (If you want)

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

RENDER TREE STRUCTURE Context Surface Context Modiﬁer Surface Context Modiﬁer ScrollView Surface 1 Surface 2

Slide 32

Slide 32 text

RENDER TREE PERFORMANCE • Keep DOM structure simple and clean • Less Reﬂows 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

Slide 33

Slide 33 text

RENDER TREE IN DOM Container Group Surfaces Context Modiﬁer BODY

Slide 34

Slide 34 text

REFLOWS & REPAINTS • Very fast Reﬂows and Repaints • No Repaints, if not necessary

Slide 35

Slide 35 text

RENDER TREE IN ACTION Scroller Reﬂows Repaints

Slide 36

Slide 36 text

HOW TO FAMO.US?

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

DEMO PLEASE

Slide 39

Slide 39 text

MODIFIER IS KING!

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

MODIFIER IS ATTRIBUTE Container Group Modiﬁer style=“transform: matrix(…);”

Slide 42

Slide 42 text

MODIFIER IS WAT !?

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

EVENT HANDLER • Deﬁned your own events • Use pipe/subscribe to transmit the events • Not depend on DOM • Multiple events

Slide 46

Slide 46 text

EVENT IN RENDER TREE EventsHandler EventsHandler Pipe Subscribe

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

CREATE YOUR OWN VIEW Container Group Surfaces Modiﬁer

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

WAT, WAIT, AGAIN !?

Slide 54

Slide 54 text

INTERGRATIONS

Slide 55

Slide 55 text

FAMOUS-* • Famous-Angular • Famous-React

Slide 56

Slide 56 text

FAMOUS-ANGULAR • Not very good documentation (Actually, you can ﬁnd more in source code) • You must follow the Famo.us render tree rules. • `

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

FAMOUS-REACT • Not stable for now

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

FUTURE

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

THANK YOU

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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/modiﬁers-affect-subtrees/ • http://periodic.famo.us/ • http://demo.famo.us/lightbox/ • http://demo.famo.us/paper/ • http://famous.hinablue.me/SlideShow/

Slide 67

Slide 67 text

LINKS • https://github.com/zackbrown/ﬂickrous • 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