JS in Rural Communities

MatthewKeas

http://mkeas.org

@matthiasak

http://parivedasolutions.com

may h

appen upon

here your eye

HARK!

a story of d

ragons

"one of the senior engineers began a rant about thepage 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!"

tinyHTML

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

"I decided to limit the functionality"

mastheadvideo playerfive related videossharing buttonflagging toolten 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"

HALLOWEENParty

"We  plotted  the  data  geographically  and  compared  it  to  our  totalnumbers  broken  out  by  region"

howdy!

hello!

YOUTUBE

.  YES!!

Come in, WE’RE

OPENSouth America Southeast Asia

Africa

Remote Siberia

Average page load time under Feather was over TWOMINUTES!

Normal page would take over 20 minutes.

50POSTAGE

STAMP

"By keeping your client side code small andlightweight, you can literally open your product up

to new markets."

ADDING MATT'ISM

Improve you experience and broaden your reachwith:

• 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 reachwith:

• Fewer requests per page load (inlining, base64encoding)• Smaller requests per page load (concatenation,compression, minification)• Less frequent requests per page load (caching)

IF YOU CARE

OR BEWARE

CACHE

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

NONE23 17

HTML <meta> tags

Meta tags are easy to use, but aren’t very effective. That’s because they’re only honored by a fewbrowser caches, not proxy caches (which almostnever read the HTML in the document).

HTTP Headers

HTTP/1.1 200 OKCache-Control: no-transform,public,max-age=300,s-maxage=900Content-Type: text/html; charset=UTF-8Date: Mon, 29 Apr 2013 16:38:15 GMTETag: "bbea5db7e1785119a7f94fdd504c546e"Last-Modified: Sat, 27 Apr 2013 00:44:54 GMTServer: AmazonS3Vary: Accept-EncodingX-Cache: HIT

Example Caching headers for dynamic content (Wordpress blog):

HTML5 Appcache

Pretty Sexy

No support IE9- (trolololollllll)Offline browsing - users can navigate your full sitewhen they're offline. (good)Speed - cached resources are local, and thereforeload faster. (good)Reduced server load (good)

(http://caniuse.com/#search=appcache)

HTML Appcache

:–(Más Problemas

One failed file in CACHE section => entire cachedisregarded.Regardless of whether you include the addressof the current page in the manifest, it will becached.In Firefox, any resources served with Cache-control: no-store will not be cached, even ifthey're explicitly included in the manifest.No granular dynamic control from JS.

http://appcachefacts.info/

Is using JS to manage your cachereasonable?

Yes. (http://caniuse.com/#feat=namevalue-storage)

If you need to support IE7 or Opera Mobile, thenemploy HTTP Headers and/or just load resourceslazily.

Also, polyfills.

IE8 implemented this?Wow.

Is this an original idea?

Sort of.

Analytics

Many Script Loaders EmployedToday

We truly are spoiled with such anawesome community

We started POC'ing LocalStorage as a cache

KICKSGRASS

Local Storage

SINCE IE8

Local Storage

PersistentAt least 5MBNever attached blindly to requestsEvent model to keep other tabs and windowssynchronizedPolyfills

Like  cookies

Broke-al Storage

String values only — serialization may benecessary (awkward)Unstructured data with no transactions, indexingor searching facilities (awkward)May exhibit poor performance on large datasets(bad)

Loader

Loadername of the year

honorary

https://github.com/matthiasak/Loader

Loading Browser Assets

CORS compatible or Same Origin? AJAX inparallel, cache, and execute/embed sequentially.Not Same Origin? Add Script/Link and set thesrc/href.

Loading Browser Assets

Promises to control flow of async downloads and"readystates".Small abstraction for making a GETSmall functions to write tags to the <HEAD>Tiny abstraction for Local Storage and errorhandlingAutomatically look for files to load (in similarfashion to Require.js)

Begin by Loading Loader

Load Only What Is Needed

12

3

Performance, Pro-formance

http://www.stevesouders.com/blog/2011/03/28/storager-case-study-bing-google/

"Bing and Google Search make extensive use oflocalStorage for stashing SCRIPT and STYLE blocksthat are used on subsequent page views. None of

the other top sites from my previous post uselocalStorage in this way. Are Bing and Google

Search onto something?

Yes, definitely."

Real-World Testing?

http://jsperf.com/localstorage-versus-browser-cache/6

"Cutting the mustard"

http://responsivenews.co.uk/post/18948466399/cutting-the-mustard

Where I Put My Experiments Before

They Are Ready For Primetime

FIRS

T

VISIT

FIRSTVISIT

SPEED

DEMON?

SECOND VISIT

!

SECONDVISIT

THANKYOU

@matthiasak