SlideShare a Scribd company logo
beta signup
                                         www.famo.us




            Web App Performance
         the story of becoming famo.us




                 @stevenewcomb



famous
    .                                                   page 1
the story of becoming famo.us




         a lot of things didn’t
              make sense




famous
    .                                         page 2
the story of becoming famo.us




           about 2 years ago, we got funded to build
                    consumer identity app




famous
    .                                                  page 3
the story of becoming famo.us




            it had a very ambitious user interface




famous
    .                                                page 4
the story of becoming famo.us




                    we decided to build it in HTML5




famous
    .                                                 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 consoles




famous
    .                                                      page 6
the story of becoming famo.us




         it needed to work on iOS and Android as a web
                 app and inside a native wrapper




famous
    .                                                    page 7
the story of becoming famo.us




            it needed to handle many inputs including
          touch, keyboard, mouse and gesturing systems




famous
    .                                                    page 8
the story of becoming famo.us


                     we started knowing nothing




famous
    .                                             page 9
the story of becoming famo.us




         we hit every performance issue
                 you can imagine




famous
    .                                        page 10
the story of becoming famo.us




                        we battled through many
                           false promisses




famous
    .                                             page 11
the story of becoming famo.us




          we went through many
         frustrating experiences




famous
    .                                    page 12
the story of becoming famo.us




                       we learned a lot of things




famous
    .                                               page 13
the story of becoming famo.us




            we’d like to share our journey with you




famous
    .                                                 page 14
our first big realization




                   CSS3 can completely ruin your
                          performance




famous
    .                                              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 things




famous
    .                                                    page 17
our first big realization




                  this causes discomfort between
                      designers and engineers




famous
    .                                              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 CSS




famous
    .                                                               page 19
reading material




            Y U NO LINKS




famous
    .                       page 20
our second big realization




               Learning to code for computers first has
                     masked bad coding habits




famous
    .                                                    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 Handling




famous
    .                                              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
                             images




famous
    .                                                               page 23
reading material




            Y U NO LINKS




famous
    .                       page 24
our fourth big realization




                       Safari and Chrome
                    are not created equally




famous
    .                                         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 about



famous
    .                                              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
                           differences


famous
    .                                                             page 27
reading material




            Y U NO LINKS




famous
    .                       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 WORK




famous
    .                                                         page 29
some examples




                           • cache manifest
                           • android touch events
                           • HTML5 video
         Y U NO WORK




famous
    .                                               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
                          differences




famous
    .                                                            page 31
our sixth big realization




                 a lot of our favorite libraries were
                                useless




famous
    .                                                   page 32
some examples


             • jQuery Animations
             • jQuery Plugins
             • jQuery
             • Isotope
             • Any thing that was built originally
               for computers and touched the
               DOM or Events




famous
    .                                                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
                          remove




famous
    .                                                           page 34
DOM Manipulation Tricks




               let’s try some exotic DOM manipulation
                              techniques




famous
    .                                                   page 35
some examples


         advanced DOM manipulation techniques

         • DOM object re-use
         • 3 panels method
         • the event horizon method




famous
    .                                           page 36
GPU Tricks




         let’s try some exotic frame rate
                     techniques




famous
    .                                       page 37
some examples


         Example of advanced DOM manipulation
         techniques

         • Request animation frame
         • Frame Rate throttling
         • Fake multi-thread javascript




famous
    .                                           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 up




famous
    .                                                page 39
reading material




            Y U NO LINKS




famous
    .                       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
famous
    .                                         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 grows




famous
    .                                                         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 thing



famous
    .                                                       page 46
what was the real solution?

               there wasn’t anything specifically designed for apps




         documents       apps            2D rendered       3D rendered




           HTML              ?               canvas            WebGL




famous
    .                                                                    page 47
what was the real problem?




         browsers were built to render documents and not apps




famous
    .                                                           page 48
understanding WebKit

                                  Simplified Render




                    DOM tree        Render tree       Layout of    Render Tree
         parsing
                   construction     construction     Render Tree    Painting




                                  WebCore




