Slide 1
Slide 1 text
Embracing the network
Patrick Hamann — Web Directions, October 2015
@patrickhamann
Modern techniques for building resilient front ends
!
Slide 2
Slide 2 text
No content
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
Why?
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
https://en.wikipedia.org/wiki/Fallacies_of_distributed_computing
1. The network is reliable.
2. Latency is zero.
3. Bandwidth is infinite.
4. The network is secure.
5. Topology doesn't change.
6. There is one administrator.
7. Transport cost is zero.
8. The network is homogeneous.
The fallacies of distributed computing
PETER DEUTSCH — SUN MICROSYSTEMS, 1994
https://en.wikipedia.org/wiki/Fallacies_of_distributed_computing
Slide 10
Slide 10 text
Multiple points of failure
Dmytrii Shchadei — http://www.slideshare.net/metrofun/reduce-mobile-latency
" # #
#
$
Internal latency
Firewalls, Load Balancers,
Servers
%
Internet routing latency
CDNs, ISPs, Caches, Proxies
Control plane latency
~600ms on average UK 3G connection ~200ms
Slide 11
Slide 11 text
The radio state machine
http://developer.android.com/training/efficient-downloads/efficient-network-access.html
Radio standby Radio low power Radio full power
2s latency
1.5s latency
Radio idle for
5 seconds
Radio idle for
12 seconds
Slide 12
Slide 12 text
Title Text
Slide 13
Slide 13 text
Title Text
Request Map: http://requestmap.webperf.tools/
Slide 14
Slide 14 text
Failure is inevitable
• 1,000,000 page views a day
• 3 years product life-time
• (1000000*360)*3 = 1,080,000,000
• 1 billion opportunities for something to go wrong.
Slide 15
Slide 15 text
Baking in the assumption that everything can and will fail
leads you to think differently about how you solve problems.
SAM NEWMAN — BUILDING MICROSERVICES, O’REILLY 2015
http://shop.oreilly.com/product/0636920033158.do
Slide 16
Slide 16 text
1. Testing and monitoring failure
2. Designing for failure
3. Embracing failure
4. The future
Slide 17
Slide 17 text
Testing and monitoring failure
Slide 18
Slide 18 text
A single point of failure (SPOF) is a part of a system that, if it
fails, will stop the entire system from working. SPOFs are
undesirable in any system with a goal of high availability or
reliability, be it a business practice, software application, or
other industrial system.
https://en.wikipedia.org/wiki/Single_point_of_failure
Slide 19
Slide 19 text
Front end SPOFs
http://www.stevesouders.com/blog/2010/06/01/frontend-spof/
Chrome Firefox IE Opera Safari
External script Blank below Blank below Blank below Blank below Blank below
Stylesheet Flash Flash Blank below Flash Blank below
inlined
@font-face
Delayed Flash Flash Flash Delayed
Stylesheet
@font-face
Delayed Flash Totally blank Flash Delayed
Script then
@font-face
Delayed Flash Totally blank Flash Delayed
Slide 20
Slide 20 text
http://uk.businessinsider.com/doubleclick-for-publishers-down-2014-11
Slide 21
Slide 21 text
http://uk.businessinsider.com/doubleclick-for-publishers-down-2014-11
Slide 22
Slide 22 text
http://uk.businessinsider.com/doubleclick-for-publishers-down-2014-11
Slide 23
Slide 23 text
No content
Slide 24
Slide 24 text
https://twitter.com/scottjehl/status/636303029533282304
Slide 25
Slide 25 text
https://en.wikipedia.org/wiki/Fallacies_of_distributed_computing
Slide 26
Slide 26 text
Comcast - https://github.com/tylertreat/Comcast
$ comcast --device=eth0 --latency=250 --target-bw=1000 --packet-loss=10%
Slide 27
Slide 27 text
Facebook 2G Tuesdays - www.businessinsider.com.au/facebook-2g-tuesdays-to-slow-employee-internet-speeds-down-2015-10?op=1
Slide 28
Slide 28 text
Jeremy Keith — https://flic.kr/p/o9thWy
Slide 29
Slide 29 text
Resource timing API
http://www.w3.org/TR/resource-timing/
var resourceList = window.performance.getEntriesByType(‘resource');
for (i = 0; i < resourceList.length; i++) {
if (/link|script/.test(resourceList[i].initiatorType)) {
navigator.sendBeacon('https://stats.ft.com/', {
resource: resourceList[i].name,
timing: (resourceList[i].responseEnd - resourceList[i].startTime)
});
}
}
Slide 30
Slide 30 text
No content
Slide 31
Slide 31 text
• Test 1st and 3rd party dependencies for SPOFs
• Use network shaping to simulate mobile conditions
• Monitor all response times, timeouts and errors
• Alert if metrics pass their thresholds
Slide 32
Slide 32 text
1. Testing and monitoring failure
2. Designing for failure
3. Embracing failure
4. The future
Slide 33
Slide 33 text
Designing for failure
Slide 34
Slide 34 text
No content
Slide 35
Slide 35 text
There seems to be an excessive amount of waiting around for
pages to refresh and load -it doesn't seem as quick as the
previous version.
Luke Wroblewski – http://www.lukew.com/ff/entry.asp?1797
Slide 36
Slide 36 text
No content
Slide 37
Slide 37 text
No content
Slide 38
Slide 38 text
No content
Slide 39
Slide 39 text
No content
Slide 40
Slide 40 text
Little big details — http://littlebigdetails.com/post/56782380031/pinterest-before-image-is-loaded-the-background
Slide 41
Slide 41 text
Time and perception
Delay User perception
0 - 100ms Instant
100 - 300ms Small perceptible delay
300 - 1000ms Machine is working
1000+ ms Likely mental context switch
10,000+ ms Task is abandoned
Slide 42
Slide 42 text
No content
Slide 43
Slide 43 text
No content
Slide 44
Slide 44 text
No content
Slide 45
Slide 45 text
• Respond within a 1000ms
• Avoid loading spinners
• Consider using skeleton screens
• Re-use familiar UI patterns within error messaging
• Use human friendly copy, especially in error states
Slide 46
Slide 46 text
1. Testing and monitoring failure
2. Designing for failure
3. Embracing failure
4. The future
Slide 47
Slide 47 text
Embracing failure
Slide 48
Slide 48 text
Pre-connect
Ilya Grigorik — Eliminating roundtrips wth pre-connect: https://www.igvita.com/2015/08/17/eliminating-roundtrips-with-preconnect/
socket setup
Slide 49
Slide 49 text
Pre-connect
function preconnectTo(url) {
var hint = document.createElement("link");
hint.rel = "preconnect";
hint.href = url;
document.head.appendChild(hint);
}
Ilya Grigorik — Eliminating roundtrips wth pre-connect: https://www.igvita.com/2015/08/17/eliminating-roundtrips-with-preconnect/
Slide 50
Slide 50 text
When should I use resource hints?
Method Use case Examples Frequecy
preconnect
Initiating an early connection to
critical resources
Image hosts, CDNs and
analytics
Often
prefetch Fetch individual resource
CSS or JS required for next
page
Limited
prerender Fetch and execute HTML page Next page in a checkout flow Use with care
Slide 51
Slide 51 text
No content
Slide 52
Slide 52 text
Caching
Libraries Utilities Application
Rarely change Frequent change
Slide 53
Slide 53 text
Caching
Libraries Utilities Application
Rarely change Frequent change
Slide 54
Slide 54 text
Caching
Libraries Utilities Application
Rarely change Frequent change
&
core.js
&
app.js
Slide 55
Slide 55 text
HTTP/2
R.U.M data sampled over 1 month from https://next.ft.com/
H2 Capable
H2 Enabled
Unsupported
Mobile user load event
0ms 2,000ms 4,000ms 6,000ms 8,000ms
7,200
5,325
6,160
Slide 56
Slide 56 text
No content
Slide 57
Slide 57 text
No content
Slide 58
Slide 58 text
Loading fonts
https://tabatkins.github.io/specs/css-font-rendering/
Chrome Opera Safari Firefox IE
Timeout 3s 3s no timeout 3s 0
Fallback Yes Yes n/a Yes Yes
Swap Yes Yes n/a Yes Yes
Slide 59
Slide 59 text
CSS Font Rendering Controls Module
https://tabatkins.github.io/specs/css-font-rendering/
@font-face {
font-family: 'MyShinyFont';
src: url('http://fonts.ft.com/async.woff2');
font-display: swap;
}
@font-face {
font-family: 'MyBlockingFont';
src: url: url('http://fonts.ft.com/blocking.woff2');
font-display: block;
}
Slide 60
Slide 60 text
'
ServiceWorker
& (
%
Slide 61
Slide 61 text
'
ServiceWorker
& (
%
Slide 62
Slide 62 text
'
ServiceWorker
& (
%
Slide 63
Slide 63 text
Cache only
self.addEventListener('install', function(event) {
event.waitUntil(
caches.open(cacheName).then(function(cache) {
return cache.addAll([
‘http://fonts.ft.com/fonts.css',
'http://fonts.ft.com/serif',
'http://fonts.ft.com/sans-serif'
]);
})
);
});
https://jakearchibald.com/2014/offline-cookbook
Slide 64
Slide 64 text
Cache only
https://jakearchibald.com/2014/offline-cookbook
self.addEventListener('fetch', function(event) {
// If this is a request for font file
if (/fonts\.ft\.com/.test(event.request)) {
// If a match isn't found in the cache, the response
// will look like a connection error
event.respondWith(caches.match(event.request));
}
});
Slide 65
Slide 65 text
X
Cache only
'
& (
%
(
X
(
(
&
Slide 66
Slide 66 text
Loading CSS
https://developers.google.com/web/fundamentals/performance/critical-rendering-path/analyzing-crp?hl=en
Request page
Network
Render
GET html
Build DOM
response
Build CSSOM Render page
GET css
GET js
response
response
idle idle
Render blocking
Run JS
Render blocking
Slide 67
Slide 67 text
Loading CSS
Request page
Network
Render
GET html
Build DOM
response
Build CSSOM Render page
GET css
GET js
response
response
idle idle
Async
Render blocking
Run JS
https://developers.google.com/web/fundamentals/performance/critical-rendering-path/analyzing-crp?hl=en
Slide 68
Slide 68 text
https://github.com/filamentgroup/loadCSS
Slide 69
Slide 69 text
Loading CSS
Request page
Network
Render
GET html
Build DOM
response
Build CSSOM Render page
GET css response
idle idle
Async
https://developers.google.com/web/fundamentals/performance/critical-rendering-path/analyzing-crp?hl=en
Reflow
Slide 70
Slide 70 text
Stale-while-revalidate
self.addEventListener('fetch', function(event) {
// Get stale from cache
event.respondWith(
caches.open(cacheName).then(function(cache) {
return cache.match(event.request).then(function(response) {
// If in cache relvalidate
var network = fetch(event.request).then(function(response){
if(response.status < 400) {
cache.put(event.request, response.clone());
}
});
// Return stale or network if none
return response || network;
});
})
);
});
https://jakearchibald.com/2014/offline-cookbook
Slide 71
Slide 71 text
Stale-while-revalidate
'
& (
%
(
Slide 72
Slide 72 text
Stale-if-error
self.addEventListener('fetch', function(event) {
// Always fetch response from the network
event.respondWith(
fetch(event.request).then(function(response) {
return caches.open(cacheName).then(function(cache) {
// If we received an error response
if(!response.ok) {
return cache.match(event.request)
} else {
// Response was healthy so update cached version
cache.put(event.request, response.clone());
return response;
}
});
})
);
});
Slide 73
Slide 73 text
Timeouts
'
& (
%
X *
X
Slide 74
Slide 74 text
Timeout race
function timeout(delay) {
return new Promise(function(resolve, reject) {
setTimeout(function() {
resolve(new Response('', {
status: 408,
statusText: 'Request timed out.'
}));
}, delay);
});
}
self.addEventListener('fetch', function(event) {
// Attempt to fetch with timeout
event.respondWith(Promise.race([timeout(2000), fetch(event.request)]));
});
Slide 75
Slide 75 text
Dead letter queue
'
& (
%
X
+
offline
Slide 76
Slide 76 text
Dead letter queue
'
& (
%
+
Online
Slide 77
Slide 77 text
Dead letter queue
var queue = {};
function queueFailedRequest(request) {
queue[Date.now()] = request;
}
self.addEventListener('fetch', function(event) {
if(/track\.ft\.com/.test(event.request.url) {
event.respondWith(
fetch(event.request).then(function(response){
if(response.status >= 500) {
return Response.error();
} else {
return response;
}
}).catch(function() {
queueFailedRequest(event.request);
})
);
}
});
Slide 78
Slide 78 text
Dead letter queue
self.addEventListener('sync', function(event) {
event.waitUntil(
return Promise.all(queue.map(function(request) {
return fetch(request)
}))
);
});
Slide 79
Slide 79 text
• Pre-connect sockets
• Pre-fetch and cache critical resources
• Bundle resources by their frequency of change
• Serve stale and revalidate
• Serve stale if error
• Always use timeouts
• Treat the network as an enhancement!
Slide 80
Slide 80 text
1. Testing and monitoring failure
2. Designing for failure
3. Embracing failure
4. The future
Slide 81
Slide 81 text
The future
Slide 82
Slide 82 text
No content
Slide 83
Slide 83 text
Offline
Network unavaliable
Slide 84
Slide 84 text
Push notifications
Slide 85
Slide 85 text
Background sync
navigator.serviceWorker.ready.then(function(registration) {
regitration.periodicSync.register({
tag: 'get-latet-news', // default: ''
minPeriod: 12 * 60 * 60 * 1000, // default: 0
powertState: 'avoid-draining', // default: 'auto'
networkState: 'avoid-cellular' // default: 'online'
}).then(function(periodicsyncReg) {
// success
}, function() {
// failure
});
});
Slide 86
Slide 86 text
1. Testing and monitoring failure
2. Designing for failure
3. Embracing failure
4. The future
Slide 87
Slide 87 text
Conclusion
Slide 88
Slide 88 text
Thanks
@patrickhamann
speakerdeck.com/patrickhamann
github.com/Financial-Times
!
,
-
Do you want to help build this stuff? Join in.
[email protected]