famo.us - new generation of html5 web application framework
DESCRIPTION
Introduction the Famo.us FrameworkTRANSCRIPT
![Page 1: Famo.us - New generation of HTML5 Web Application Framework](https://reader033.vdocument.in/reader033/viewer/2022060118/558bf030d8b42a69778b45d8/html5/thumbnails/1.jpg)
FAMO.USNew generation of HTML5 Web Application Framework
![Page 2: Famo.us - New generation of HTML5 Web Application Framework](https://reader033.vdocument.in/reader033/viewer/2022060118/558bf030d8b42a69778b45d8/html5/thumbnails/2.jpg)
ABOUT ME
![Page 3: Famo.us - New generation of HTML5 Web Application Framework](https://reader033.vdocument.in/reader033/viewer/2022060118/558bf030d8b42a69778b45d8/html5/thumbnails/3.jpg)
WHAT IS FAMO.US?Is it famous? In Taiwan, NO.
![Page 4: Famo.us - New generation of HTML5 Web Application Framework](https://reader033.vdocument.in/reader033/viewer/2022060118/558bf030d8b42a69778b45d8/html5/thumbnails/4.jpg)
ABOUT 2 YEARS AGOHTML5DevConf 2012
http://www.slideshare.net/befamous/html5-devconf-oct-2012-tech-talk
![Page 5: Famo.us - New generation of HTML5 Web Application Framework](https://reader033.vdocument.in/reader033/viewer/2022060118/558bf030d8b42a69778b45d8/html5/thumbnails/5.jpg)
Steve Newcomb - CEO Co-funder, Famo.us.
![Page 6: Famo.us - New generation of HTML5 Web Application Framework](https://reader033.vdocument.in/reader033/viewer/2022060118/558bf030d8b42a69778b45d8/html5/thumbnails/6.jpg)
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
![Page 8: Famo.us - New generation of HTML5 Web Application Framework](https://reader033.vdocument.in/reader033/viewer/2022060118/558bf030d8b42a69778b45d8/html5/thumbnails/8.jpg)
OLD “RENDER”WebCore in Webkit
![Page 9: Famo.us - New generation of HTML5 Web Application Framework](https://reader033.vdocument.in/reader033/viewer/2022060118/558bf030d8b42a69778b45d8/html5/thumbnails/9.jpg)
RENDER ENGINE IN WEBKITSimplified render
parsing DOM tree construction
Render Tree construction
Layout of Render Tree
Render Tree painting
![Page 10: Famo.us - New generation of HTML5 Web Application Framework](https://reader033.vdocument.in/reader033/viewer/2022060118/558bf030d8b42a69778b45d8/html5/thumbnails/10.jpg)
NEW “RENDER”Famo.us Render Tree
![Page 11: Famo.us - New generation of HTML5 Web Application Framework](https://reader033.vdocument.in/reader033/viewer/2022060118/558bf030d8b42a69778b45d8/html5/thumbnails/11.jpg)
THE FAMO.US WAYfamo.us render engine
Physics Engine
Render Engine
Rules Framework
![Page 12: Famo.us - New generation of HTML5 Web Application Framework](https://reader033.vdocument.in/reader033/viewer/2022060118/558bf030d8b42a69778b45d8/html5/thumbnails/12.jpg)
parsing DOM tree construction
Render Tree construction
Layout of Render Tree
Render Tree painting
Physics Engine
Render Engine
Rules Framework
WebCore
Famo.us
![Page 13: Famo.us - New generation of HTML5 Web Application Framework](https://reader033.vdocument.in/reader033/viewer/2022060118/558bf030d8b42a69778b45d8/html5/thumbnails/13.jpg)
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
![Page 14: Famo.us - New generation of HTML5 Web Application Framework](https://reader033.vdocument.in/reader033/viewer/2022060118/558bf030d8b42a69778b45d8/html5/thumbnails/14.jpg)
– Jeff Pope, Sencha.
「Easy to learn, easy to build, easy to maintain!」
![Page 15: Famo.us - New generation of HTML5 Web Application Framework](https://reader033.vdocument.in/reader033/viewer/2022060118/558bf030d8b42a69778b45d8/html5/thumbnails/15.jpg)
HOW ABOUT FAMO.US
• Easy to learn
• Easy to build
• Easy to maintain
![Page 16: Famo.us - New generation of HTML5 Web Application Framework](https://reader033.vdocument.in/reader033/viewer/2022060118/558bf030d8b42a69778b45d8/html5/thumbnails/16.jpg)
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
![Page 17: Famo.us - New generation of HTML5 Web Application Framework](https://reader033.vdocument.in/reader033/viewer/2022060118/558bf030d8b42a69778b45d8/html5/thumbnails/17.jpg)
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
![Page 18: Famo.us - New generation of HTML5 Web Application Framework](https://reader033.vdocument.in/reader033/viewer/2022060118/558bf030d8b42a69778b45d8/html5/thumbnails/18.jpg)
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
.JSD
C
$(‘.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
![Page 19: Famo.us - New generation of HTML5 Web Application Framework](https://reader033.vdocument.in/reader033/viewer/2022060118/558bf030d8b42a69778b45d8/html5/thumbnails/19.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 a
cube
.
I’m a
cube
.
I’m a
cube
.JSD
C
I’m a
cube.I’m a
cube.I’m a
cube.JSDC
![Page 20: Famo.us - New generation of HTML5 Web Application Framework](https://reader033.vdocument.in/reader033/viewer/2022060118/558bf030d8b42a69778b45d8/html5/thumbnails/20.jpg)
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
![Page 21: Famo.us - New generation of HTML5 Web Application Framework](https://reader033.vdocument.in/reader033/viewer/2022060118/558bf030d8b42a69778b45d8/html5/thumbnails/21.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 */ } );
![Page 22: Famo.us - New generation of HTML5 Web Application Framework](https://reader033.vdocument.in/reader033/viewer/2022060118/558bf030d8b42a69778b45d8/html5/thumbnails/22.jpg)
All JavaScript,NO HTML.
(If you want)
![Page 23: Famo.us - New generation of HTML5 Web Application Framework](https://reader033.vdocument.in/reader033/viewer/2022060118/558bf030d8b42a69778b45d8/html5/thumbnails/23.jpg)
RENDER TREE
![Page 24: Famo.us - New generation of HTML5 Web Application Framework](https://reader033.vdocument.in/reader033/viewer/2022060118/558bf030d8b42a69778b45d8/html5/thumbnails/24.jpg)
http://en.wikipedia.org/wiki/File:Person-tree.jpg#mediaviewer/File:Person-tree.jpg
![Page 25: Famo.us - New generation of HTML5 Web Application Framework](https://reader033.vdocument.in/reader033/viewer/2022060118/558bf030d8b42a69778b45d8/html5/thumbnails/25.jpg)
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
![Page 26: Famo.us - New generation of HTML5 Web Application Framework](https://reader033.vdocument.in/reader033/viewer/2022060118/558bf030d8b42a69778b45d8/html5/thumbnails/26.jpg)
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
![Page 27: Famo.us - New generation of HTML5 Web Application Framework](https://reader033.vdocument.in/reader033/viewer/2022060118/558bf030d8b42a69778b45d8/html5/thumbnails/27.jpg)
IN FAMO.US WAY
<body> </body>
All in DOM
![Page 28: Famo.us - New generation of HTML5 Web Application Framework](https://reader033.vdocument.in/reader033/viewer/2022060118/558bf030d8b42a69778b45d8/html5/thumbnails/28.jpg)
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
![Page 29: Famo.us - New generation of HTML5 Web Application Framework](https://reader033.vdocument.in/reader033/viewer/2022060118/558bf030d8b42a69778b45d8/html5/thumbnails/29.jpg)
All JavaScript,NO HTML.
(If you want)
![Page 31: Famo.us - New generation of HTML5 Web Application Framework](https://reader033.vdocument.in/reader033/viewer/2022060118/558bf030d8b42a69778b45d8/html5/thumbnails/31.jpg)
RENDER TREE STRUCTURE
Context
Surface
Context
Modifier
Surface
Context
Modifier
ScrollView
Surface 1 Surface 2
![Page 32: Famo.us - New generation of HTML5 Web Application Framework](https://reader033.vdocument.in/reader033/viewer/2022060118/558bf030d8b42a69778b45d8/html5/thumbnails/32.jpg)
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
![Page 33: Famo.us - New generation of HTML5 Web Application Framework](https://reader033.vdocument.in/reader033/viewer/2022060118/558bf030d8b42a69778b45d8/html5/thumbnails/33.jpg)
RENDER TREE IN DOMContainer
Group
Surfaces
Context
Modifier
BODY
![Page 34: Famo.us - New generation of HTML5 Web Application Framework](https://reader033.vdocument.in/reader033/viewer/2022060118/558bf030d8b42a69778b45d8/html5/thumbnails/34.jpg)
REFLOWS & REPAINTS• Very fast Reflows and Repaints
• No Repaints, if not necessary
![Page 35: Famo.us - New generation of HTML5 Web Application Framework](https://reader033.vdocument.in/reader033/viewer/2022060118/558bf030d8b42a69778b45d8/html5/thumbnails/35.jpg)
RENDER TREE IN ACTION
Scroller
Reflows
Repaints
![Page 36: Famo.us - New generation of HTML5 Web Application Framework](https://reader033.vdocument.in/reader033/viewer/2022060118/558bf030d8b42a69778b45d8/html5/thumbnails/36.jpg)
HOW TO FAMO.US?
![Page 37: Famo.us - New generation of HTML5 Web Application Framework](https://reader033.vdocument.in/reader033/viewer/2022060118/558bf030d8b42a69778b45d8/html5/thumbnails/37.jpg)
COOL TOOLS• Famous/Browserify-Seed
• Famous/generator-famous
• Famous-Webpack-Seed
![Page 38: Famo.us - New generation of HTML5 Web Application Framework](https://reader033.vdocument.in/reader033/viewer/2022060118/558bf030d8b42a69778b45d8/html5/thumbnails/38.jpg)
DEMO PLEASE
![Page 39: Famo.us - New generation of HTML5 Web Application Framework](https://reader033.vdocument.in/reader033/viewer/2022060118/558bf030d8b42a69778b45d8/html5/thumbnails/39.jpg)
MODIFIER IS KING!
![Page 40: Famo.us - New generation of HTML5 Web Application Framework](https://reader033.vdocument.in/reader033/viewer/2022060118/558bf030d8b42a69778b45d8/html5/thumbnails/40.jpg)
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
![Page 41: Famo.us - New generation of HTML5 Web Application Framework](https://reader033.vdocument.in/reader033/viewer/2022060118/558bf030d8b42a69778b45d8/html5/thumbnails/41.jpg)
MODIFIER IS ATTRIBUTEContainer
GroupModifier
style=“transform: matrix(…);”
![Page 42: Famo.us - New generation of HTML5 Web Application Framework](https://reader033.vdocument.in/reader033/viewer/2022060118/558bf030d8b42a69778b45d8/html5/thumbnails/42.jpg)
MODIFIER IS WAT !?
![Page 43: Famo.us - New generation of HTML5 Web Application Framework](https://reader033.vdocument.in/reader033/viewer/2022060118/558bf030d8b42a69778b45d8/html5/thumbnails/43.jpg)
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
![Page 45: Famo.us - New generation of HTML5 Web Application Framework](https://reader033.vdocument.in/reader033/viewer/2022060118/558bf030d8b42a69778b45d8/html5/thumbnails/45.jpg)
EVENT HANDLER• Defined your own events
• Use pipe/subscribe to transmit the events
• Not depend on DOM
• Multiple events
![Page 46: Famo.us - New generation of HTML5 Web Application Framework](https://reader033.vdocument.in/reader033/viewer/2022060118/558bf030d8b42a69778b45d8/html5/thumbnails/46.jpg)
EVENT IN RENDER TREE
EventsHandler
EventsHandler
PipeSubscribe
![Page 48: Famo.us - New generation of HTML5 Web Application Framework](https://reader033.vdocument.in/reader033/viewer/2022060118/558bf030d8b42a69778b45d8/html5/thumbnails/48.jpg)
VIEW AND WIDGET• Modifier + Surface
• Modifier + View
• Modifier + Widget
• Modifier + ElementAllocator
• View + View
• View + Widget
![Page 49: Famo.us - New generation of HTML5 Web Application Framework](https://reader033.vdocument.in/reader033/viewer/2022060118/558bf030d8b42a69778b45d8/html5/thumbnails/49.jpg)
CREATE YOUR OWN VIEWContainer
Group
Surfaces
Modifier
![Page 51: Famo.us - New generation of HTML5 Web Application Framework](https://reader033.vdocument.in/reader033/viewer/2022060118/558bf030d8b42a69778b45d8/html5/thumbnails/51.jpg)
LIBRARY• Math
• Transform
• Transition
• Physics Engine
• Device Input
• Element Allocator
![Page 53: Famo.us - New generation of HTML5 Web Application Framework](https://reader033.vdocument.in/reader033/viewer/2022060118/558bf030d8b42a69778b45d8/html5/thumbnails/53.jpg)
WAT, WAIT, AGAIN !?
![Page 54: Famo.us - New generation of HTML5 Web Application Framework](https://reader033.vdocument.in/reader033/viewer/2022060118/558bf030d8b42a69778b45d8/html5/thumbnails/54.jpg)
INTERGRATIONS
![Page 55: Famo.us - New generation of HTML5 Web Application Framework](https://reader033.vdocument.in/reader033/viewer/2022060118/558bf030d8b42a69778b45d8/html5/thumbnails/55.jpg)
FAMOUS-*• Famous-Angular
• Famous-React
![Page 56: Famo.us - New generation of HTML5 Web Application Framework](https://reader033.vdocument.in/reader033/viewer/2022060118/558bf030d8b42a69778b45d8/html5/thumbnails/56.jpg)
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.
![Page 58: Famo.us - New generation of HTML5 Web Application Framework](https://reader033.vdocument.in/reader033/viewer/2022060118/558bf030d8b42a69778b45d8/html5/thumbnails/58.jpg)
FAMOUS-REACT• Not stable for now
![Page 60: Famo.us - New generation of HTML5 Web Application Framework](https://reader033.vdocument.in/reader033/viewer/2022060118/558bf030d8b42a69778b45d8/html5/thumbnails/60.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
![Page 61: Famo.us - New generation of HTML5 Web Application Framework](https://reader033.vdocument.in/reader033/viewer/2022060118/558bf030d8b42a69778b45d8/html5/thumbnails/61.jpg)
FUTURE
![Page 63: Famo.us - New generation of HTML5 Web Application Framework](https://reader033.vdocument.in/reader033/viewer/2022060118/558bf030d8b42a69778b45d8/html5/thumbnails/63.jpg)
THANK YOU
![Page 64: Famo.us - New generation of HTML5 Web Application Framework](https://reader033.vdocument.in/reader033/viewer/2022060118/558bf030d8b42a69778b45d8/html5/thumbnails/64.jpg)
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
![Page 65: Famo.us - New generation of HTML5 Web Application Framework](https://reader033.vdocument.in/reader033/viewer/2022060118/558bf030d8b42a69778b45d8/html5/thumbnails/65.jpg)
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
![Page 66: Famo.us - New generation of HTML5 Web Application Framework](https://reader033.vdocument.in/reader033/viewer/2022060118/558bf030d8b42a69778b45d8/html5/thumbnails/66.jpg)
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/
![Page 67: Famo.us - New generation of HTML5 Web Application Framework](https://reader033.vdocument.in/reader033/viewer/2022060118/558bf030d8b42a69778b45d8/html5/thumbnails/67.jpg)
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