JS in Rural Communities


Published on

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.


Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

JS in Rural Communities

  1. 1. JS in Rural Communities Matthew Keas
  2. 2. @matthiasak http://mkeas.org http://parivedasolutions.com
  3. 3. !e Ky Rr e Ayou He he r n po u en gons p a p ha of dr y ma o r y t as
  4. 4. "one of the senior engineers began a rant about the page weight of the video watch page being far too large"
  5. 5. "1.2MB and dozens of requests" "if they can write an entire Quake clone in under 100KB, we have no excuse for this!"
  6. 6. "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." tiny HTML
  7. 7. "I decided to limit the functionality" masthead video player five related videos sharing button flagging tool ten comments loaded in via AJAX remedy?
  8. 8. "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
  9. 9. "We  plotted  the  data  geographically  and  compared  it  to  our  total numbers  broken  out  by  region" hello! howdy! YOUTUBE .  YES!!
  10. 10. Southeast Asia A m e ri c a South OPEN Come in, Re m ot e Si be ri a WE’RE A ca ri f
  11. 11. Average page load time under Feather was over TWO MINUTES! 50 POSTAGE STAMP Normal page would take over 20 minutes.
  12. 12. "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
  13. 13. 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. 15. Methods of Caching? Implied persistence HTML <meta> tags (http://www.mnot.net/cache_docs/) HTTP Headers (http://www.mobify.com/blog/beginners-guideto-http-cache-headers/) Persist data via cookies... Appcache JavaScript? 23 ADMIT NONE 17
  16. 16. 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).
  17. 17. HTTP Headers Example Caching headers for dynamic content (Wordpress blog): 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
  18. 18. HTML5 Appcache (http://caniuse.com/#search=appcache ) 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) Pretty Sexy
  19. 19. HTML Appcache
  20. 20. Más Problemas http://appcachefacts.info / 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 Cachecontrol: no-store will not be cached, even if they're explicitly included in the manifest. No granular dynamic control from JS. :–(
  21. 21. 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.
  22. 22. Is this an original idea? Sort of. Anal y tics
  23. 23. Many Script Loaders Employed Today
  24. 24. We truly are spoiled with such an awesome community
  25. 25. We started POC'ing Local Storage as a cache Local St orage KIC KS GRA SS SINC E IE8
  26. 26. Local Storage Like  cookies Persistent At least 5MB Never attached blindly to requests Event model to keep other tabs and windows synchronized Polyfills
  27. 27. 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)
  28. 28. Loader https://github.com/matthiasak/Loader ary year nor he ho t of me na oa L r e d
  29. 29. 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.
  30. 30. 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)
  31. 31. Begin by Loading Loader
  32. 32. Load Only What Is Needed 1 2 3
  33. 33. Performance, Pro-formance http://www.stevesouders.com/blog/2011/03/28/storager-case-study-binggoogle/ "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."
  34. 34. Real-World Testing? http://jsperf.com/localstorage-versus-browsercache/6
  35. 35. "Cutting the mustard" http://responsivenews.co.uk/post/18948466399/cutting-themustard
  36. 36. Where I Put My Experiments Before They Are Ready For Primetime
  37. 37. FIRS T VISIT
  38. 38. FIRST VISIT
  40. 40. SECOND VISIT
  41. 41. THANK YOU @matthiasak