famous
    .                                                                            page 49
understanding WebKit

                       designed to render documents




                    DOM tree      Render tree     Layout of    Render Tree
         parsing
                   construction   construction   Render Tree    Painting




                                  WebCore




famous
    .                                                                        page 50
understanding WebKit




         Physics    Render      Rules
         Engine     Engine   Framework




                   famo.us




famous
    .                                    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.us




famous
    .                                                                                  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 documents




famous
    .                                               page 54
DEMO PLEASE




           Y U NO SHOW ME




famous
    .                       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 itself




famous
    .                                                             page 56
DEMO PLEASE




           Y U NO SHOW ME




famous
    .                       page 57
step 3




           let’s build our own framework




famous
    .                                      page 58
specifically



             manage all of the input mechanisms
             like touch, mouse, keyboard and
             gestures

             manage the differences amongst
             browsers, versions and devices




famous
    .                                             page 59
DEMO PLEASE




           Y U NO SHOW ME




famous
    .                       page 60
the realization




             the engine and the framework were
            more important to us than the product




famous
    .                                               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 to




famous
    .                                                 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?
             YES



famous
    .                                                    page 63
how to get involved




         beta     @befamous      jobs@famo.us




famous
    .                                           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_matrix




famous
    .                                                                                                          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/29




famous
    .                                                                                                                                 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 aren't 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.php




famous
    .                                                                                                                            page 68

More Related Content

Viewers also liked

Getting to know each other
Getting to know each otherGetting to know each other
Getting to know each other
AlinaPirlik
 
Metamorfosis
MetamorfosisMetamorfosis
Metamorfosis
Muthmainnah Bantasyam
 
Easybid oap
Easybid  oapEasybid  oap
Easybid oap
gjreddy2012
 
Empathy map student
Empathy map studentEmpathy map student
Empathy map studentgjreddy2012
 
Creativity assignment 1 f raimondi
Creativity assignment 1  f raimondiCreativity assignment 1  f raimondi
Creativity assignment 1 f raimondi
221012st
 
Big Data in Mobile Gaming - Eric Seufert presentation from IGExpo Feb 1 2013
Big Data in Mobile Gaming - Eric Seufert presentation from IGExpo Feb 1 2013Big Data in Mobile Gaming - Eric Seufert presentation from IGExpo Feb 1 2013
Big Data in Mobile Gaming - Eric Seufert presentation from IGExpo Feb 1 2013
Eric Seufert
 
Aturcara kejohanan sukan
Aturcara kejohanan sukanAturcara kejohanan sukan
Aturcara kejohanan sukan
Jerol Numerz
 
Famo.us - HTML5 Dev Conference Tech Talk
Famo.us - HTML5 Dev Conference Tech TalkFamo.us - HTML5 Dev Conference Tech Talk
Famo.us - HTML5 Dev Conference Tech Talk
befamous
 
The Six Leyshas
The Six LeyshasThe Six Leyshas
The Six Leyshas
Young Jains of America
 
Cartas Ca
Cartas CaCartas Ca
Cartas Ca
primerciclojy
 
Meditation: Calmness of the Soul | Shri Shrutpragya Swami
Meditation: Calmness of the Soul | Shri Shrutpragya Swami Meditation: Calmness of the Soul | Shri Shrutpragya Swami
Meditation: Calmness of the Soul | Shri Shrutpragya Swami
Young Jains of America
 
Cartas -ch
Cartas -chCartas -ch
Cartas -ch
primerciclojy
 
The jQuery Divide
The jQuery DivideThe jQuery Divide
The jQuery Divide
Rebecca Murphey
 
Cartas letra D
Cartas letra DCartas letra D
Cartas letra D
primerciclojy
 
Cartas letra T
Cartas letra TCartas letra T
Cartas letra T
primerciclojy
 
DISPLAY LUMAscape
DISPLAY LUMAscapeDISPLAY LUMAscape
DISPLAY LUMAscape
LUMA Partners
 
