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  thou...
"I decided to limit the functionality"
masthead
video player
five related videos
sharing button
flagging tool
ten comments...
"After  a  week  of  data  collection,  the  numbers  came  back…
and  they  were  baffling.  The  average  aggregate  pag...
"We  plotted  the  data  geographically  and  compared  it  to  our  total
numbers  broken  out  by  region"

hello!
howdy...
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

...
ADDING

MATT'ISM

Improve you experience and broaden your reach
with:
• Fewer requests per page load (inlining, base64
enc...
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...
HTML <meta> tags
Meta tags are easy to use, but aren’t very effective.
That’s because they’re only honored by a few
browse...
HTTP Headers
Example Caching headers for dynamic content (Wordpress blog):

HTTP/1.1 200 OK
Cache-Control: no-transform,pu...
HTML5 Appcache
(http://caniuse.com/#search=appcache
)
No support IE9- (trolololollllll)
Offline browsing - users can navig...
HTML Appcache
Más Problemas
http://appcachefacts.info
/

One failed file in CACHE section => entire cache
disregarded.
Regardless of whe...
Is using JS to manage your cache
reasonable?
Yes. (http://caniuse.com/#feat=namevalue-storage)
If you need to support IE7 ...
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 ...
Broke-al Storage
String values only — serialization may be
necessary (awkward)
Unstructured data with no transactions, ind...
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 O...
Loading Browser Assets
Promises to control flow of async downloads and
"readystates".
Small abstraction for making a GET
S...
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 Se...
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
JS in Rural Communities
JS in Rural Communities
Upcoming SlideShare
Loading in...5
×

JS in Rural Communities

155

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.

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
155
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
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)
  14. 14. IF YOU CARE CACHE OR BEWARE
  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
  39. 39. SPEED DEMON? SECOND VISIT !
  40. 40. SECOND VISIT
  41. 41. THANK YOU @matthiasak
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×