JS in Rural Communities
Upcoming SlideShare
Loading in...5
×
 

JS in Rural Communities

on

  • 221 views

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 http://www.jseverywhere.org/ on October 25, 2013 in San Francisco by Matthew Keas.

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

Statistics

Views

Total Views
221
Views on SlideShare
221
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

JS in Rural Communities JS in Rural Communities Presentation Transcript

  • JS in Rural Communities Matthew Keas
  • @matthiasak http://mkeas.org http://parivedasolutions.com
  • !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
  • "one of the senior engineers began a rant about the page weight of the video watch page being far too large"
  • "1.2MB and dozens of requests" "if they can write an entire Quake clone in under 100KB, we have no excuse for this!"
  • "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
  • "I decided to limit the functionality" masthead video player five related videos sharing button flagging tool ten comments loaded in via AJAX remedy?
  • "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
  • "We  plotted  the  data  geographically  and  compared  it  to  our  total numbers  broken  out  by  region" hello! howdy! YOUTUBE .  YES!!
  • 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
  • Average page load time under Feather was over TWO MINUTES! 50 POSTAGE STAMP Normal page would take over 20 minutes.
  • "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
  • 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)
  • IF YOU CARE CACHE OR BEWARE
  • 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
  • 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).
  • 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
  • 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
  • HTML Appcache
  • 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. :–(
  • 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.
  • Is this an original idea? Sort of. Anal y tics
  • Many Script Loaders Employed Today
  • We truly are spoiled with such an awesome community
  • We started POC'ing Local Storage as a cache Local St orage KIC KS GRA SS SINC E IE8
  • Local Storage Like  cookies Persistent At least 5MB Never attached blindly to requests Event model to keep other tabs and windows synchronized Polyfills
  • 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)
  • Loader https://github.com/matthiasak/Loader ary year nor he ho t of me na oa L r e d
  • 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.
  • 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)
  • Begin by Loading Loader
  • Load Only What Is Needed 1 2 3
  • 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."
  • Real-World Testing? http://jsperf.com/localstorage-versus-browsercache/6
  • "Cutting the mustard" http://responsivenews.co.uk/post/18948466399/cutting-themustard
  • Where I Put My Experiments Before They Are Ready For Primetime
  • FIRS T VISIT
  • FIRST VISIT
  • SPEED DEMON? SECOND VISIT !
  • SECOND VISIT
  • THANK YOU @matthiasak