Maintainable JavaScript 2012
Maintainable JavaScript 2012Maintainable JavaScript 2012
Maintainable JavaScript 2012
Nicholas Zakas
 

Viewers also liked (18)

Tugas i pariwisata dan pesisir 2
Tugas i pariwisata dan pesisir 2Tugas i pariwisata dan pesisir 2
Tugas i pariwisata dan pesisir 2
 
Getting to know each other
Getting to know each otherGetting to know each other
Getting to know each other
 
Metamorfosis
MetamorfosisMetamorfosis
Metamorfosis
 
Easybid oap
Easybid  oapEasybid  oap
Easybid oap
 
Empathy map student
Empathy map studentEmpathy map student
Empathy map student
 
Creativity assignment 1 f raimondi
Creativity assignment 1  f raimondiCreativity assignment 1  f raimondi
Creativity assignment 1 f raimondi
 
Big Data in Mobile Gaming - Eric Seufert presentation from IGExpo Feb 1 2013
Big Data in Mobile Gaming - Eric Seufert presentation from IGExpo Feb 1 2013Big Data in Mobile Gaming - Eric Seufert presentation from IGExpo Feb 1 2013
Big Data in Mobile Gaming - Eric Seufert presentation from IGExpo Feb 1 2013
 
Aturcara kejohanan sukan
Aturcara kejohanan sukanAturcara kejohanan sukan
Aturcara kejohanan sukan
 
Famo.us - HTML5 Dev Conference Tech Talk
Famo.us - HTML5 Dev Conference Tech TalkFamo.us - HTML5 Dev Conference Tech Talk
Famo.us - HTML5 Dev Conference Tech Talk
 
The Six Leyshas
The Six LeyshasThe Six Leyshas
The Six Leyshas
 
Cartas Ca
Cartas CaCartas Ca
Cartas Ca
 
Meditation: Calmness of the Soul | Shri Shrutpragya Swami
Meditation: Calmness of the Soul | Shri Shrutpragya Swami Meditation: Calmness of the Soul | Shri Shrutpragya Swami
Meditation: Calmness of the Soul | Shri Shrutpragya Swami
 
Cartas -ch
Cartas -chCartas -ch
Cartas -ch
 
The jQuery Divide
The jQuery DivideThe jQuery Divide
The jQuery Divide
 
Cartas letra D
Cartas letra DCartas letra D
Cartas letra D
 
Cartas letra T
Cartas letra TCartas letra T
Cartas letra T
 
DISPLAY LUMAscape
DISPLAY LUMAscapeDISPLAY LUMAscape
DISPLAY LUMAscape
 
Maintainable JavaScript 2012
Maintainable JavaScript 2012Maintainable JavaScript 2012
Maintainable JavaScript 2012
 

Similar to HTML5 DevConf Oct 2012 Tech Talk

Umw Software Engineering Guest Lecture 05 Sep2007
Umw Software Engineering Guest Lecture 05 Sep2007Umw Software Engineering Guest Lecture 05 Sep2007
Umw Software Engineering Guest Lecture 05 Sep2007
David Wood
 
Federico Lox Lucignano, War of the worlds web or native both
Federico Lox Lucignano, War of the worlds web or native bothFederico Lox Lucignano, War of the worlds web or native both
Federico Lox Lucignano, War of the worlds web or native both
IxDA_Poznan
 
Leverage web technology in a mobile world
Leverage web technology in a mobile worldLeverage web technology in a mobile world
Leverage web technology in a mobile world
Dieter Blomme
 
Wiki Design Luke W
Wiki Design  Luke WWiki Design  Luke W
Wiki Design Luke W
Ross Lawley
 
7 Lessons from Mozilla
7 Lessons from Mozilla7 Lessons from Mozilla
7 Lessons from Mozilla
John Lilly
 
Wiki Design Considerations
Wiki Design ConsiderationsWiki Design Considerations
Wiki Design Considerations
interactionpatterns.org
 
