![Page 1: Enough with the javas cript already! de Nicholas Zakas](https://reader035.vdocuments.net/reader035/viewer/2022062406/559069f41a28ab49488b456f/html5/thumbnails/1.jpg)
Enough with the JavaScript Already!
Nicholas C. Zakas@slicknet
![Page 2: Enough with the javas cript already! de Nicholas Zakas](https://reader035.vdocuments.net/reader035/viewer/2022062406/559069f41a28ab49488b456f/html5/thumbnails/2.jpg)
![Page 3: Enough with the javas cript already! de Nicholas Zakas](https://reader035.vdocuments.net/reader035/viewer/2022062406/559069f41a28ab49488b456f/html5/thumbnails/3.jpg)
@slicknet
Complaints: @souders
![Page 4: Enough with the javas cript already! de Nicholas Zakas](https://reader035.vdocuments.net/reader035/viewer/2022062406/559069f41a28ab49488b456f/html5/thumbnails/4.jpg)
![Page 5: Enough with the javas cript already! de Nicholas Zakas](https://reader035.vdocuments.net/reader035/viewer/2022062406/559069f41a28ab49488b456f/html5/thumbnails/5.jpg)
2004
![Page 6: Enough with the javas cript already! de Nicholas Zakas](https://reader035.vdocuments.net/reader035/viewer/2022062406/559069f41a28ab49488b456f/html5/thumbnails/6.jpg)
![Page 7: Enough with the javas cript already! de Nicholas Zakas](https://reader035.vdocuments.net/reader035/viewer/2022062406/559069f41a28ab49488b456f/html5/thumbnails/7.jpg)
2005
![Page 8: Enough with the javas cript already! de Nicholas Zakas](https://reader035.vdocuments.net/reader035/viewer/2022062406/559069f41a28ab49488b456f/html5/thumbnails/8.jpg)
http://www.adaptivepath.com/ideas/ajax-new-approach-web-applications
![Page 9: Enough with the javas cript already! de Nicholas Zakas](https://reader035.vdocuments.net/reader035/viewer/2022062406/559069f41a28ab49488b456f/html5/thumbnails/9.jpg)
![Page 10: Enough with the javas cript already! de Nicholas Zakas](https://reader035.vdocuments.net/reader035/viewer/2022062406/559069f41a28ab49488b456f/html5/thumbnails/10.jpg)
2006
![Page 11: Enough with the javas cript already! de Nicholas Zakas](https://reader035.vdocuments.net/reader035/viewer/2022062406/559069f41a28ab49488b456f/html5/thumbnails/11.jpg)
![Page 12: Enough with the javas cript already! de Nicholas Zakas](https://reader035.vdocuments.net/reader035/viewer/2022062406/559069f41a28ab49488b456f/html5/thumbnails/12.jpg)
2007
![Page 13: Enough with the javas cript already! de Nicholas Zakas](https://reader035.vdocuments.net/reader035/viewer/2022062406/559069f41a28ab49488b456f/html5/thumbnails/13.jpg)
Atwood’s LawAny 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
![Page 14: Enough with the javas cript already! de Nicholas Zakas](https://reader035.vdocuments.net/reader035/viewer/2022062406/559069f41a28ab49488b456f/html5/thumbnails/14.jpg)
2013
![Page 15: Enough with the javas cript already! de Nicholas Zakas](https://reader035.vdocuments.net/reader035/viewer/2022062406/559069f41a28ab49488b456f/html5/thumbnails/15.jpg)
![Page 16: Enough with the javas cript already! de Nicholas Zakas](https://reader035.vdocuments.net/reader035/viewer/2022062406/559069f41a28ab49488b456f/html5/thumbnails/16.jpg)
“Help, Nicholas! Our JavaScript is killing our site performance!”
- Everyone who contacted me while consulting
![Page 17: Enough with the javas cript already! de Nicholas Zakas](https://reader035.vdocuments.net/reader035/viewer/2022062406/559069f41a28ab49488b456f/html5/thumbnails/17.jpg)
> 1 MB*JavaScript loaded during page load
* Un-gzipped
![Page 18: Enough with the javas cript already! de Nicholas Zakas](https://reader035.vdocuments.net/reader035/viewer/2022062406/559069f41a28ab49488b456f/html5/thumbnails/18.jpg)
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
![Page 19: Enough with the javas cript already! de Nicholas Zakas](https://reader035.vdocuments.net/reader035/viewer/2022062406/559069f41a28ab49488b456f/html5/thumbnails/19.jpg)
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
![Page 20: Enough with the javas cript already! de Nicholas Zakas](https://reader035.vdocuments.net/reader035/viewer/2022062406/559069f41a28ab49488b456f/html5/thumbnails/20.jpg)
Source: HTTP Archive
![Page 21: Enough with the javas cript already! de Nicholas Zakas](https://reader035.vdocuments.net/reader035/viewer/2022062406/559069f41a28ab49488b456f/html5/thumbnails/21.jpg)
256 KB
260 KB 993.96 KB
793.5 KB
1570.4 KB503 KB
196 KB 568.7 KB
Gzipped Un-gzipped
![Page 22: Enough with the javas cript already! de Nicholas Zakas](https://reader035.vdocuments.net/reader035/viewer/2022062406/559069f41a28ab49488b456f/html5/thumbnails/22.jpg)
![Page 23: Enough with the javas cript already! de Nicholas Zakas](https://reader035.vdocuments.net/reader035/viewer/2022062406/559069f41a28ab49488b456f/html5/thumbnails/23.jpg)
![Page 24: Enough with the javas cript already! de Nicholas Zakas](https://reader035.vdocuments.net/reader035/viewer/2022062406/559069f41a28ab49488b456f/html5/thumbnails/24.jpg)
Time Spent During a Project
0%10%20%30%40%50%60%70%80%90%
100%
HTMLCSSJavaScript
![Page 25: Enough with the javas cript already! de Nicholas Zakas](https://reader035.vdocuments.net/reader035/viewer/2022062406/559069f41a28ab49488b456f/html5/thumbnails/25.jpg)
Client-Side Rendering
![Page 26: Enough with the javas cript already! de Nicholas Zakas](https://reader035.vdocuments.net/reader035/viewer/2022062406/559069f41a28ab49488b456f/html5/thumbnails/26.jpg)
Hogan.js{dust.js}EJS
![Page 27: Enough with the javas cript already! de Nicholas Zakas](https://reader035.vdocuments.net/reader035/viewer/2022062406/559069f41a28ab49488b456f/html5/thumbnails/27.jpg)
![Page 28: Enough with the javas cript already! de Nicholas Zakas](https://reader035.vdocuments.net/reader035/viewer/2022062406/559069f41a28ab49488b456f/html5/thumbnails/28.jpg)
“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
![Page 29: Enough with the javas cript already! de Nicholas Zakas](https://reader035.vdocuments.net/reader035/viewer/2022062406/559069f41a28ab49488b456f/html5/thumbnails/29.jpg)
![Page 31: Enough with the javas cript already! de Nicholas Zakas](https://reader035.vdocuments.net/reader035/viewer/2022062406/559069f41a28ab49488b456f/html5/thumbnails/31.jpg)
“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
![Page 32: Enough with the javas cript already! de Nicholas Zakas](https://reader035.vdocuments.net/reader035/viewer/2022062406/559069f41a28ab49488b456f/html5/thumbnails/32.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
![Page 33: Enough with the javas cript already! de Nicholas Zakas](https://reader035.vdocuments.net/reader035/viewer/2022062406/559069f41a28ab49488b456f/html5/thumbnails/33.jpg)
“…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
![Page 34: Enough with the javas cript already! de Nicholas Zakas](https://reader035.vdocuments.net/reader035/viewer/2022062406/559069f41a28ab49488b456f/html5/thumbnails/34.jpg)
The server & browser are better at this than us
![Page 35: Enough with the javas cript already! de Nicholas Zakas](https://reader035.vdocuments.net/reader035/viewer/2022062406/559069f41a28ab49488b456f/html5/thumbnails/35.jpg)
Progressive enhancement still works
![Page 36: Enough with the javas cript already! de Nicholas Zakas](https://reader035.vdocuments.net/reader035/viewer/2022062406/559069f41a28ab49488b456f/html5/thumbnails/36.jpg)
Unused JavaScript
![Page 37: Enough with the javas cript already! de Nicholas Zakas](https://reader035.vdocuments.net/reader035/viewer/2022062406/559069f41a28ab49488b456f/html5/thumbnails/37.jpg)
60-65%JavaScript that was not executed by page load*
* My consulting clients
![Page 38: Enough with the javas cript already! de Nicholas Zakas](https://reader035.vdocuments.net/reader035/viewer/2022062406/559069f41a28ab49488b456f/html5/thumbnails/38.jpg)
The 4 JavaScript Load Times
In <head>
Before </body>
After page load
On demand
![Page 39: Enough with the javas cript already! de Nicholas Zakas](https://reader035.vdocuments.net/reader035/viewer/2022062406/559069f41a28ab49488b456f/html5/thumbnails/39.jpg)
Prerequisite:
What are the top 2-3 things users do on this page?
![Page 40: Enough with the javas cript already! de Nicholas Zakas](https://reader035.vdocuments.net/reader035/viewer/2022062406/559069f41a28ab49488b456f/html5/thumbnails/40.jpg)
aka Prerequisite:
Analytics!
In <head>
![Page 41: Enough with the javas cript already! de Nicholas Zakas](https://reader035.vdocuments.net/reader035/viewer/2022062406/559069f41a28ab49488b456f/html5/thumbnails/41.jpg)
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.”
![Page 42: Enough with the javas cript already! de Nicholas Zakas](https://reader035.vdocuments.net/reader035/viewer/2022062406/559069f41a28ab49488b456f/html5/thumbnails/42.jpg)
Scripts needed by page load
Before </body>
![Page 43: Enough with the javas cript already! de Nicholas Zakas](https://reader035.vdocuments.net/reader035/viewer/2022062406/559069f41a28ab49488b456f/html5/thumbnails/43.jpg)
Before </body>
![Page 44: Enough with the javas cript already! de Nicholas Zakas](https://reader035.vdocuments.net/reader035/viewer/2022062406/559069f41a28ab49488b456f/html5/thumbnails/44.jpg)
Scripts needed soon after page load
After page load
![Page 45: Enough with the javas cript already! de Nicholas Zakas](https://reader035.vdocuments.net/reader035/viewer/2022062406/559069f41a28ab49488b456f/html5/thumbnails/45.jpg)
After page load
![Page 46: Enough with the javas cript already! de Nicholas Zakas](https://reader035.vdocuments.net/reader035/viewer/2022062406/559069f41a28ab49488b456f/html5/thumbnails/46.jpg)
In reaction to user
On demand
![Page 47: Enough with the javas cript already! de Nicholas Zakas](https://reader035.vdocuments.net/reader035/viewer/2022062406/559069f41a28ab49488b456f/html5/thumbnails/47.jpg)
On demand
![Page 48: Enough with the javas cript already! de Nicholas Zakas](https://reader035.vdocuments.net/reader035/viewer/2022062406/559069f41a28ab49488b456f/html5/thumbnails/48.jpg)
http://alexsexton.com/blog/2013/03/deploying-javascript-applications/
![Page 49: Enough with the javas cript already! de Nicholas Zakas](https://reader035.vdocuments.net/reader035/viewer/2022062406/559069f41a28ab49488b456f/html5/thumbnails/49.jpg)
http://alexsexton.com/blog/2013/03/deploying-javascript-applications/
![Page 50: Enough with the javas cript already! de Nicholas Zakas](https://reader035.vdocuments.net/reader035/viewer/2022062406/559069f41a28ab49488b456f/html5/thumbnails/50.jpg)
JavaScript Libraries(they are big)
![Page 51: Enough with the javas cript already! de Nicholas Zakas](https://reader035.vdocuments.net/reader035/viewer/2022062406/559069f41a28ab49488b456f/html5/thumbnails/51.jpg)
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
![Page 52: Enough with the javas cript already! de Nicholas Zakas](https://reader035.vdocuments.net/reader035/viewer/2022062406/559069f41a28ab49488b456f/html5/thumbnails/52.jpg)
Library Code Component Code
![Page 53: Enough with the javas cript already! de Nicholas Zakas](https://reader035.vdocuments.net/reader035/viewer/2022062406/559069f41a28ab49488b456f/html5/thumbnails/53.jpg)
Library Code Component Code
![Page 54: Enough with the javas cript already! de Nicholas Zakas](https://reader035.vdocuments.net/reader035/viewer/2022062406/559069f41a28ab49488b456f/html5/thumbnails/54.jpg)
Library Code Component Code
![Page 55: Enough with the javas cript already! de Nicholas Zakas](https://reader035.vdocuments.net/reader035/viewer/2022062406/559069f41a28ab49488b456f/html5/thumbnails/55.jpg)
Library Code Component Code
![Page 56: Enough with the javas cript already! de Nicholas Zakas](https://reader035.vdocuments.net/reader035/viewer/2022062406/559069f41a28ab49488b456f/html5/thumbnails/56.jpg)
As JS Libraries Develop
0
10
20
30
40
50
60
70
80
90
100
0
2
4
6
8
10
12
14
16
Library CodeComponent CodeNumber of Components
![Page 57: Enough with the javas cript already! de Nicholas Zakas](https://reader035.vdocuments.net/reader035/viewer/2022062406/559069f41a28ab49488b456f/html5/thumbnails/57.jpg)
JS Libraries and Economies of Scale
Cost perJavaScriptcomponent
Number of components
![Page 58: Enough with the javas cript already! de Nicholas Zakas](https://reader035.vdocuments.net/reader035/viewer/2022062406/559069f41a28ab49488b456f/html5/thumbnails/58.jpg)
Library Code Component Code
![Page 59: Enough with the javas cript already! de Nicholas Zakas](https://reader035.vdocuments.net/reader035/viewer/2022062406/559069f41a28ab49488b456f/html5/thumbnails/59.jpg)
Tabs
![Page 60: Enough with the javas cript already! de Nicholas Zakas](https://reader035.vdocuments.net/reader035/viewer/2022062406/559069f41a28ab49488b456f/html5/thumbnails/60.jpg)
Tabs?
63.1 KB 120.8 KB
95.3 KB30.2 KB
Gzipped Un-gzipped
1.x
1.9 KB 5.0 KB
How?
![Page 61: Enough with the javas cript already! de Nicholas Zakas](https://reader035.vdocuments.net/reader035/viewer/2022062406/559069f41a28ab49488b456f/html5/thumbnails/61.jpg)
![Page 62: Enough with the javas cript already! de Nicholas Zakas](https://reader035.vdocuments.net/reader035/viewer/2022062406/559069f41a28ab49488b456f/html5/thumbnails/62.jpg)
Step 1Include HTML on the page
![Page 63: Enough with the javas cript already! de Nicholas Zakas](https://reader035.vdocuments.net/reader035/viewer/2022062406/559069f41a28ab49488b456f/html5/thumbnails/63.jpg)
<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!
![Page 64: Enough with the javas cript already! de Nicholas Zakas](https://reader035.vdocuments.net/reader035/viewer/2022062406/559069f41a28ab49488b456f/html5/thumbnails/64.jpg)
Step 2Store UI state on the DOM
![Page 65: Enough with the javas cript already! de Nicholas Zakas](https://reader035.vdocuments.net/reader035/viewer/2022062406/559069f41a28ab49488b456f/html5/thumbnails/65.jpg)
<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!
![Page 66: Enough with the javas cript already! de Nicholas Zakas](https://reader035.vdocuments.net/reader035/viewer/2022062406/559069f41a28ab49488b456f/html5/thumbnails/66.jpg)
Step 3Sprinkle in some JS
![Page 67: Enough with the javas cript already! de Nicholas Zakas](https://reader035.vdocuments.net/reader035/viewer/2022062406/559069f41a28ab49488b456f/html5/thumbnails/67.jpg)
<script>nui.init();</script>
One call to initialize all instances
![Page 68: Enough with the javas cript already! de Nicholas Zakas](https://reader035.vdocuments.net/reader035/viewer/2022062406/559069f41a28ab49488b456f/html5/thumbnails/68.jpg)
// none of thisvar tabview = new MyLibrary.TabView("#tabs", { selected: 1 });
// none of this$(“#tabs”).tabs();
Just add more
HTML!
![Page 69: Enough with the javas cript already! de Nicholas Zakas](https://reader035.vdocuments.net/reader035/viewer/2022062406/559069f41a28ab49488b456f/html5/thumbnails/69.jpg)
<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>
![Page 70: Enough with the javas cript already! de Nicholas Zakas](https://reader035.vdocuments.net/reader035/viewer/2022062406/559069f41a28ab49488b456f/html5/thumbnails/70.jpg)
Sure, but I bet there’s no accessibility
![Page 71: Enough with the javas cript already! de Nicholas Zakas](https://reader035.vdocuments.net/reader035/viewer/2022062406/559069f41a28ab49488b456f/html5/thumbnails/71.jpg)
Wrong
![Page 72: Enough with the javas cript already! de Nicholas Zakas](https://reader035.vdocuments.net/reader035/viewer/2022062406/559069f41a28ab49488b456f/html5/thumbnails/72.jpg)
<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>
![Page 73: Enough with the javas cript already! de Nicholas Zakas](https://reader035.vdocuments.net/reader035/viewer/2022062406/559069f41a28ab49488b456f/html5/thumbnails/73.jpg)
What the JavaScript does1. Look for tabviews via data-nui-type2. Read UI state based on classes3. Annotate DOM with additional information4. Use event delegation to watch for user
interaction5. Swap classes to react to events
![Page 75: Enough with the javas cript already! de Nicholas Zakas](https://reader035.vdocuments.net/reader035/viewer/2022062406/559069f41a28ab49488b456f/html5/thumbnails/75.jpg)
Conclusion
![Page 76: Enough with the javas cript already! de Nicholas Zakas](https://reader035.vdocuments.net/reader035/viewer/2022062406/559069f41a28ab49488b456f/html5/thumbnails/76.jpg)
Awesome!
OK
OK
Bad!
Bytes
Valu
e
![Page 77: Enough with the javas cript already! de Nicholas Zakas](https://reader035.vdocuments.net/reader035/viewer/2022062406/559069f41a28ab49488b456f/html5/thumbnails/77.jpg)
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
![Page 78: Enough with the javas cript already! de Nicholas Zakas](https://reader035.vdocuments.net/reader035/viewer/2022062406/559069f41a28ab49488b456f/html5/thumbnails/78.jpg)
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
![Page 79: Enough with the javas cript already! de Nicholas Zakas](https://reader035.vdocuments.net/reader035/viewer/2022062406/559069f41a28ab49488b456f/html5/thumbnails/79.jpg)
JS Libraries and Economies of Scale
Cost perJavaScriptcomponent
Number of components
![Page 80: Enough with the javas cript already! de Nicholas Zakas](https://reader035.vdocuments.net/reader035/viewer/2022062406/559069f41a28ab49488b456f/html5/thumbnails/80.jpg)
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
![Page 81: Enough with the javas cript already! de Nicholas Zakas](https://reader035.vdocuments.net/reader035/viewer/2022062406/559069f41a28ab49488b456f/html5/thumbnails/81.jpg)
![Page 82: Enough with the javas cript already! de Nicholas Zakas](https://reader035.vdocuments.net/reader035/viewer/2022062406/559069f41a28ab49488b456f/html5/thumbnails/82.jpg)
Thank you
![Page 83: Enough with the javas cript already! de Nicholas Zakas](https://reader035.vdocuments.net/reader035/viewer/2022062406/559069f41a28ab49488b456f/html5/thumbnails/83.jpg)
Etcetera• My blog: nczonline.net• Twitter: @slicknet• These Slides: slideshare.net/nzakas