beta signup                                         www.famo.us            Web App Performance         the story of becomi...
the story of becoming famo.us         a lot of things didn’t              make sensefamous    .                           ...
the story of becoming famo.us           about 2 years ago, we got funded to build                    consumer identity app...
the story of becoming famo.us            it had a very ambitious user interfacefamous    .                                ...
the story of becoming famo.us                    we decided to build it in HTML5famous    .                               ...
the story of becoming famo.us          it needed to work on lots of devices including                     iPad1 + iPad2 + ...
the story of becoming famo.us         it needed to work on iOS and Android as a web                 app and inside a nativ...
the story of becoming famo.us            it needed to handle many inputs including          touch, keyboard, mouse and ges...
the story of becoming famo.us                     we started knowing nothingfamous    .                                   ...
the story of becoming famo.us         we hit every performance issue                 you can imaginefamous    .           ...
the story of becoming famo.us                        we battled through many                           false promissesfamo...
the story of becoming famo.us          we went through many         frustrating experiencesfamous    .                    ...
the story of becoming famo.us                       we learned a lot of thingsfamous    .                                 ...
the story of becoming famo.us            we’d like to share our journey with youfamous    .                               ...
our first big realization                   CSS3 can completely ruin your                          performancefamous    .  ...
examples         • -webkit-box-shadow: 60px black;         • -webkit-transform-style: preserve-3D;         • -webkit-text-...
our first big realization                 there are basically no debug tools to                            find these things...
our first big realization                  this causes discomfort between                      designers and engineersfamou...
the impact               The realization had a dramatic impacts          confusing       • we catalogued all of these quir...
reading material            Y U NO LINKSfamous    .                       page 20
our second big realization               Learning to code for computers first has                     masked bad coding hab...
our second big realization                We had to relearn many things to                 optimize our code for mobile   ...
our second big realization               The realization had a dramatic impacts         interesting      • we learned the ...
reading material            Y U NO LINKSfamous    .                       page 24
our fourth big realization                       Safari and Chrome                    are not created equallyfamous    .  ...
some examples              • webkit implementation              •   bezier curves and preserve-3D              • version d...
the real work began               The realization had a dramatic impacts             sucked     • we had to catalogue the ...
reading material            Y U NO LINKSfamous    .                       page 28
our fifth big realization                       a lot of HTML5 components don’t work                            or don’t wo...
some examples                           • cache manifest                           • android touch events                 ...
the real work work began              The realization had a dramatic impacts         frustrating   • we catalogued the whi...
our sixth big realization                 a lot of our favorite libraries were                                uselessfamou...
some examples             • jQuery Animations             • jQuery Plugins             • jQuery             • Isotope     ...
the impact              The realization had a dramatic impacts         frustrating   • we catalogued the which ones       ...
DOM Manipulation Tricks               let’s try some exotic DOM manipulation                              techniquesfamous...
some examples         advanced DOM manipulation techniques         • DOM object re-use         • 3 panels method         •...
GPU Tricks         let’s try some exotic frame rate                     techniquesfamous    .                             ...
some examples         Example of advanced DOM manipulation         techniques         • Request animation frame         • ...
impacts on effort         In many ways dealing with the GPU is like         working with a magical black box that you     ...
reading material            Y U NO LINKSfamous    .                       page 40
success (kind of)          1 year later (March 2011)famous    .                                 page 41
the story of becoming famo.us         a lot of things didn’t              make sense                                  JANK...
a fundamental question         we were able to make it performant, but at what price?famous    .                          ...
the reality check         Coding for mobile apps is much less forgiving that         coding for websites         • perform...
what was the real solution?         why not just build everything in webGL or Canvas?famous    .                          ...
what do you lose with WebGL or Canvas?                Event handling at the object level                Portability of exi...
what was the real solution?               there wasn’t anything specifically designed for apps         documents       apps...
what was the real problem?         browsers were built to render documents and not appsfamous    .                        ...
understanding WebKit                                  Simplified Render                    DOM tree        Render tree     ...
understanding WebKit                       designed to render documents                    DOM tree      Render tree     L...
understanding WebKit         Physics    Render      Rules         Engine     Engine   Framework                   famo.usf...
understanding WebKit                          modify the inefficient parts                    DOM tree           Render tre...
building the render engine                 • Energy Module (defines and instantiates energy                    agents)     ...
how does it work?              ignore the CSS3 transition              primitives              compute the transforms in o...
DEMO PLEASE           Y U NO SHOW MEfamous    .                       page 55
Physics Engine                             use kinematic actors to effect                             motion and user inte...
DEMO PLEASE           Y U NO SHOW MEfamous    .                       page 57
step 3           let’s build our own frameworkfamous    .                                      page 58
specifically             manage all of the input mechanisms             like touch, mouse, keyboard and             gesture...
DEMO PLEASE           Y U NO SHOW MEfamous    .                       page 60
the realization             the engine and the framework were            more important to us than the productfamous    . ...
the framework              scaffolds, ui and ux components and              all the things you need to build apps         ...
the FAQs             Are you planning on being full stack or             doing just one thing well and integrating        ...
how to get involved         beta     @befamous      jobs@famo.usfamous    .                                           page...
links         CSS 3D Transforms         https://www.webkit.org/blog/386/3d-transforms/         http://www.webkit.org/blog-...
links         Documentation         https://developer.mozilla.org/en-US/docs/CSS/transform?redirectlocale=en-US&redirectsl...
links         Other CSS Issues         http://nerds.airbnb.com/box-shadows-are-expensive-to-paint         Interesting Disc...
links         Appcache and storage         http://www.alistapart.com/articles/application-cache-is-a-douchebag/         ht...
Upcoming SlideShare
Loading in …5
×