Building Stuff for Fun and Profit - confessions from a life in code and cables
Building Stuff for Fun and Profit - confessions from a life in code and cablesBuilding Stuff for Fun and Profit - confessions from a life in code and cables
Building Stuff for Fun and Profit - confessions from a life in code and cables
Holly Cummins
 
We Are All Designers of Play (Rethinking Toy Design)
We Are All Designers of Play (Rethinking Toy Design)We Are All Designers of Play (Rethinking Toy Design)
We Are All Designers of Play (Rethinking Toy Design)
Laura Seargeant Richardson
 
Educational Uses of Web 2.0 Based Applications with Notes
Educational Uses of Web 2.0 Based Applications with NotesEducational Uses of Web 2.0 Based Applications with Notes
Educational Uses of Web 2.0 Based Applications with Notes
Mike Qaissaunee
 
Gametech virtual worlds keynote handout
Gametech virtual worlds keynote handoutGametech virtual worlds keynote handout
Gametech virtual worlds keynote handout
Bruce Joy
 
Responsive Design with Backbone
Responsive Design with BackboneResponsive Design with Backbone
Responsive Design with Backbone
Mauvis Ledford
 
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
Brian Fling
 
MTC Spring 2013 - crossplatform woes - robert virkus - 2013-03-13
MTC Spring 2013 -  crossplatform woes - robert virkus - 2013-03-13MTC Spring 2013 -  crossplatform woes - robert virkus - 2013-03-13
MTC Spring 2013 - crossplatform woes - robert virkus - 2013-03-13
Enough Software
 
OneSpring: 5 Myths of Rich Internet Applications
OneSpring:  5 Myths of Rich Internet ApplicationsOneSpring:  5 Myths of Rich Internet Applications
OneSpring: 5 Myths of Rich Internet Applications
OneSpring LLC
 
Open Hack Taiwan 2012 - Hacking 101
Open Hack Taiwan 2012 - Hacking 101Open Hack Taiwan 2012 - Hacking 101
Open Hack Taiwan 2012 - Hacking 101
sriramiyer2007
 
Luke Wroblewski: Mobile First
Luke Wroblewski: Mobile FirstLuke Wroblewski: Mobile First
Luke Wroblewski: Mobile First
WebExpo
 
Webgeek Keynote: Mobile Developers Rock!
Webgeek Keynote: Mobile Developers Rock!Webgeek Keynote: Mobile Developers Rock!
Webgeek Keynote: Mobile Developers Rock!
SMART DevNet
 
Responsive Design is Dead
Responsive Design is DeadResponsive Design is Dead
Responsive Design is Dead
Resource/Ammirati
 
Your Browser is Your SDK
Your Browser is Your SDKYour Browser is Your SDK
Your Browser is Your SDK
mwbrooks
 
Mobiele sites en applicatie op Drupal
Mobiele sites en applicatie op DrupalMobiele sites en applicatie op Drupal
Mobiele sites en applicatie op Drupal
CrossLang / CrossCheck / CrossCast
 

Similar to HTML5 DevConf Oct 2012 Tech Talk (20)

Umw Software Engineering Guest Lecture 05 Sep2007
Umw Software Engineering Guest Lecture 05 Sep2007Umw Software Engineering Guest Lecture 05 Sep2007
Umw Software Engineering Guest Lecture 05 Sep2007
 
Federico Lox Lucignano, War of the worlds web or native both
Federico Lox Lucignano, War of the worlds web or native bothFederico Lox Lucignano, War of the worlds web or native both
Federico Lox Lucignano, War of the worlds web or native both
 
Leverage web technology in a mobile world
Leverage web technology in a mobile worldLeverage web technology in a mobile world
Leverage web technology in a mobile world
 
Wiki Design Luke W
Wiki Design  Luke WWiki Design  Luke W
Wiki Design Luke W
 
7 Lessons from Mozilla
7 Lessons from Mozilla7 Lessons from Mozilla
7 Lessons from Mozilla
 
Wiki Design Considerations
Wiki Design ConsiderationsWiki Design Considerations
Wiki Design Considerations
 
