The document discusses the growing prevalence and performance issues of JavaScript-heavy websites. It argues that much of the client-side logic in JavaScript libraries can be moved to the server by sharing code between server and client. Several companies that have done this, like Twitter and Airbnb, are cited as seeing significant improvements to initial page load times and a better user experience. The document also advocates for a progressive enhancement approach to JavaScript, loading scripts intelligently based on user needs and minimizing unused code.
13. 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
28. “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
31. “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
32. “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
33. “…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
41. 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.”
73. 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
77. 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
78. 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
79. JS Libraries and Economies of Scale
Cost per
JavaScript
component
Number of components