JS in Rural Communities

This talk is anecdotal about the story of YouTube Feather, the woes of browser caching, the effects of HTML5 Unicorns, and the undying love for all things kitten videos.

Given at http://www.jseverywhere.org/ on October 25, 2013 in San Francisco by Matthew Keas.

http://mkeas.org
http://twitter.com/matthiasak

Transcript

1. JS in Rural Communities Matthew Keas
2. http://mkeas.org @matthiasak http://parivedasolutions.com
4. may happen upon here your eye HARK! a story of dragons
5. "one of the senior engineers began a rant about the page weight of the video watch page being far too large"
6. "1.2MB and dozens of requests" "if they can write an entire Quake clone in under 100KB, we have no excuse for this!"
7. tiny HTML "After  three  painstaking  days,  I  had  arrived  at  a  much  leaner solution.  It  still  was  not  under  100KB  though.  Having  just finished  writing  the  HTML5  video  player,  I  decided  to  plug  it in  instead  of  the  far  heavier  Flash  player.  Bam!  98KB  and only  14  requests."
8. "I decided to limit the functionality" masthead video player five related videos sharing button flagging tool ten comments loaded in via AJAX remedy?
9. "After  a  week  of  data  collection,  the  numbers  came  back… and  they  were  baffling.  The  average  aggregate  page  latency under  Feather  had  actually  INCREASED" HALLOWEEN Party
10. "We  plotted  the  data  geographically  and  compared  it  to  our  total numbers  broken  out  by  region" howdy! hello! YOUTUBE .  YES!!
11. Come in, WE’RE OPEN South America Southeast Asia Africa Rem ote Siberia
12. Average page load time under Feather was over TWO MINUTES! Normal page would take over 20 minutes. 50 POSTAGE STAMP
13. "By keeping your client side code small and lightweight, you can literally open your product up to new markets." ADDING MATT'ISM Improve you experience and broaden your reach with: • Fewer requests per page load • Smaller requests per page load • Less frequent requests per page load
14. ADDING MATT'ISM Improve you experience and broaden your reach with: • Fewer requests per page load (inlining, base64 encoding) • Smaller requests per page load (concatenation, compression, minification) • Less frequent requests per page load (caching)
15. IF YOU CARE OR BEWARE CACHE
16. Methods of Caching? HTML <meta> tags (http://www.mnot.net/cache_docs/) HTTP Headers (http://www.mobify.com/blog/beginners-guide- to-http-cache-headers/) Persist data via cookies... Appcache JavaScript? Implied persistence ADMIT NONE 23 17
17. HTML <meta> tags Meta tags are easy to use, but aren’t very effective. That’s because they’re only honored by a few browser caches, not proxy caches (which almost never read the HTML in the document).
18. HTTP Headers HTTP/1.1 200 OK Cache-Control: no-transform,public,max-age=300,s-maxage=900 Content-Type: text/html; charset=UTF-8 Date: Mon, 29 Apr 2013 16:38:15 GMT ETag: "bbea5db7e1785119a7f94fdd504c546e" Last-Modified: Sat, 27 Apr 2013 00:44:54 GMT Server: AmazonS3 Vary: Accept-Encoding X-Cache: HIT Example Caching headers for dynamic content (Wordpress blog):
19. HTML5 Appcache Pretty Sexy No support IE9- (trolololollllll) Offline browsing - users can navigate your full site when they're offline. (good) Speed - cached resources are local, and therefore load faster. (good) Reduced server load (good) (http://caniuse.com/#search=appcache )
20. HTML Appcache
21. :–( Más Problemas One failed file in CACHE section => entire cache disregarded. Regardless of whether you include the address of the current page in the manifest, it will be cached. In Firefox, any resources served with Cache- control: no-store will not be cached, even if they're explicitly included in the manifest. No granular dynamic control from JS. http://appcachefacts.info /
22. Is using JS to manage your cache reasonable? Yes. (http://caniuse.com/#feat=namevalue-storage) If you need to support IE7 or Opera Mobile, then employ HTTP Headers and/or just load resources lazily. Also, polyfills. IE8 implemented this? Wow.
23. Is this an original idea? Sort of. Analytics
24. Many Script Loaders Employed Today
25. We truly are spoiled with such an awesome community
26. We started POC'ing Local Storage as a cache KICKS GRASS Local Storage SINCE IE8
27. Local Storage Persistent At least 5MB Never attached blindly to requests Event model to keep other tabs and windows synchronized Polyfills Like  cookies
28. Broke-al Storage String values only — serialization may be necessary (awkward) Unstructured data with no transactions, indexing or searching facilities (awkward) May exhibit poor performance on large datasets (bad)
29. Loader Loader name of the year honorary https://github.com/matthiasak/Loader
30. Loading Browser Assets CORS compatible or Same Origin? AJAX in parallel, cache, and execute/embed sequentially. Not Same Origin? Add Script/Link and set the src/href.
31. Loading Browser Assets Promises to control flow of async downloads and "readystates". Small abstraction for making a GET Small functions to write tags to the <HEAD> Tiny abstraction for Local Storage and error handling Automatically look for files to load (in similar fashion to Require.js)
32. Begin by Loading Loader
33. Load Only What Is Needed 1 2 3
34. Performance, Pro-formance http://www.stevesouders.com/blog/2011/03/28/storager-case-study-bing- google/ "Bing and Google Search make extensive use of localStorage for stashing SCRIPT and STYLE blocks that are used on subsequent page views. None of the other top sites from my previous post use localStorage in this way. Are Bing and Google Search onto something? Yes, definitely."
35. Real-World Testing? http://jsperf.com/localstorage-versus-browser- cache/6
36. "Cutting the mustard" http://responsivenews.co.uk/post/18948466399/cutting-the- mustard
38. Where I Put My Experiments Before They Are Ready For Primetime
39. FIRS T VISIT
40. FIRST VISIT
41. SPEED DEMON? SECOND VISIT !
42. SECOND VISIT
43. THANK YOU @matthiasak