Building Stuff for Fun and Profit - confessions from a life in code and cables
Building Stuff for Fun and Profit - confessions from a life in code and cablesBuilding Stuff for Fun and Profit - confessions from a life in code and cables
Building Stuff for Fun and Profit - confessions from a life in code and cables
 
We Are All Designers of Play (Rethinking Toy Design)
We Are All Designers of Play (Rethinking Toy Design)We Are All Designers of Play (Rethinking Toy Design)
We Are All Designers of Play (Rethinking Toy Design)
 
Educational Uses of Web 2.0 Based Applications with Notes
Educational Uses of Web 2.0 Based Applications with NotesEducational Uses of Web 2.0 Based Applications with Notes
Educational Uses of Web 2.0 Based Applications with Notes
 
Gametech virtual worlds keynote handout
Gametech virtual worlds keynote handoutGametech virtual worlds keynote handout
Gametech virtual worlds keynote handout
 
Responsive Design with Backbone
Responsive Design with BackboneResponsive Design with Backbone
Responsive Design with Backbone
 
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
 
MTC Spring 2013 - crossplatform woes - robert virkus - 2013-03-13
MTC Spring 2013 -  crossplatform woes - robert virkus - 2013-03-13MTC Spring 2013 -  crossplatform woes - robert virkus - 2013-03-13
MTC Spring 2013 - crossplatform woes - robert virkus - 2013-03-13
 
OneSpring: 5 Myths of Rich Internet Applications
OneSpring:  5 Myths of Rich Internet ApplicationsOneSpring:  5 Myths of Rich Internet Applications
OneSpring: 5 Myths of Rich Internet Applications
 
Open Hack Taiwan 2012 - Hacking 101
Open Hack Taiwan 2012 - Hacking 101Open Hack Taiwan 2012 - Hacking 101
Open Hack Taiwan 2012 - Hacking 101
 
Luke Wroblewski: Mobile First
Luke Wroblewski: Mobile FirstLuke Wroblewski: Mobile First
Luke Wroblewski: Mobile First
 
Webgeek Keynote: Mobile Developers Rock!
Webgeek Keynote: Mobile Developers Rock!Webgeek Keynote: Mobile Developers Rock!
Webgeek Keynote: Mobile Developers Rock!
 
Responsive Design is Dead
Responsive Design is DeadResponsive Design is Dead
Responsive Design is Dead
 
Your Browser is Your SDK
Your Browser is Your SDKYour Browser is Your SDK
Your Browser is Your SDK
 
Mobiele sites en applicatie op Drupal
Mobiele sites en applicatie op DrupalMobiele sites en applicatie op Drupal
Mobiele sites en applicatie op Drupal
 

Recently uploaded

June Patch Tuesday
June Patch TuesdayJune Patch Tuesday
June Patch Tuesday
Ivanti
 
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
Edge AI and Vision Alliance
 
5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides
DanBrown980551
 
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
saastr
 
Nordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptxNordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptx
MichaelKnudsen27
 
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
Alex Pruden
 
Taking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdfTaking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdf
ssuserfac0301
 
Best 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERPBest 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERP
Pixlogix Infotech
 
AWS Cloud Cost Optimization Presentation.pptx
AWS Cloud Cost Optimization Presentation.pptxAWS Cloud Cost Optimization Presentation.pptx
AWS Cloud Cost Optimization Presentation.pptx
HarisZaheer8
 
Azure API Management to expose backend services securely
Azure API Management to expose backend services securelyAzure API Management to expose backend services securely
Azure API Management to expose backend services securely
Dinusha Kumarasiri
 
Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...
Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...
Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...
Tatiana Kojar
 
WeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation TechniquesWeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation Techniques
Postman
 
dbms calicut university B. sc Cs 4th sem.pdf
dbms  calicut university B. sc Cs 4th sem.pdfdbms  calicut university B. sc Cs 4th sem.pdf
dbms calicut university B. sc Cs 4th sem.pdf
Shinana2
 
