HTML5 DevConf Oct 2012 Tech Talk
Upcoming SlideShare
Loading in...5
×
 

HTML5 DevConf Oct 2012 Tech Talk

on

  • 19,597 views

Steve Newcomb's deck from the tech talk he gave on the second day of HTML5DevConf in San Francisco.

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/

Statistics

Views

Total Views
19,597
Views on SlideShare
11,573
Embed Views
8,024

Actions

Likes
48
Downloads
273
Comments
3

23 Embeds 8,024

http://marakana.com 6828
https://thenewcircle.com 704
http://www.fastjavascript.com 220
https://twitter.com 164
http://mitchbox.tumblr.com 46
https://si0.twimg.com 13
http://www.scoop.it 8
http://t.co 8
http://192.168.0.108 5
http://www.arfadia.com 4
http://translate.googleusercontent.com 4
http://localhost 4
http://tweetedtimes.com 3
http://bhajii.com 2
http://127.0.0.1 2
http://www.blogger.com 2
http://webcache.googleusercontent.com 1
http://slides.diigo.com 1
http://www.diigo.com 1
http://www.diffbot.com&_=1353993807443 HTTP 1
http://bottlenose.com 1
https://abs.twimg.com 1
http://www.didrqpca.info&_=1368303679463 HTTP 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • 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.
    Are you sure you want to
    Your message goes here
    Processing…
  • links start on slide 65
    Are you sure you want to
    Your message goes here
    Processing…
  • Y U NO LINKS ?
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

HTML5 DevConf Oct 2012 Tech Talk HTML5 DevConf Oct 2012 Tech Talk Presentation Transcript

  • beta signup www.famo.us Web App Performance the story of becoming famo.us @stevenewcombfamous . page 1
  • the story of becoming famo.us a lot of things didn’t make sensefamous . page 2
  • the story of becoming famo.us about 2 years ago, we got funded to build consumer identity appfamous . page 3
  • the story of becoming famo.us it had a very ambitious user interfacefamous . page 4
  • the story of becoming famo.us we decided to build it in HTML5famous . page 5
  • 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
  • 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
  • the story of becoming famo.us it needed to handle many inputs including touch, keyboard, mouse and gesturing systemsfamous . page 8
  • the story of becoming famo.us we started knowing nothingfamous . page 9
  • the story of becoming famo.us we hit every performance issue you can imaginefamous . page 10
  • the story of becoming famo.us we battled through many false promissesfamous . page 11
  • the story of becoming famo.us we went through many frustrating experiencesfamous . page 12
  • the story of becoming famo.us we learned a lot of thingsfamous . page 13
  • the story of becoming famo.us we’d like to share our journey with youfamous . page 14
  • our first big realization CSS3 can completely ruin your performancefamous . page 15
  • 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
  • our first big realization there are basically no debug tools to find these thingsfamous . page 17
  • our first big realization this causes discomfort between designers and engineersfamous . page 18
  • 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
  • reading material Y U NO LINKSfamous . page 20
  • our second big realization Learning to code for computers first has masked bad coding habitsfamous . page 21
  • 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
  • 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
  • reading material Y U NO LINKSfamous . page 24
  • our fourth big realization Safari and Chrome are not created equallyfamous . page 25
  • 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
  • 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
  • reading material Y U NO LINKSfamous . page 28
  • 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
  • some examples • cache manifest • android touch events • HTML5 video Y U NO WORKfamous . page 30
  • 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
  • our sixth big realization a lot of our favorite libraries were uselessfamous . page 32
  • some examples • jQuery Animations • jQuery Plugins • jQuery • Isotope • Any thing that was built originally for computers and touched the DOM or Eventsfamous . page 33
  • 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
  • DOM Manipulation Tricks let’s try some exotic DOM manipulation techniquesfamous . page 35
  • some examples advanced DOM manipulation techniques • DOM object re-use • 3 panels method • the event horizon methodfamous . page 36
  • GPU Tricks let’s try some exotic frame rate techniquesfamous . page 37
  • some examples Example of advanced DOM manipulation techniques • Request animation frame • Frame Rate throttling • Fake multi-thread javascriptfamous . page 38
  • 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
  • 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 JANKfamous . page 42
  • a fundamental question we were able to make it performant, but at what price?famous . page 43
  • 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
  • what was the real solution? why not just build everything in webGL or Canvas?famous . page 45
  • 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
  • what was the real solution? there wasn’t anything specifically designed for apps documents apps 2D rendered 3D rendered HTML ? canvas WebGLfamous . page 47
  • what was the real problem? browsers were built to render documents and not appsfamous . page 48
  • understanding WebKit Simplified Render DOM tree Render tree Layout of Render Tree parsing construction construction Render Tree Painting WebCorefamous . page 49
  • understanding WebKit designed to render documents DOM tree Render tree Layout of Render Tree parsing construction construction Render Tree Painting WebCorefamous . page 50
  • understanding WebKit Physics Render Rules Engine Engine Framework famo.usfamous . page 51
  • 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
  • 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
  • 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
  • DEMO PLEASE Y U NO SHOW MEfamous . page 55
  • 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
  • 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 gestures manage the differences amongst browsers, versions and devicesfamous . page 59
  • DEMO PLEASE Y U NO SHOW MEfamous . page 60
  • the realization the engine and the framework were more important to us than the productfamous . page 61
  • 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
  • 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
  • how to get involved beta @befamous jobs@famo.usfamous . page 64
  • 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
  • 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
  • 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
  • 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