Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

HTML5 DevConf Oct 2012 Tech Talk

30,407 views

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
  • 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

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

×