FREE A4 Cyber Security Awareness Posters-Social Engineering part 3
FREE A4 Cyber Security Awareness  Posters-Social Engineering part 3FREE A4 Cyber Security Awareness  Posters-Social Engineering part 3
FREE A4 Cyber Security Awareness Posters-Social Engineering part 3
Data Hops
 
System Design Case Study: Building a Scalable E-Commerce Platform - Hiike
System Design Case Study: Building a Scalable E-Commerce Platform - HiikeSystem Design Case Study: Building a Scalable E-Commerce Platform - Hiike
System Design Case Study: Building a Scalable E-Commerce Platform - Hiike
Hiike
 
GraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracyGraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracy
Tomaz Bratanic
 
Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024
Jason Packer
 
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
saastr
 
Dandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity serverDandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity server
Antonios Katsarakis
 
JavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green MasterplanJavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green Masterplan
Miro Wengner
 

Recently uploaded (20)

June Patch Tuesday
June Patch TuesdayJune Patch Tuesday
June Patch Tuesday
 
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
 
5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides
 
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
 
Nordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptxNordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptx
 
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
 
Taking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdfTaking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdf
 
Best 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERPBest 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERP
 
AWS Cloud Cost Optimization Presentation.pptx
AWS Cloud Cost Optimization Presentation.pptxAWS Cloud Cost Optimization Presentation.pptx
AWS Cloud Cost Optimization Presentation.pptx
 
Azure API Management to expose backend services securely
Azure API Management to expose backend services securelyAzure API Management to expose backend services securely
Azure API Management to expose backend services securely
 
Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...
Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...
Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...
 
WeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation TechniquesWeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation Techniques
 
dbms calicut university B. sc Cs 4th sem.pdf
dbms  calicut university B. sc Cs 4th sem.pdfdbms  calicut university B. sc Cs 4th sem.pdf
dbms calicut university B. sc Cs 4th sem.pdf
 
FREE A4 Cyber Security Awareness Posters-Social Engineering part 3
FREE A4 Cyber Security Awareness  Posters-Social Engineering part 3FREE A4 Cyber Security Awareness  Posters-Social Engineering part 3
FREE A4 Cyber Security Awareness Posters-Social Engineering part 3
 
System Design Case Study: Building a Scalable E-Commerce Platform - Hiike
System Design Case Study: Building a Scalable E-Commerce Platform - HiikeSystem Design Case Study: Building a Scalable E-Commerce Platform - Hiike
System Design Case Study: Building a Scalable E-Commerce Platform - Hiike
 
GraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracyGraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracy
 
Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024
 
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
 
Dandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity serverDandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity server
 
JavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green MasterplanJavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green Masterplan
 

