Embracing the Network — DIBI Conf, March 2016

This version of the talk was originally presented at DIBI Conf in Edinburgh, Scotland on the 18th March 2016.

The network is intrinsically unreliable. More so, the network is out of your control as a developer. Therefore, we must design systems which embrace the unpredictability of the network and defend against it all costs. How can you prioritise the delivery of your core content? What best-practices can you use to optimise your assets? How can we design interfaces which adapt and respond to changing network conditions? And finally, how are new APIs such as ServiceWorker changing the way we think about the network?

During this talk Patrick will share his experiences delivering high-performance websites to millions of users over the past 3 years at The Guardian and Financial Times. Which – most importantly – are resilient to the network.

Transcript

1. Embracing the network
   Patrick Hamann — DIBI, March 2016

   @patrickhamann
   Modern techniques for building resilient front ends
   !
   

   View Slide

2. View Slide

3. View Slide

4. Why?
   

   View Slide

5. FT.com
   

   View Slide

6. View Slide

7. View Slide

8. View Slide

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

   View Slide

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

    View Slide

11. Title Text
    

    View Slide

12. Title Text
    Request Map: http://requestmap.webperf.tools/
    

    View Slide

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

    View Slide

14. 1. Testing and monitoring failure
    2. Designing for failure
    3. Embracing failure
    4. The future
    

    View Slide

15. Testing for failure
    

    View Slide

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

    View Slide

17. http://uk.businessinsider.com/doubleclick-for-publishers-down-2014-11
    

    View Slide

18. http://uk.businessinsider.com/doubleclick-for-publishers-down-2014-11
    

    View Slide

19. http://uk.businessinsider.com/doubleclick-for-publishers-down-2014-11
    http://www.stevesouders.com/blog/2010/06/01/frontend-spof/
    

    View Slide

20. View Slide

21. https://en.wikipedia.org/wiki/Fallacies_of_distributed_computing
    

    View Slide

22. Facebook 2G Tuesdays - www.businessinsider.com.au/facebook-2g-tuesdays-to-slow-employee-internet-speeds-down-2015-10?op=1
    

    View Slide

23. User Timing API
    http://www.w3.org/TR/resource-timing/
    window.performance.mark(“fonts-loaded“);
    <br/>window.performance.mark("css-start");<br/>

    
    
    <br/>performance.mark("css-end");<br/>performance.measure("css-loading", "css-start", "css-end");<br/>
    

    View Slide

24. View Slide

25. View Slide

26. • Test 1st and 3rd party dependencies for SPOFs
    • Use network shaping to simulate mobile conditions
    • Monitor metrics contextual to your business
    • Mark and measure your custom events
    • Alert if metrics pass their thresholds/budgets
    

    View Slide

27. 1. Testing and monitoring failure
    2. Designing for failure
    3. Embracing failure
    4. The future
    

    View Slide

28. Designing for failure
    

    View Slide

29. View Slide

30. View Slide

31. View Slide

32. View Slide

33. View Slide

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

    View Slide

35. View Slide

36. View Slide

37. View Slide

38. • 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
    • Visualise the state of the network
    

    View Slide

39. 1. Testing and monitoring failure
    2. Designing for failure
    3. Embracing failure
    4. The future
    

    View Slide

40. Embracing failure
    

    View Slide

41. View Slide

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

    View Slide

43. 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;
    }
    

    View Slide

44. &
    ServiceWorker
    ' (
    %
    

    View Slide

45. &
    ServiceWorker
    ' (
    %
    
    

    View Slide

46. &
    ServiceWorker
    ' (
    %
    

    View Slide

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

    View Slide

48. 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));
    }
    });
    

    View Slide

49. X
    Cache only
    &
    ' (
    %
    
    (
    X (
    (
    '
    

    View Slide

50. Title Text
    https://jakearchibald.com/2014/offline-cookbook
    

    View Slide

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

    View Slide

52. Stale-while-revalidate
    &
    ' (
    %
    
    (
    

    View Slide

53. Stale-if-error
    self.addEventListener('fetch', function(event) {
    // Always fetch response from the network
    event.respondWith(
    fetch(event.request).then(function(response) {
    // If we received an error response
    if(!response.ok) {
    // If we received an error response
    return caches.match(event.request)
    } else {
    // Response was healthy so update cached version
    cache.put(event.request, response.clone());
    return response;
    }
    })
    );
    });
    

    View Slide

54. Timeouts
    &
    ' (
    %
    X *
    X
    

    View Slide

55. 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)]));
    });
    

    View Slide

56. Dead letter queue
    &
    ' (
    %
    X
    +
    offline
    online
    

    View Slide

57. • Pre-fetch and cache critical resources
    • Serve stale and revalidate
    • Serve stale if error
    • Always use timeouts
    • Queue and batch requests
    • Treat the network as an enhancement!
    

    View Slide

58. The future
    

    View Slide

59. Offline
    Network unavaliable
    

    View Slide

60. Push notifications
    

    View Slide

61. 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
    });
    });
    

    View Slide

62. 1. Testing and monitoring failure
    2. Designing for failure
    3. Embracing failure
    4. The future
    

    View Slide

63. Thanks
    @patrickhamann

    speakerdeck.com/patrickhamann
    github.com/Financial-Times
    !
    ,
    -
    Do you want to help build this stuff? Join in.
    

    View Slide