HTML5 DevConf Oct 2012 Tech Talk

21,102
-1

Published on

Steve Newcomb's deck from the tech talk he gave on the second day of HTML5DevConf in San Francisco.
Sign up for the famo.us beta at http://famo.us/

Published in: Technology
3 Comments
49 Likes
Statistics
Notes
  • This is the beginning of one of the biggest gold rush's in the web's history. probably the biggest yet. within a year, every site will be clamoring to have their site redesigned in the new 3D animated swipey famo.us powered style--dare I call it even a 'style.'

    The leaders of every single niche will face scrappy competitors making a version of what they already have powered by famo.us, and a massive exchange in power will happen. I wouldn't be surprised if google and facebook killers emerge out of this. mark my words. you heard it here first.

    Let's rally to give Steve and Mark all the help they can get to make their product awesome. We need to build a list of the top design idioms to make templates for, and organize around them on github so we're not all doing the same thing unnecessarily. Here's a publicly editable spreadsheet to compile this list:

    https://docs.google.com/spread...

    ps. Meteor.com's product will also be big. It won't become big as quickly, but in the long 'realtime by default products' will be nearly equal in impact. The mashup of famo.us and meteor to make a globally applicable product will grow to be worth billions quicker than any web application to this date. The person who figures out what that product is will win bigger than the creators of meteor and famo.us combined--because at the end of the day, the product for consumers will make more money than a developer product; and that's exactly why they called this product 'Famous'--because someone is going to become rich and famous making a product on top of it. Ultimately, lots of people will. Well played, Steve! You deserve every penny you're working to raise right now, and at the highest valuation. Hopefully investors are smart enough to realize this--they're going to have to be a lot smarter than the investors/judges at Techcrunch Disrupt this fall (check my comments on that techcrunch article). Though it actually doesn't take that much smarts/experience to get the picture here. Anyway, it's obvious to us developers. I'd love to be part of what you're doing in any way possible. You and Marc are ass-kickers. good stuff.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • links start on slide 65
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Y U NO LINKS ?
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
21,102
On Slideshare
0
From Embeds
0
Number of Embeds
15
Actions
Shares
0
Downloads
281
Comments
3
Likes
49
Embeds 0
No embeds

No notes for slide