HTML5 DevConf Oct 2012 Tech Talk

  • 1. beta signup www.famo.us Web App Performance the story of becoming famo.us @stevenewcomb famous . page 1
  • 2. the story of becoming famo.us a lot of things didn’t make sense famous . page 2
  • 3. the story of becoming famo.us about 2 years ago, we got funded to build consumer identity app famous . page 3
  • 4. the story of becoming famo.us it had a very ambitious user interface famous . page 4
  • 5. the story of becoming famo.us we decided to build it in HTML5 famous . page 5
  • 6. the story of becoming famo.us it needed to work on lots of devices including iPad1 + iPad2 + iPad3 phones, tablets, pcs and game consoles famous . page 6
  • 7. the story of becoming famo.us it needed to work on iOS and Android as a web app and inside a native wrapper famous . page 7
  • 8. the story of becoming famo.us it needed to handle many inputs including touch, keyboard, mouse and gesturing systems famous . page 8
  • 9. the story of becoming famo.us we started knowing nothing famous . page 9
  • 10. the story of becoming famo.us we hit every performance issue you can imagine famous . page 10
  • 11. the story of becoming famo.us we battled through many false promisses famous . page 11
  • 12. the story of becoming famo.us we went through many frustrating experiences famous . page 12
  • 13. the story of becoming famo.us we learned a lot of things famous . page 13
  • 14. the story of becoming famo.us we’d like to share our journey with you famous . page 14
  • 15. our first big realization CSS3 can completely ruin your performance famous . page 15
  • 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. our first big realization there are basically no debug tools to find these things famous . page 17
  • 18. our first big realization this causes discomfort between designers and engineers famous . page 18
  • 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 CSS famous . page 19
  • 20. reading material Y U NO LINKS famous . page 20
  • 21. our second big realization Learning to code for computers first has masked bad coding habits famous . page 21
  • 22. our second big realization We had to relearn many things to optimize our code for mobile DOM Manipulation Event Handling Data Handling Image Handling famous . page 22
  • 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 images famous . page 23
  • 24. reading material Y U NO LINKS famous . page 24
  • 25. our fourth big realization Safari and Chrome are not created equally famous . page 25
  • 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 about famous . page 26
  • 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 differences famous . page 27
  • 28. reading material Y U NO LINKS famous . page 28
  • 29. our fifth big realization a lot of HTML5 components don’t work or don’t work like you’d expect Y U NO WORK famous . page 29
  • 30. some examples • cache manifest • android touch events • HTML5 video Y U NO WORK famous . page 30
  • 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 differences famous . page 31
  • 32. our sixth big realization a lot of our favorite libraries were useless famous . page 32
  • 33. some examples • jQuery Animations • jQuery Plugins • jQuery • Isotope • Any thing that was built originally for computers and touched the DOM or Events famous . page 33
  • 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 remove famous . page 34
  • 35. DOM Manipulation Tricks let’s try some exotic DOM manipulation techniques famous . page 35
  • 36. some examples advanced DOM manipulation techniques • DOM object re-use • 3 panels method • the event horizon method famous . page 36
  • 37. GPU Tricks let’s try some exotic frame rate techniques famous . page 37
  • 38. some examples Example of advanced DOM manipulation techniques • Request animation frame • Frame Rate throttling • Fake multi-thread javascript famous . page 38
  • 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 up famous . page 39
  • 40. reading material Y U NO LINKS famous . page 40
  • 41. success (kind of) 1 year later (March 2011) famous . page 41
  • 42. the story of becoming famo.us a lot of things didn’t make sense JANK famous . page 42
  • 43. a fundamental question we were able to make it performant, but at what price? famous . page 43
  • 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 grows famous . page 44
  • 45. what was the real solution? why not just build everything in webGL or Canvas? famous . page 45
  • 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 thing famous . page 46
  • 47. what was the real solution? there wasn’t anything specifically designed for apps documents apps 2D rendered 3D rendered HTML ? canvas WebGL famous . page 47
  • 48. what was the real problem? browsers were built to render documents and not apps famous . page 48
  • 49. understanding WebKit Simplified Render DOM tree Render tree Layout of Render Tree parsing construction construction Render Tree Painting WebCore famous . page 49
  • 50. understanding WebKit designed to render documents DOM tree Render tree Layout of Render Tree parsing construction construction Render Tree Painting WebCore famous . page 50
  • 51. understanding WebKit Physics Render Rules Engine Engine Framework famo.us famous . page 51
  • 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.us famous . page 52
  • 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. 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 documents famous . page 54
  • 55. DEMO PLEASE Y U NO SHOW ME famous . page 55
  • 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 itself famous . page 56
  • 57. DEMO PLEASE Y U NO SHOW ME famous . page 57
  • 58. step 3 let’s build our own framework famous . page 58
  • 59. specifically manage all of the input mechanisms like touch, mouse, keyboard and gestures manage the differences amongst browsers, versions and devices famous . page 59
  • 60. DEMO PLEASE Y U NO SHOW ME famous . page 60
  • 61. the realization the engine and the framework were more important to us than the product famous . page 61
  • 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 to famous . page 62
  • 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? YES famous . page 63
  • 64. how to get involved beta @befamous jobs@famo.us famous . page 64
  • 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_matrix famous . page 65
  • 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/29 famous . page 66
  • 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 aren't 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. 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.php famous . page 68