Your SlideShare is downloading. ×
JS in Rural Communities
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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. …

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 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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. JS in Rural Communities Matthew Keas
  • 2. @matthiasak
  • 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. "one of the senior engineers began a rant about the page weight of the video watch page being far too large"
  • 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. "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. "I decided to limit the functionality" masthead video player five related videos sharing button flagging tool ten comments loaded in via AJAX remedy?
  • 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. "We  plotted  the  data  geographically  and  compared  it  to  our  total numbers  broken  out  by  region" hello! howdy! YOUTUBE .  YES!!
  • 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. Average page load time under Feather was over TWO MINUTES! 50 POSTAGE STAMP Normal page would take over 20 minutes.
  • 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. 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. Methods of Caching? Implied persistence HTML <meta> tags ( HTTP Headers ( Persist data via cookies... Appcache JavaScript? 23 ADMIT NONE 17
  • 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. 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. HTML5 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. HTML Appcache
  • 20. 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 Cachecontrol: no-store will not be cached, even if they're explicitly included in the manifest. No granular dynamic control from JS. :–(
  • 21. Is using JS to manage your cache reasonable? Yes. ( 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. Is this an original idea? Sort of. Anal y tics
  • 23. Many Script Loaders Employed Today
  • 24. We truly are spoiled with such an awesome community
  • 25. We started POC'ing Local Storage as a cache Local St orage KIC KS GRA SS SINC E IE8
  • 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. 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. Loader ary year nor he ho t of me na oa L r e d
  • 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. 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. Begin by Loading Loader
  • 32. Load Only What Is Needed 1 2 3
  • 33. Performance, Pro-formance "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. Real-World Testing?
  • 35. "Cutting the mustard"
  • 36. Where I Put My Experiments Before They Are Ready For Primetime
  • 37. FIRS T VISIT
  • 41. THANK YOU @matthiasak