Downloaded 1,165 times
![“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](https://image.slidesharecdn.com/enoughwiththejavascriptalready-130620204734-phpapp01/85/Enough-with-the-JavaScript-already-33-320.jpg)
![“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](https://image.slidesharecdn.com/enoughwiththejavascriptalready-130620204734-phpapp01/75/Enough-with-the-JavaScript-already-33-2048.jpg)
Uploaded byNicholas Zakas
Enough with the JavaScript already!
The document discusses the challenges and solutions related to JavaScript performance in web applications, emphasizing the need to optimize loading times and manage complexity. It highlights various strategies, including server-side rendering and progressive enhancement, to improve user experience while addressing issues like excessive JavaScript downloads. The author provides insights into how to balance the use of JavaScript libraries and components to enhance performance without compromising functionality.
More Related Content
Similar to Enough with the JavaScript already!
![There Are No “Buts” in Progressive Enhancement [Øredev 2015]](https://cdn.slidesharecdn.com/ss_thumbnails/therearenobutsinprogressiveenhancementredev-151106102141-lva1-app6892-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
Enough with the JavaScript already!
- 1. Enough with the JavaScript Already! NicholasC. Zakas @slicknet
- 3.
- 5.
- 7.
- 8.
- 10.
- 12.
- 13. Atwood’s Law Any applicationthat can be written in JavaScript, will eventually be written in JavaScript. http://www.codinghorror.com/blog/2007/07/the-principle-of-least-power.html
- 14.
- 16. “Help, Nicholas! Our JavaScriptis killing our site performance!” - Everyone who contacted me while consulting
- 17. > 1 MB* JavaScriptloaded during page load * Un-gzipped
- 18. Server HTML CSSJavaScript Rendering HTML Constructing URLs Calculating dependencies Redirecting Document structure Native functionality Accessibility Layout Colors Visibility Animation Handling Events Ajax Changing UI
- 19. Server HTML CSSJavaScript Rendering HTML Constructing URLs Calculating dependencies Redirecting Document structure Native functionality Accessibility Layout Colors Visibility Animation Handling Events Ajax Changing UI
- 20.
- 21. 256 KB 260 KB993.96 KB 793.5 KB 1570.4 KB503 KB 196 KB 568.7 KB Gzipped Un-gzipped
- 24. Time Spent Duringa Project 0% 10% 20% 30% 40% 50% 60% 70% 80% 90% 100% HTML CSS JavaScript
- 25.
- 26.
- 27.
- 28.
- 29. “It's no longergood enough to build web apps around full page loads and then progressively enhance them to behave more dynamically.” - throneofjs.com
- 31.
- 32. “To improve thetwitter.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
- 33. “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
- 34. “…we re-launched ourMobile 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
- 35. The server & browserare better at this than us
- 36.
- 37.
- 38. 60-65% JavaScript that wasnot executed by page load* * My consulting clients
- 39. The 4 JavaScriptLoad Times In <head> Before </body> After page load On demand
- 40. Prerequisite: What are thetop 2-3 things users do on this page?
- 41.
- 42. https://support.google.com/analytics/answer/1008080?hl=en “Once you findthe 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.”
- 43. Scripts needed by pageload Before </body>
- 44.
- 45. Scripts needed soon afterpage load After page load
- 46.
- 47. In reaction touser On demand
- 48.
- 49.
- 50.
- 51.
- 52. 42.3 KB 115.0KB 27.7 KB 90.9 KB 29.0 KB 81.5 KB 85.3 KB25.7 KB Gzipped Un-gzipped 2.x 1.x
- 53.
- 54.
- 55.
- 56.
- 57. As JS LibrariesDevelop 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
- 58. JS Libraries andEconomies of Scale Cost per JavaScript component Number of components
- 59.
- 60.
- 61. Tabs? 63.1 KB 120.8KB 95.3 KB30.2 KB Gzipped Un-gzipped 1.x 1.9 KB 5.0 KB How?
- 63. Step 1 Include HTMLon the page
- 64. <div data-nui-type="tabview" class="nui-tabview"> <olclass="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!
- 65. Step 2 Store UIstate on the DOM
- 66. <div data-nui-type="tabview" class="nui-tabview"> <olclass="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!
- 67. Step 3 Sprinkle insome JS
- 68.
- 69. // none ofthis var tabview = new MyLibrary.TabView("#tabs", { selected: 1 }); // none of this $(“#tabs”).tabs(); Just add more HTML!
- 70. <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>
- 71. Sure, but Ibet there’s no accessibility
- 72.
- 73. <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>
- 74. What the JavaScriptdoes 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
- 75.
- 76.
- 77.
- 78. Server HTML CSSJavaScript Rendering HTML Constructing URLs Calculating dependencies Redirecting Document structure Native functionality Accessibility Layout Colors Visibility Animation Handling Events Ajax Changing UI
- 79. The 4 JavaScriptLoad 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
- 80. JS Libraries andEconomies of Scale Cost per JavaScript component Number of components
- 81. 42.3 KB 115.0KB 27.7 KB 90.9 KB 29.0 KB 81.5 KB 85.3 KB25.7 KB Gzipped Un-gzipped 2.x 1.x
- 83.
- 84. Etcetera • My blog:nczonline.net • Twitter: @slicknet • These Slides: slideshare.net/nzakas