HTML5 DevConf Oct 2012 Tech Talk

  1. 1. beta signup www.famo.us Web App Performance the story of becoming famo.us @stevenewcombfamous . page 1
  2. 2. the story of becoming famo.us a lot of things didn’t make sensefamous . page 2
  3. 3. the story of becoming famo.us about 2 years ago, we got funded to build consumer identity appfamous . page 3
  4. 4. the story of becoming famo.us it had a very ambitious user interfacefamous . page 4
  5. 5. the story of becoming famo.us we decided to build it in HTML5famous . page 5
  6. 6. the story of becoming famo.us it needed to work on lots of devices including iPad1 + iPad2 + iPad3 phones, tablets, pcs and game consolesfamous . page 6
  7. 7. the story of becoming famo.us it needed to work on iOS and Android as a web app and inside a native wrapperfamous . page 7
  8. 8. the story of becoming famo.us it needed to handle many inputs including touch, keyboard, mouse and gesturing systemsfamous . page 8
  9. 9. the story of becoming famo.us we started knowing nothingfamous . page 9
  10. 10. the story of becoming famo.us we hit every performance issue you can imaginefamous . page 10
  11. 11. the story of becoming famo.us we battled through many false promissesfamous . page 11
  12. 12. the story of becoming famo.us we went through many frustrating experiencesfamous . page 12
  13. 13. the story of becoming famo.us we learned a lot of thingsfamous . page 13
  14. 14. the story of becoming famo.us we’d like to share our journey with youfamous . page 14
  15. 15. our first big realization CSS3 can completely ruin your performancefamous . page 15
  16. 16. examples • -webkit-box-shadow: 60px black; • -webkit-transform-style: preserve-3D; • -webkit-text-stroke: 1px transparent; • -webkit-transform: translateZ(0); • -webkit-transition: all 1s ease-in-out; • @keyframes mymove and 50 more things...famous . page 16
  17. 17. our first big realization there are basically no debug tools to find these thingsfamous . page 17
  18. 18. our first big realization this causes discomfort between designers and engineersfamous . page 18
  19. 19. the impact The realization had a dramatic impacts confusing • we catalogued all of these quirks sucked • we refactored all of our CSS unfortunate • one designer was killed, one maimed sucked • we had to audit any 3rd party library that touched CSSfamous . page 19
  20. 20. reading material Y U NO LINKSfamous . page 20
  21. 21. our second big realization Learning to code for computers first has masked bad coding habitsfamous . page 21
  22. 22. our second big realization We had to relearn many things to optimize our code for mobile DOM Manipulation Event Handling Data Handling Image Handlingfamous . page 22
  23. 23. our second big realization The realization had a dramatic impacts interesting • we learned the performance optimized methods meh • we refactored all of our app specific javascript libraries sucked • we had to audit any 3rd party library that touched DOM, events, data or imagesfamous . page 23
  24. 24. reading material Y U NO LINKSfamous . page 24
  25. 25. our fourth big realization Safari and Chrome are not created equallyfamous . page 25
  26. 26. some examples • webkit implementation • bezier curves and preserve-3D • version differences • uncanny valleys • JS engines • device differences • retarded things we are still too angry to talk aboutfamous . page 26
  27. 27. the real work began The realization had a dramatic impacts sucked • we had to catalogue the differences sucked • we refactored all code to take these differences into account unfortunate • two devices were destroyed (Android) sucked • we had to audit any 3rd party library to see how they handled the differencesfamous . page 27
  28. 28. reading material Y U NO LINKSfamous . page 28
  29. 29. our fifth big realization a lot of HTML5 components don’t work or don’t work like you’d expect Y U NO WORKfamous . page 29
  30. 30. some examples • cache manifest • android touch events • HTML5 video Y U NO WORKfamous . page 30
  31. 31. the real work work began The realization had a dramatic impacts frustrating • we catalogued the which ones didn’t work easy • we removed all usage of these things sucked • we had to audit any 3rd party library to see how they handled the differencesfamous . page 31
  32. 32. our sixth big realization a lot of our favorite libraries were uselessfamous . page 32
  33. 33. some examples • jQuery Animations • jQuery Plugins • jQuery • Isotope • Any thing that was built originally for computers and touched the DOM or Eventsfamous . page 33
  34. 34. the impact The realization had a dramatic impacts frustrating • we catalogued the which ones didn’t work sucked • we removed all usage of these things sucked • we re-wrote all the things we had to removefamous . page 34
  35. 35. DOM Manipulation Tricks let’s try some exotic DOM manipulation techniquesfamous . page 35
  36. 36. some examples advanced DOM manipulation techniques • DOM object re-use • 3 panels method • the event horizon methodfamous . page 36
  37. 37. GPU Tricks let’s try some exotic frame rate techniquesfamous . page 37
  38. 38. some examples Example of advanced DOM manipulation techniques • Request animation frame • Frame Rate throttling • Fake multi-thread javascriptfamous . page 38
  39. 39. impacts on effort In many ways dealing with the GPU is like working with a magical black box that you have little to no visibility into • buffer size • resource limits • object count Good luck figure out when your app is about to blow the GPU upfamous . page 39
  40. 40. reading material Y U NO LINKSfamous . page 40
  41. 41. success (kind of) 1 year later (March 2011)famous . page 41
  42. 42. the story of becoming famo.us a lot of things didn’t make sense JANKfamous . page 42
  43. 43. a fundamental question we were able to make it performant, but at what price?famous . page 43
  44. 44. the reality check Coding for mobile apps is much less forgiving that coding for websites • performance problems are often a factor of many things interacting with each other • as your codebase grows, the number of either library specific or app specific interactions that affect performance constantly grows • every time a new performance problem arises, the complexity of solving it growsfamous . page 44
  45. 45. what was the real solution? why not just build everything in webGL or Canvas?famous . page 45
  46. 46. what do you lose with WebGL or Canvas? Event handling at the object level Portability of exisiting DOM, including Text layout in 2D Most CSS effects Buttons and form elements Text selection / highlighting Contextual information of objects within WebGL is like a hologram while HTML + CSS transforms is the real thingfamous . page 46
  47. 47. what was the real solution? there wasn’t anything specifically designed for apps documents apps 2D rendered 3D rendered HTML ? canvas WebGLfamous . page 47
  48. 48. what was the real problem? browsers were built to render documents and not appsfamous . page 48
  49. 49. understanding WebKit Simplified Render DOM tree Render tree Layout of Render Tree parsing construction construction Render Tree Painting WebCorefamous . page 49
  50. 50. understanding WebKit designed to render documents DOM tree Render tree Layout of Render Tree parsing construction construction Render Tree Painting WebCorefamous . page 50
  51. 51. understanding WebKit Physics Render Rules Engine Engine Framework famo.usfamous . page 51
  52. 52. understanding WebKit modify the inefficient parts DOM tree Render tree Layout of Render Tree parsing construction construction Render Tree Painting WebCore Physics Render Rules Engine Engine Framework famo.usfamous . page 52
  53. 53. building the render engine • Energy Module (defines and instantiates energy agents) • Camera Kinematics Module (controls camera movement behavior & events) • Camera Module (positions camera and adjusts perspective) • TransitionHelper Module (handles animation of multiple surfaces) • Surface Kinematics Module (positions surfaces and applies kinematics) • Matrix Module (performs efficient matrix math)famous . page 53
  54. 54. how does it work? ignore the CSS3 transition primitives compute the transforms in our render engine inject our computed transforms into -webkit-transform: matrix3D effectively skipping the browsers inefficient rendering process meant for documentsfamous . page 54
  55. 55. DEMO PLEASE Y U NO SHOW MEfamous . page 55
  56. 56. Physics Engine use kinematic actors to effect motion and user interaction in the system enable designers to tune without touching CSS enable engineers to build custom components yu kant b srs enable enginers to build new kenematic actors or change the engine itselffamous . page 56
  57. 57. DEMO PLEASE Y U NO SHOW MEfamous . page 57
  58. 58. step 3 let’s build our own frameworkfamous . page 58
  59. 59. specifically manage all of the input mechanisms like touch, mouse, keyboard and gestures manage the differences amongst browsers, versions and devicesfamous . page 59
  60. 60. DEMO PLEASE Y U NO SHOW MEfamous . page 60
  61. 61. the realization the engine and the framework were more important to us than the productfamous . page 61
  62. 62. the framework scaffolds, ui and ux components and all the things you need to build apps let developers build and share their own app templates, scaffolds and components too enable developers to get down to the source code if they need tofamous . page 62
  63. 63. the FAQs Are you planning on being full stack or doing just one thing well and integrating with other MVCs? designed to be just the view layer in an MVC Do you plan on working with Backbone.js? YES Will there be a public GitHub repo with an open source license? YES Will there be a commercial license? YESfamous . page 63
  64. 64. how to get involved beta @befamous jobs@famo.usfamous . page 64
  65. 65. links CSS 3D Transforms https://www.webkit.org/blog/386/3d-transforms/ http://www.webkit.org/blog-files/3d-transforms/poster-circle.html http://desandro.github.com/3dtransforms/ http://html5rubik.com/tutorial/ http://html5rubik.com/tutorial/step3/index.html http://www.paulrhayes.com/experiments/sphere/ http://css3.bradshawenterprises.com http://9elements.com/html5demos/matrix3d/ http://www.the-art-of-web.com/css/3d-transforms/ http://dev.opera.com/articles/view/understanding-the-css-transforms-matrix/ http://24ways.org/2010/intro-to-css-3d-transforms http://www.webkit.org/blog-files/3d-transforms/transform-style.html http://www.edankwan.com/lab/css3dEarth http://www.netmagazine.com/features/20-stunning-examples-css-3d-transforms http://cbateman.com/blog/head-coupled-3d-transforms/ http://coding.smashingmagazine.com/2012/04/17/beercamp-an-experiment-with-css-3d/ http://acko.net/blog/making-love-to-webkit/ https://news.ycombinator.com/item?id=3470736 http://www.satine.org/archives/2009/07/11/snow-stack-is-here/ http://coding.smashingmagazine.com/2012/01/06/adventures-in-the-third-dimension-css-3-d-transforms/ 3D Linear Algebra - Advanced http://www.robertblum.com/articles/2005/02/14/decomposing-matrices http://en.wikipedia.org/wiki/Householder_transformation http://en.wikipedia.org/wiki/QR_decomposition http://en.wikipedia.org/wiki/Transformation_matrixfamous . page 65
  66. 66. links Documentation https://developer.mozilla.org/en-US/docs/CSS/transform?redirectlocale=en-US&redirectslug=CSS%2F-moz-transform https://developer.apple.com/library/safari/#documentation/appleapplications/reference/SafariCSSRef/Articles/Functions.html http://www.w3.org/TR/css3-2d-transforms/ http://www.w3.org/TR/css3-3d-transforms/ https://developer.apple.com/library/safari/#documentation/AudioVideo/Reference/WebKitCSSMatrixClassReference/ WebKitCSSMatrix/WebKitCSSMatrix.html Troubleshooting http://stackoverflow.com/questions/6843367/css3-transforms-cause-screen-flickering-or-aliased-font Animation, requestAnimationFrame and performance http://paulirish.com/2011/requestanimationframe-for-smart-animating/ https://developer.mozilla.org/en-US/docs/CSS/@keyframes http://www.w3.org/TR/css3-animations/ http://creativejs.com/resources/requestanimationframe/ https://developer.mozilla.org/en-US/docs/DOM/window.requestAnimationFrame?redirectlocale=en-US&redirectslug=DOM %2Fwindow.mozRequestAnimationFrame http://www.html5rocks.com/en/tutorials/speed/animations/ http://www.html5rocks.com/en/tutorials/doodles/lem/ http://www.planetb.ca/2012/03/html5-game-programming-gems-requestanimationframe/ TranslateZ(0), preserve-3D and performance http://stackoverflow.com/questions/10814178/css-performance-relative-to-translatez0 http://creativejs.com/2011/12/day-2-gpu-accelerate-your-dom-elements/ http://stickmanventures.com/labs/demo/spinning-gears-Chrome-preserve-3d/ http://stackoverflow.com/questions/7908493/considerations-for-css3-transition-performance http://albertogasparin.it/articles/2011/06/ios-css-animations-performances/ http://jsperf.com/translate3d-vs-xy/29famous . page 66
  67. 67. links Other CSS Issues http://nerds.airbnb.com/box-shadows-are-expensive-to-paint Interesting Discussions on HTML5 performance and feature support http://lists.w3.org/Archives/Public/public-coremob/2012Sep/0021.html http://news.ycombinator.com/item?id=4526593 https://plus.google.com/106300407679257154689/posts/PBxtaphMDGJ https://plus.google.com/106300407679257154689/posts/NEAuwZ7v27B http://updates.html5rocks.com/2012/07/How-to-measure-browser-graphics-performance Information and videos on how browsers work http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/ http://vimeo.com/44182484 http://www.youtube.com/watch?v=xuMWhto62Eo Touch Issues, Discussions and Solutions http://www.html5rocks.com/en/mobile/touch/ http://smus.com/mouse-touch-pointer/ https://github.com/borismus/pointer.js https://dl.dropbox.com/u/7479257/pointevents_strawman.txt http://www.lukew.com/ff/entry.asp?1533 Information on browser support: https://developers.facebook.com/html5/blog/post/2012/04/03/ringmark-is-now-open-source/ Information on CSS3 Transitions (nota bene: they arent performant enough so we built our own animation curves for transitions in famo.us) http://dev.w3.org/csswg/css3-transitions/famous . page 67
  68. 68. links Appcache and storage http://www.alistapart.com/articles/application-cache-is-a-douchebag/ https://speakerdeck.com/u/jaffathecake/p/application-cache-douchebag General Javascript Performance Advice http://blog.tojicode.com/2012/04/if-i-built-physics-engine.html http://blog.tojicode.com/2012/03/javascript-memory-optimization-and.html https://www.scirra.com/blog/76/how-to-write-low-garbage-real-time-javascript http://net.tutsplus.com/tutorials/javascript-ajax/stop-nesting-functions-but-not-all-of-them/ http://www.html5rocks.com/en/tutorials/speed/v8/ http://news.ycombinator.com/item?id=4643611 Three panel method approach to Infinite scroll http://cubiq.org/swipeview Code review of Quake3 and Doom3, which offer lots of good insight into producing a performance 3D app that works over a network where latency is a problem http://fabiensanglard.net/quake3/index.php http://fabiensanglard.net/doom3/index.phpfamous . page 68
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×