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.

Enough with the javas cript already! de Nicholas Zakas

2,376 views

Published on

Presentación de Nicholas Zakas - Enough with the javas cript already!

Published in: Technology, Design
  • Be the first to comment

Enough with the javas cript already! de Nicholas Zakas

  1. 1. Enough with the JavaScript Already! Nicholas C. Zakas @slicknet
  2. 2. @slicknet Complaints: @souders
  3. 3. 2004
  4. 4. 2005
  5. 5. http://www.adaptivepath.com/ideas/ajax-new-approach-web-applications
  6. 6. 2006
  7. 7. 2007
  8. 8. Atwood’s Law Any application that can be written in JavaScript, will eventually be written in JavaScript. http://www.codinghorror.com/blog/2007/07/the-principle-of-least-power.html
  9. 9. 2013
  10. 10. “Help, Nicholas! Our JavaScript is killing our site performance!” - Everyone who contacted me while consulting
  11. 11. > 1 MB* JavaScript loaded during page load * Un-gzipped
  12. 12. Server HTML CSS JavaScript Rendering HTML Constructing URLs Calculating dependencies Redirecting Document structure Native functionality Accessibility Layout Colors Visibility Animation Handling Events Ajax Changing UI
  13. 13. Server HTML CSS JavaScript Rendering HTML Constructing URLs Calculating dependencies Redirecting Document structure Native functionality Accessibility Layout Colors Visibility Animation Handling Events Ajax Changing UI
  14. 14. Source: HTTP Archive
  15. 15. 256 KB 260 KB 993.96 KB 793.5 KB 1570.4 KB503 KB 196 KB 568.7 KB Gzipped Un-gzipped
  16. 16. Time Spent During a Project 0% 10% 20% 30% 40% 50% 60% 70% 80% 90% 100% HTML CSS JavaScript
  17. 17. Client-Side Rendering
  18. 18. Hogan.js{dust.js} EJS
  19. 19. “It's no longer good enough to build web apps around full page loads and then progressively enhance them to behave more dynamically.” - throneofjs.com
  20. 20. https://www.facebook.com/help/189391594506832/
  21. 21. “To improve the twitter.com experience for everyone, we've been working to take back control of our front-end performance by moving the rendering to the server. This has allowed us to drop our initial page load times to 1/5th of what they were previously and reduce differences in performance across browsers.” https://blog.twitter.com/2012/improving-performance-twittercom
  22. 22. “Our thesis [was] if we have a JavaScript runtime on the server, we should be able to pull most of this application logic back down to the server in a way that can be shared with the client. Your great new product can run on both sides of the wire, serving up real HTML on first pageload, but then kicking off a client-side JavaScript app.” http://nerds.airbnb.com/weve-launched-our-first-nodejs-app-to-product
  23. 23. “…we re-launched our Mobile Web site using this new stack, replacing the Backbone.js + Rails stack that it used previously...It looks exactly the same as the app it replaced, however initial pageload feels drastically quicker because we serve up real HTML instead of waiting for the client to download JavaScript before rendering. Plus, it is fully crawlable by search engines.” http://nerds.airbnb.com/weve-launched-our-first-nodejs-app-to-product
  24. 24. The server & browser are better at this than us
  25. 25. Progressive enhancement still works
  26. 26. Unused JavaScript
  27. 27. 60-65% JavaScript that was not executed by page load* * My consulting clients
  28. 28. The 4 JavaScript Load Times In <head> Before </body> After page load On demand
  29. 29. Prerequisite: What are the top 2-3 things users do on this page?
  30. 30. aka Prerequisite: Analytics! In <head>
  31. 31. https://support.google.com/analytics/answer/1008080?hl=en “Once you find the code snippet, copy and paste it into your web page, just before the closing </head> tag*. If your website uses templates to generate pages, enter it just before the closing </head> tag in the file that contains the<head> section.”
  32. 32. Scripts needed by page load Before </body>
  33. 33. Before </body>
  34. 34. Scripts needed soon after page load After page load
  35. 35. After page load
  36. 36. In reaction to user On demand
  37. 37. On demand
  38. 38. http://alexsexton.com/blog/2013/03/deploying-javascript-applications/
  39. 39. http://alexsexton.com/blog/2013/03/deploying-javascript-applications/
  40. 40. JavaScript Libraries (they are big)
  41. 41. 42.3 KB 115.0 KB 27.7 KB 90.9 KB 29.0 KB 81.5 KB 85.3 KB25.7 KB Gzipped Un-gzipped 2.x 1.x
  42. 42. Library Code Component Code
  43. 43. Library Code Component Code
  44. 44. Library Code Component Code
  45. 45. Library Code Component Code
  46. 46. As JS Libraries Develop 0 2 4 6 8 10 12 14 16 0 10 20 30 40 50 60 70 80 90 100 Library Code Component Code Number of Components
  47. 47. JS Libraries and Economies of Scale Cost per JavaScript component Number of components
  48. 48. Library Code Component Code
  49. 49. Tabs
  50. 50. Tabs? 63.1 KB 120.8 KB 95.3 KB30.2 KB Gzipped Un-gzipped 1.x 1.9 KB 5.0 KB How?
  51. 51. Step 1 Include HTML on the page
  52. 52. <div data-nui-type="tabview" class="nui-tabview"> <ol class="nui-tabs clearfix"> <li><a href="#">Tab 1</a></li> <li><a href="#">Tab 2</a></li> <li><a href="#">Tab 3</a></li> </ol> <div class="nui-tabpanels"> <div><p>Content 1</p></div> <div><p>Content 2</p></div> <div><p>Content 3</p></div> </div> </div> No JS yet!
  53. 53. Step 2 Store UI state on the DOM
  54. 54. <div data-nui-type="tabview" class="nui-tabview"> <ol class="nui-tabs clearfix"> <li class="nui-selected"><a href="#">Tab 1</a></li> <li><a href="#">Tab 2</a></li> <li><a href="#">Tab 3</a></li> </ol> <div class="nui-tabpanels"> <div class="nui-selected"><p>Content 1</p></div> <div><p>Content 2</p></div> <div><p>Content 3</p></div> </div> </div> Selected tab Selected panel No JS yet!
  55. 55. Step 3 Sprinkle in some JS
  56. 56. <script> nui.init(); </script> One call to initialize all instances
  57. 57. // none of this var tabview = new MyLibrary.TabView("#tabs", { selected: 1 }); // none of this $(“#tabs”).tabs(); Just add more HTML!
  58. 58. <div data-nui-type="tabview" class="nui-tabview" data-nui-selected- index="0"> <ol class="nui-tabs clearfix" role="tablist"> <li class=" nui-selected" data-nui-index="0"><a id="nui0">Tab 1</a></li> <li data-nui-index="1"><a id="nui1">Tab 2</a></li> <li data-nui-index="2"><a id="nui2">Tab 3</a></li> </ol> <div class="nui-tabpanels"> <div class=" nui-selected"><p>Content 1</p></div> <div><p>Content 2</p></div> <div><p>Content 3</p></div> </div> </div>
  59. 59. Sure, but I bet there’s no accessibility
  60. 60. Wrong
  61. 61. <div data-nui-type="tabview" class="nui-tabview" data-nui-selected- index="0"> <ol class="nui-tabs clearfix" role="tablist"> <li class=" nui-selected" data-nui-index="0" role="presentation"><a id="nui0" role="tab" tabindex="0">Tab 1</a></li> <li data-nui-index="1" role="presentation"><a id="nui1" role="tab" tabindex="-1">Tab 2</a></li> <li data-nui-index="2" role="presentation"><a id="nui2" role="tab" tabindex="-1">Tab 3</a></li> </ol> <div class="nui-tabpanels"> <div class=" nui-selected" role="tabpanel" aria- labelledby="nui0" tabindex="0"><p>Content 1</p></div> <div role="tabpanel" aria-labelledby="nui1" tabindex="-1" aria-hidden="true"><p>Content 2</p></div> <div role="tabpanel" aria-labelledby="nui2" tabindex="-1" aria-hidden="true"><p>Content 3</p></div> </div> </div>
  62. 62. What the JavaScript does 1. Look for tabviews via data-nui-type 2. Read UI state based on classes 3. Annotate DOM with additional information 4. Use event delegation to watch for user interaction 5. Swap classes to react to events
  63. 63. https://github.com/nzakas/nui
  64. 64. Conclusion
  65. 65. Awesome! OK OK Bad! Bytes Value
  66. 66. Server HTML CSS JavaScript Rendering HTML Constructing URLs Calculating dependencies Redirecting Document structure Native functionality Accessibility Layout Colors Visibility Animation Handling Events Ajax Changing UI
  67. 67. The 4 JavaScript Load Times • Primarily analytics • Small seed filesIn <head> • Anything needed by page load • Minimal as possibleBefore </body> • Anything needed soon afterAfter page load • Anything needed as a result of user actionOn demand
  68. 68. JS Libraries and Economies of Scale Cost per JavaScript component Number of components
  69. 69. 42.3 KB 115.0 KB 27.7 KB 90.9 KB 29.0 KB 81.5 KB 85.3 KB25.7 KB Gzipped Un-gzipped 2.x 1.x
  70. 70. Thank you
  71. 71. Etcetera • My blog: nczonline.net • Twitter: @slicknet • These Slides: slideshare.net/nzakas

×