[PNWPHP 2016] HTTP/2 and Asynchronous APIs

HTTP/2 (H2) is coming, and along with it a whole new way of communicating over the web. Connection re-use, prioritization, multiplexing, and server push are just some of the features in H2.

In this talk we'll look at the HTTP/2 protocol, and at how we can use asynchronous request now with HTTP/1.x. We will also look at what asynchronous requests and H2 mean for your API and clients in the future.

Transcript

1. H T T P/ 2 A N D A SY N C H R O N O U S A P I S
   

   View Slide

2. D AV E Y S H A F I K
   • Developer
   • Author
   • Open Source Contributor
   • Release Manager for PHP 7.1
   • @dshafik
   

   View Slide

3. h tt p : / /d e v e l o p e r. a ka m a i .co m
   

   View Slide

4. Let’s start a conversation about
   mental health in tech
   mhprompt.org
   

   View Slide

5. H T T P/ 2
   A KA : H 2
   

   View Slide

6. View Slide

7. W H AT I S H T T P/ 2 ?
   CC-BY: Marco Bellucci
   

   View Slide

8. R F C 7 5 4 0
   H Y P E RT E XT T R A N S F E R P R OTO CO L V E RS I O N 2
   

   View Slide

9. R F C 7 5 4 1
   H PA C K - H E A D E R CO M P R E SS I O N FO R H T T P/ 2
   

   View Slide

10. C R E AT E D BY I E T F H T T P W O R K I N G
    G R O U P
    C H A I R E D BY A K A M A I ' S M A R K N OT T I N G H A M
    

    View Slide

11. CC-BY: mrbill
    1991
    HTTP/0.9
    

    View Slide

12. CC-BY: mrbill
    1991 1996
    HTTP/0.9
    HTTP/1.0
    

    View Slide

13. CC-BY: mrbill
    1991 1996 1999
    HTTP/0.9
    HTTP/1.0
    HTTP/1.1
    

    View Slide

14. CC-BY: mrbill
    1991 1996 1999
    HTTP/0.9
    HTTP/1.0
    HTTP/1.1
    2009
    SPDY
    

    View Slide

15. –J O H N N Y A P P L E S E E D
    CC-BY: mrbill
    1991 1996 1999
    HTTP/0.9
    HTTP/1.0
    HTTP/1.1
    2015
    HTTP/2
    2009
    SPDY
    

    View Slide

16. B R O W S E R S U P P O RT
    

    View Slide

17. B R O W S E R S U P P O RT
    • Chrome + Chrome Mobile
    • Firefox
    • IE 11 on Windows 10
    • MS Edge
    • Safari (El Capitan/iOS 9)
    • Opera
    

    View Slide

18. B I N A R Y I N ST E A D O F T E XT
    CC-BY: brett jordan
    

    View Slide

19. F U L LY M U LT I P L E X E D
    CC-BY: vadikunc
    I N S T E A D O F O R D E R E D A N D B L O C K I N G
    

    View Slide

20. C A N US E O N E CO N N E CT I O N 

    FO R PA R A L L E L R E Q U E STS
    CC-BY: Alosh Bennett
    

    View Slide

21. US E S H E A D E R CO M P R E SS I O N
    CC-BY-SA: Magnus Hagdorn
    R E D U C E S O V E R H E A D
    

    View Slide

22. S E R V E R P U S H
    I S S U P E R CO O L ( N O R E A L LY )
    CC-BY-SA: Takeshi
    

    View Slide

23. S E R V E R P U S H
    • Allows the server to proactively push assets like stylesheets and
    images to the client without them needing to parse the HTML page
    and make subsequent requests
    • Done by pushing the assets into the client cache, avoiding the
    roundtrip necessary to pull them up once the client makes the
    request
    

    View Slide

24. W H AT D O E S H T T P/ 2 M E A N F O R M Y
    A P P L I C AT I O N ?
    

    View Slide

25. T R A N S PA R E N T
    CC-BY-SA: Patty
    H A N D L E D B Y N G I N X / A PA C H E
    

    View Slide

26. S O W H AT ’ S T H E P O I N T ?
    

    View Slide

27. H T T P/ 1 . X S U C K S
    CC-BY: Flóra Soós
    

    View Slide

28. H T T P/ 1 . X S U C K S
    • Minify + Concat JavaScript and CSS
    • Inlining small JavaScript and CSS
    • Using image sprites
    • Using data: URIs
    • Domain sharding
    

    View Slide

29. T H E S E T H I N G S A R E A L L " C L E V E R " H AC K S
    CC-BY: Matt Biddulph
    

    View Slide

30. R E M E M B E R T H I S ?
    CC-BY: Alosh Bennett
    C A N US E O N E CO N N E CT I O N 

    FO R PA R A L L E L R E Q U E STS
    

    View Slide

31. U P LO A D I N G M U LT I P L E I M A G E S
    CC-BY: John Trainor
    

    View Slide

32. S E R I A L U P LO A D S
    Ȑ
    

    View Slide

33. S E R I A L U P LO A D S
    Ȑ
    

    View Slide

34. S E R I A L U P LO A D S
    Ȑ
    

    View Slide

35. S E R I A L U P LO A D S
    Ȑ 
    

    View Slide

36. S E R I A L U P LO A D S
    Ȑ 
    

    View Slide

37. S E R I A L U P LO A D S
    Ȑ 
    
    

    View Slide

38. S E R I A L U P LO A D S
    Ȑ 
    
    
    

    View Slide

39. CO N CU R R E N T
    Ȑ 
    

    View Slide

40. CO N CU R R E N T
    Ȑ 
    

    View Slide

41. CO N CU R R E N T
    Ȑ 
    

    View Slide

42. CO N CU R R E N T
    Ȑ 
    

    View Slide

43. CO N CU R R E N T
    Ȑ 
    

    View Slide

44. A P I S
    

    View Slide

45. F E TC H I N G A B LO G P O ST + CO M M E N TS
    CC-BY: John Trainor
    

    View Slide

46. Ȑ
    

    View Slide

47. Ȑ
    

    View Slide

48. Ȑ
    GET /post/1
    

    View Slide

49. Ȑ
    GET /post/1
    200 OK application/json
    

    View Slide

50. {
    "type": "post",
    "id": "1",
    "title": "JSON API paints my bikeshed!",
    "tags": ["json", "api", "relationships"],
    "author": "http://example.com/posts/1/author",
    "comments": "http://example.com/posts/1/comments"
    }
    

    View Slide

51. Ȑ
    

    View Slide

52. Ȑ
    

    View Slide

53. Ȑ
    GET /posts/1/comments
    

    View Slide

54. Ȑ
    GET /posts/1/comments
    200 OK application/json
    

    View Slide

55. [
    "http://example.org/post/1/comment/1",
    "http://example.org/post/1/comment/2",
    "http://example.org/post/1/comment/3",
    "http://example.org/post/1/comment/4"
    ]
    

    View Slide

56. Ȑ
    

    View Slide

57. Ȑ
    

    View Slide

58. Ȑ
    GET /post/example/comments/1
    

    View Slide

59. Ȑ
    GET /post/example/comments/
    200 OK application/json
    1
    

    View Slide

60. 2
    Ȑ
    GET /post/example/comments/
    200 OK application/json
    1
    

    View Slide

61. 2
    3
    Ȑ
    GET /post/example/comments/
    200 OK application/json
    1
    

    View Slide

62. 2
    3
    4
    Ȑ
    GET /post/example/comments/
    200 OK application/json
    1
    

    View Slide

63. {
    "type": "comment",
    "id": "1",
    "title": "FIRST!",
    "author": "http://example.com/post/1/comment/1/author"
    }
    

    View Slide

64. 6
    requests
    (possibly connections)
    

    View Slide

65. 14
    requests
    (possibly connections)
    

    View Slide

66. M U LT I P L E X E D
    Ȑ
    

    View Slide

67. M U LT I P L E X E D
    Ȑ
    GET /post/example/comments/3
    

    View Slide

68. M U LT I P L E X E D
    Ȑ
    GET /post/example/comments/3
    GET /post/example/comments/1
    

    View Slide

69. M U LT I P L E X E D
    Ȑ
    GET /post/example/comments/3
    GET /post/example/comments/1
    GET /post/example/comments/2
    

    View Slide

70. M U LT I P L E X E D
    Ȑ
    GET /post/example/comments/3
    GET /post/example/comments/1
    GET /post/example/comments/2
    200 OK application/json
    

    View Slide

71. M U LT I P L E X E D
    Ȑ
    GET /post/example/comments/3
    GET /post/example/comments/1
    GET /post/example/comments/2
    200 OK application/json
    200 OK application/json
    

    View Slide

72. M U LT I P L E X E D
    Ȑ
    GET /post/example/comments/3
    GET /post/example/comments/1
    GET /post/example/comments/2
    200 OK application/json
    200 OK application/json
    200 OK application/json
    

    View Slide

73. CO D E
    

    View Slide

74. $numRequests = 378;
    

    View Slide

75. View Slide

76. $url = 'https://http2.akamai.com/demo/tile-%d.png';
    for ($i = 0; $i <= $numRequests; $i++) {
    $ch = curl_init();

    $opts[CURLOPT_URL] = sprintf($url, $i);
    curl_setopt_array($ch, $opts);
    curl_exec($ch);
    curl_close($ch);
    }
    H T T P/ 1 . 1 : SY N C H R O N O US
    

    View Slide

77. $url = 'https://http2.akamai.com/demo/tile-%d.png';
    for ($i = 0; $i <= $numRequests; $i++) {
    $ch = curl_init();

    $opts[CURLOPT_URL] = sprintf($url, $i);
    curl_setopt_array($ch, $opts);
    curl_exec($ch);
    curl_close($ch);
    }
    H T T P/ 1 . 1 : SY N C H R O N O US
    

    View Slide

78. $url = 'https://http2.akamai.com/demo/tile-%d.png';
    for ($i = 0; $i <= $numRequests; $i++) {
    $ch = curl_init();

    $opts[CURLOPT_URL] = sprintf($url, $i);
    curl_setopt_array($ch, $opts);
    curl_exec($ch);
    curl_close($ch);
    }
    H T T P/ 1 . 1 : SY N C H R O N O US
    

    View Slide

79. $url = 'https://http2.akamai.com/demo/tile-%d.png';
    for ($i = 0; $i <= $numRequests; $i++) {
    $ch = curl_init();

    $opts[CURLOPT_URL] = sprintf($url, $i);
    curl_setopt_array($ch, $opts);
    curl_exec($ch);
    curl_close($ch);
    }
    H T T P/ 1 . 1 : SY N C H R O N O US
    

    View Slide

80. $url = 'https://http2.akamai.com/demo/tile-%d.png';
    for ($i = 0; $i <= $numRequests; $i++) {
    $ch = curl_init();

    $opts[CURLOPT_URL] = sprintf($url, $i);
    curl_setopt_array($ch, $opts);
    curl_exec($ch);
    curl_close($ch);
    }
    H T T P/ 1 . 1 : SY N C H R O N O US
    

    View Slide

81. $url = 'https://http2.akamai.com/demo/tile-%d.png';
    for ($i = 0; $i <= $numRequests; $i++) {
    $ch = curl_init();

    $opts[CURLOPT_URL] = sprintf($url, $i);
    curl_setopt_array($ch, $opts);
    curl_exec($ch);
    curl_close($ch);
    }
    H T T P/ 1 . 1 : SY N C H R O N O US
    

    View Slide

82. 4 7 . 6 7 

    s e co n d s
    CC-BY: Hernán Piñera
    

    View Slide

83. $url = 'https://http2.akamai.com/demo/tile-%d.png';
    for ($i = 0; $i <= $numRequests; $i++) {
    $ch = curl_init();

    $opts[CURLOPT_URL] = sprintf($url, $i);

    curl_setopt_array($ch, $opts);
    curl_exec($ch);
    curl_close($ch);
    }
    H T T P/ 2 : SY N C H R O N O US
    

    View Slide

84. $url = 'https://http2.akamai.com/demo/tile-%d.png';
    for ($i = 0; $i <= $numRequests; $i++) {
    $ch = curl_init();

    $opts[CURLOPT_URL] = sprintf($url, $i);

    curl_setopt_array($ch, $opts);
    curl_exec($ch);
    curl_close($ch);
    }
    $opts[CURLOPT_HTTP_VERSION] = HTTP_VERSION_2_0;
    H T T P/ 2 : SY N C H R O N O US
    

    View Slide

85. $url = 'https://http2.akamai.com/demo/tile-%d.png';
    for ($i = 0; $i <= $numRequests; $i++) {
    $ch = curl_init();

    $opts[CURLOPT_URL] = sprintf($url, $i);

    curl_setopt_array($ch, $opts);
    curl_exec($ch);
    curl_close($ch);
    }
    H T T P/ 2 : SY N C H R O N O US
    

    View Slide

86. $url = 'https://http2.akamai.com/demo/tile-%d.png';
    for ($i = 0; $i <= $numRequests; $i++) {
    $ch = curl_init();

    $opts[CURLOPT_URL] = sprintf($url, $i);

    curl_setopt_array($ch, $opts);
    curl_exec($ch);
    curl_close($ch);
    }
    $opts[CURLOPT_HTTP_VERSION] = HTTP_VERSION_2_0;
    H T T P/ 2 : SY N C H R O N O US
    

    View Slide

87. $url = 'https://http2.akamai.com/demo/tile-%d.png';
    for ($i = 0; $i <= $numRequests; $i++) {
    $ch = curl_init();

    $opts[CURLOPT_URL] = sprintf($url, $i);

    curl_setopt_array($ch, $opts);
    curl_exec($ch);
    curl_close($ch);
    }
    H T T P/ 2 : SY N C H R O N O US
    

    View Slide

88. $url = 'https://http2.akamai.com/demo/tile-%d.png';
    for ($i = 0; $i <= $numRequests; $i++) {
    $ch = curl_init();

    $opts[CURLOPT_URL] = sprintf($url, $i);

    curl_setopt_array($ch, $opts);
    curl_exec($ch);
    curl_close($ch);
    }
    $opts[CURLOPT_HTTP_VERSION] = HTTP_VERSION_2_0;
    H T T P/ 2 : SY N C H R O N O US
    

    View Slide

89. 6 2 . 1 9 

    s e co n d s
    CC-BY-NC: Scott Beckner
    

    View Slide

90. $mh = curl_multi_init();

    $url = 'https://http2.akamai.com/demo/tile-%d.png';

    for ($i = 0; $i <= $numRequests; $i++) {
    $handles[] = $ch = curl_init();
    $opts[CURLOPT_URL] = sprintf($url, '%d');

    curl_setopt_array($ch, $opts);
    curl_multi_add_handle($mh, $ch);
    }
    H T T P/ 1 . 1 : CO N CU R R E N T
    

    View Slide

91. $mh = curl_multi_init();

    $url = 'https://http2.akamai.com/demo/tile-%d.png';

    for ($i = 0; $i <= $numRequests; $i++) {
    $handles[] = $ch = curl_init();
    $opts[CURLOPT_URL] = sprintf($url, '%d');

    curl_setopt_array($ch, $opts);
    curl_multi_add_handle($mh, $ch);
    }
    H T T P/ 1 . 1 : CO N CU R R E N T
    

    View Slide

92. $mh = curl_multi_init();

    $url = 'https://http2.akamai.com/demo/tile-%d.png';

    for ($i = 0; $i <= $numRequests; $i++) {
    $handles[] = $ch = curl_init();
    $opts[CURLOPT_URL] = sprintf($url, '%d');

    curl_setopt_array($ch, $opts);
    curl_multi_add_handle($mh, $ch);
    }
    H T T P/ 1 . 1 : CO N CU R R E N T
    

    View Slide

93. $mh = curl_multi_init();

    $url = 'https://http2.akamai.com/demo/tile-%d.png';

    for ($i = 0; $i <= $numRequests; $i++) {
    $handles[] = $ch = curl_init();
    $opts[CURLOPT_URL] = sprintf($url, '%d');

    curl_setopt_array($ch, $opts);
    curl_multi_add_handle($mh, $ch);
    }
    H T T P/ 1 . 1 : CO N CU R R E N T
    

    View Slide

94. H T T P/ 1 . 1 : CO N CU R R E N T ( CO N T. )
    do {
    $exec = curl_multi_exec($mh, $running);
    } while ($exec == CURLM_CALL_MULTI_PERFORM);
    while ($running && $exec == CURLM_OK) {
    $ready = curl_multi_select($mh);
    if ($ready != -1) {
    do {
    $exec = curl_multi_exec($mh, $running);

    } while ($exec == CURLM_CALL_MULTI_PERFORM);
    }
    }
    

    View Slide

95. 8 . 6 6 

    s e co n d s
    

    View Slide

96. $url = 'https://http2.akamai.com/demo/tile-%d.png';

    for ($i = 0; $i <= $numRequests; $i++) {
    $handles[] = $ch = curl_init();
    $opts[CURLOPT_URL] = sprintf($url, '%d');
    curl_setopt_array($ch, $opts);
    curl_multi_add_handle($mh, $ch);
    }
    H T T P/ 2 : M U LT I P L E X E D
    $mh = curl_multi_init();
    

    View Slide

97. $url = 'https://http2.akamai.com/demo/tile-%d.png';

    for ($i = 0; $i <= $numRequests; $i++) {
    $handles[] = $ch = curl_init();
    $opts[CURLOPT_URL] = sprintf($url, '%d');
    curl_setopt_array($ch, $opts);
    curl_multi_add_handle($mh, $ch);
    }
    H T T P/ 2 : M U LT I P L E X E D
    $mh = curl_multi_init();
    $opts[CURLOPT_HTTP_VERSION] = HTTP_VERSION_2_0;
    

    View Slide

98. $url = 'https://http2.akamai.com/demo/tile-%d.png';

    for ($i = 0; $i <= $numRequests; $i++) {
    $handles[] = $ch = curl_init();
    $opts[CURLOPT_URL] = sprintf($url, '%d');
    curl_setopt_array($ch, $opts);
    curl_multi_add_handle($mh, $ch);
    }
    $mh = curl_multi_init();
    $opts[CURLOPT_HTTP_VERSION] = HTTP_VERSION_2_0;
    curl_multi_setopt(

    $mh, 

    CURLMOPT_PIPELINING, 

    CURLPIPE_MULTIPLEX

    );
    

    View Slide

99. $url = 'https://http2.akamai.com/demo/tile-%d.png';

    for ($i = 0; $i <= $numRequests; $i++) {
    $handles[] = $ch = curl_init();
    $opts[CURLOPT_URL] = sprintf($url, '%d');
    curl_setopt_array($ch, $opts);
    curl_multi_add_handle($mh, $ch);
    }
    $mh = curl_multi_init();
    $opts[CURLOPT_HTTP_VERSION] = HTTP_VERSION_2_0;
    curl_multi_setopt(

    $mh, 

    CURLMOPT_PIPELINING, 

    CURLPIPE_MULTIPLEX

    );
    

    View Slide

100. H T T P/ 2 : M U LT I P L E X E D ( CO N T. )
     do {
     $exec = curl_multi_exec($mh, $running);
     } while ($exec == CURLM_CALL_MULTI_PERFORM);
     while ($running && $exec == CURLM_OK) {
     $ready = curl_multi_select($mh);
     if ($ready != -1) {
     do {
     $exec = curl_multi_exec($mh, $running);

     } while ($exec == CURLM_CALL_MULTI_PERFORM);
     }
     }
     

     View Slide

101. 2 . 1 4 

     s e co n d s
     CC-BY: motoracereports
     

     View Slide

102. H T T P/ 2 N E G OT I AT I O N
     CC-BY-ND: dhendrix73
     

     View Slide

103. B A C KW A R D S CO M PAT I B I L I TY
     

     View Slide

104. P R OTO CO L I D E N T I F I E RS
     • h2 — HTTP/2 over TLS, negotiated via ALPN (Application-Layer
     Protocol Negotiation)
     • h2c — HTTP/2 over TCP (plain text), uses an HTTP/1.1 request with
     a 101 Switching Protocols status response if supported
     

     View Slide

105. – W I K I P E D I A /A P P L I C AT I O N - L AY E R _ P R OTO CO L _ N E G OT I AT I O N
     Application-Layer Protocol Negotiation (ALPN) is a Transport Layer
     Security (TLS) extension for application layer protocol negotiation. ALPN
     allows the application layer to negotiate which protocol should be
     performed over a secure connection in a manner which avoids additional
     round trips and which is independent of the application layer protocols. It
     is used by HTTP/2. […] On July 11, 2014, ALPN was published as RFC 7301
     

     View Slide

106. H 2 C U P G R A D E N E G OT I AT I O N
     > GET / HTTP/1.1
     > Host: server.example.com
     > Connection: Upgrade, HTTP2-Settings
     > Upgrade: h2c
     > HTTP2-Settings:
     < HTTP/1.1 101 Switching Protocols
     < Connection: Upgrade
     < Upgrade: h2c
     <
     < [ HTTP/2 connection ...
     

     View Slide

107. H 2 C U P G R A D E N E G OT I AT I O N ( CO N T. )
     • May be an OPTIONS request if concurrency of multiple requests is
     important
     • May be any request type (e.g. PUT/POST/GET/HEAD/DELETE) but
     any body must be sent in it's entirety before HTTP/2 can start
     • A server must ignore an "h2" token in an Upgrade header field.
     Presence of a token with "h2" implies HTTP/2 over TLS, which is
     instead negotiated via TLS-ALPN
     • It must include a settings payload with the initial request
     

     View Slide

108. A L L B R O W S E RS R E Q U I R E T LS FO R H T T P/ 2
     CC-BY: Jason Baker
     

     View Slide

109. D I R E CT CO N N E CT W I T H H T T P/ 2
     

     View Slide

110. P R I O R K N O W L E D G E
     • It is possible to set up a connection with HTTP/1.1 or ALPN
     negotiation when prior knowledge of HTTP/2 is known
     • Performance enhancement
     • Client/Server must send the HTTP/2 connection prefix
     • Not supported in curl yet
     

     View Slide

111. S E R V E R P US H
     CC-BY: Steven Depolo
     

     View Slide

112. M U LT I P L E X E D
     Ȑ
     GET /post/example/comments/3
     GET /post/example/comments/1
     GET /post/example/comments/2
     200 OK application/json
     200 OK application/json
     200 OK application/json
     

     View Slide

113. ST I L L M A K I N G S U B - R E Q U E STS
     

     View Slide

114. {
     "type": "post",
     "id": "1",
     "title": "JSON API paints my bikeshed!",
     "tags": ["json", "api", "relationships"],
     "author": {
     "type": "author",
     "id": 1,
     "name": "Davey Shafik",
     "twitter": "@dshafik",
     "gravatar": "fee39f0c0ffb29d9ac21607ed188be6b"
     },
     "comments": [
     {
     "type": "comment",
     "id": "1",
     "content": "FIRST!",
     "author": {
     "type": "author",
     "id": 2,
     "name": "Jill Random",
     "gravatar": "706b16b2fb732ab6079a10fea61d078b"
     }
     },
     {
     "type": "comment",
     "id": "2",
     "content": "second",
     "author": {
     "type": "author",
     "id": 3,
     "name": "John Person",
     "gravatar": "8e2279479945ca4778eb3cb8d88cda58"
     }
     },
     {
     "type": "comment",
     "id": "3",
     "content": "third",
     "author": {
     "type": "author",
     "id": 1,
     "name": "Davey Shafik",
     "twitter": "@dshafik",
     "gravatar": "fee39f0c0ffb29d9ac21607ed188be6b"
     }
     },
     {
     "type": "comment",
     "id": "4",
     "content": "fourth",
     "author": {
     "type": "author",
     "id": 2,
     "name": "Jill Random",
     "gravatar": "706b16b2fb732ab6079a10fea61d078b"
     }
     }
     ]
     }
     

     View Slide

115. {
     "type": "post",
     "id": "1",
     "title": "JSON API paints my bikeshed!",
     "tags": ["json", "api", "relationships"],
     "author": {
     "type": "author",
     "id": 1,
     "name": "Davey Shafik",
     "twitter": "@dshafik",
     "gravatar": "fee39f0c0ffb29d9ac21607ed188be6b"
     },
     "comments": [
     {
     "type": "comment",
     "id": "1",
     

     View Slide

116. {
     "type": "post",
     "id": "1",
     "title": "JSON API paints my bikeshed!",
     "tags": ["json", "api", "relationships"],
     "author": {
     "type": "author",
     "id": 1,
     "name": "Davey Shafik",
     "twitter": "@dshafik",
     "gravatar": "fee39f0c0ffb29d9ac21607ed188be6b"
     },
     "comments": [
     {
     "type": "comment",
     "id": "1",
     

     View Slide

117. "gravatar": "fee39f0c0ffb29d9ac21607ed188be6b"
     },
     "comments": [
     {
     "type": "comment",
     "id": "1",
     "content": "FIRST!",
     "author": {
     "type": "author",
     "id": 2,
     "name": "Jill Random",
     "gravatar": "706b16b2fb732ab6079a10fea61d078b"
     }
     },
     {
     "type": "comment",
     "id": "2",
     

     View Slide

118. }
     },
     {
     "type": "comment",
     "id": "3",
     "content": "third",
     "author": {
     "type": "author",
     "id": 1,
     "name": "Davey Shafik",
     "twitter": "@dshafik",
     "gravatar": "fee39f0c0ffb29d9ac21607ed188be6b"
     }
     },
     {
     "type": "comment",
     "id": "4",
     

     View Slide

119. }
     },
     {
     "type": "comment",
     "id": "3",
     "content": "third",
     "author": {
     "type": "author",
     "id": 1,
     "name": "Davey Shafik",
     "twitter": "@dshafik",
     "gravatar": "fee39f0c0ffb29d9ac21607ed188be6b"
     }
     },
     {
     "type": "comment",
     "id": "4",
     

     View Slide

120. }
     },
     {
     "type": "comment",
     "id": "4",
     "content": "fourth",
     "author": {
     "type": "author",
     "id": 2,
     "name": "Jill Random",
     "gravatar": "706b16b2fb732ab6079a10fea61d078b"
     }
     }
     ]
     }
     

     View Slide

121. Ȑ
     

     View Slide

122. Ȑ
     

     View Slide

123. Ȑ
     GET /post/1
     

     View Slide

124. Ȑ
     GET /post/1
     200 OK application/json
     

     View Slide

125. GET /post/1/comments
     Ȑ
     GET /post/1
     200 OK application/json
     

     View Slide

126. GET /post/1/comments
     GET /post/1/comment/1
     Ȑ
     GET /post/1
     200 OK application/json
     

     View Slide

127. Ȑ
     GET /post/1/comments
     GET /post/1/comment/1
     

     View Slide

128. Ȑ
     GET /post/1/comment/2
     GET /post/1/comment/3
     GET /post/1/comment/4
     GET /post/1/comments
     GET /post/1/comment/1
     

     View Slide

129. Ȑ
     GET /post/1/comment/2
     GET /post/1/comment/3
     GET /post/1/comment/4
     GET /post/1/comment/1/author
     GET /post/1/comment/2/author
     GET /post/1/comment/3/author
     GET /post/1/comment/4/author
     GET /post/1/comments
     GET /post/1/comment/1
     

     View Slide

130. Ȑ
     GET /post/1/comment/2
     GET /post/1/comment/3
     GET /post/1/comment/4
     GET /post/1/comment/1/author
     GET /post/1/comment/2/author
     GET /post/1/comment/3/author
     GET /post/1/comment/4/author
     GET /post/1/comment/1/author/avatar.png
     GET /post/1/comment/2/author/avatar.png
     GET /post/1/comment/3/author/avatar.png
     GET /post/1/comment/4/author/avatar.png
     GET /post/1/comments
     GET /post/1/comment/1
     

     View Slide

131. CSS /J S M I N I F I C AT I O N I S U N E C E SS A R Y
     CC-BY: Patrick Metzdorf
     G Z I P CO M P R E SS I O N + M U LT I P L E X I N G + S E R V E R P US H
     

     View Slide

132. ST R E A M S
     CC-BY: Kylir Horton
     

     View Slide

133. ST R E A M S
     • Each request/response is a stream
     • Streams are comprised of Frames
     • Streams may have a weight (1-256)
     • Streams may have a dependency
     

     View Slide

134. W E I G H TS
     CC-BY 2.0: Tri Vu Dao
     

     View Slide

135. ST R E A M W E I G H TS
     Stream A
     Weight: 1
     Stream B
     Weight: 2
     Stream C
     Weight: 3
     2X Stream A 1.5X Stream B

     3X Stream A
     

     View Slide

136. D E P E N D E N C I E S
     CC-BY-SA 2.0: David Gamez
     

     View Slide

137. ST R E A M D E P E N D E N C I E S
     Stream A
     Stream B
     Depends: A
     Stream C
     Depends: B
     Delivered after A Delivered after B
     

     View Slide

138. F R A M E S
     CC-BY: Bart Everson
     

     View Slide

139. F R A M E S
     • Messages are composed of multiple frames, e.g. headers, data,
     and settings
     • Each frame has a common header
     • 9 byte, length prefixed
     • Easy & efficient to parse
     • Frames can be interleaved — this is multiplexing
     

     View Slide

140. F R A M E S
     POST /search HTTP/1.1
     Host: example.org
     Content-Type: application/json
     Content-Length: 58
     {

     "keywords":"example",

     "location":"posts"

     }
     HEADERS

     frame
     Data

     frame
     }
     }
     

     View Slide

141. H E A D E RS : H PAC K
     CC-BY-SA: intelligente_persona
     

     View Slide

142. H E A D E RS : H PA C K
     • Uses a table of known values as an index
     • Can represent a header name and value (e.g. :status: 404), or
     just a header name (e.g. accept:)
     • Values are either statically encoded, or use a static Huffman code
     

     View Slide

143. # Name Value
     1 :authority
     2 :method GET
     3 :method POST
     4 :path /
     5 :path /index.html
     6 :scheme http
     7 :scheme https
     8 :status 200
     9 :status 204
     10 :status 206
     11 :status 304
     12 :status 400
     13 :status 404
     14 :status 500
     15 accept-charset
     

     View Slide

144. N E W A R C H I T E CT U R E & T E C H N I Q U E S
     

     View Slide

145. D E L I V E R I N G A PAG E
     

     View Slide

146. PAG E A SS E TS
     Ɇ
     ɂ
     Ȑ
     

     View Slide

147. PAG E A SS E TS
     Ɇ
     ɂ
     Ȑ
     

     View Slide

148. PAG E A SS E TS
     GET /index.html
     Ɇ
     ɂ
     Ȑ
     

     View Slide

149. PAG E A SS E TS
     GET /index.html
     200 OK text/html
     Ɇ
     ɂ
     Ȑ
     

     View Slide

150. PAG E A SS E TS
     Ɇ Ȑ
     ɂ
     GET /index.html
     200 OK text/html
     

     View Slide

151. PAG E A SS E TS
     Ɇ Ȑ
     ɂ
     GET /index.html
     200 OK text/html
     critical-path.css
     critical-path.js
     logo.svg
     

     View Slide

152. PAG E A SS E TS
     Ɇ Ȑ
     ɂ
     GET /index.html
     200 OK text/html
     critical-path.css
     critical-path.js
     logo.svg
     font.eot
     

     View Slide

153. PAG E A SS E TS
     Ɇ Ȑ
     ɂ
     GET /index.html
     200 OK text/html
     critical-path.css
     critical-path.js
     logo.svg
     font.eot
     main.js
     

     View Slide

154. PAG E A SS E TS
     Ɇ Ȑ
     ɂ
     GET /index.html
     200 OK text/html
     critical-path.css
     critical-path.js
     logo.svg
     font.eot
     main.js
     splash.jpg
     

     View Slide

155. PAG E A SS E TS
     Ɇ Ȑ
     ɂ
     GET /index.html
     200 OK text/html
     critical-path.css
     critical-path.js
     logo.svg
     font.eot styles.css
     main.js
     splash.jpg
     

     View Slide

156. A P I S
     

     View Slide

157. A P I R E Q U E ST
     Ɇ
     ɂ
     Ȑ
     

     View Slide

158. A P I R E Q U E ST
     Ɇ
     ɂ
     Ȑ
     

     View Slide

159. A P I R E Q U E ST
     GET /post/1
     Ɇ
     ɂ
     Ȑ
     

     View Slide

160. A P I R E Q U E ST
     GET /post/1
     200 OK application/json
     Ɇ
     ɂ
     Ȑ
     

     View Slide

161. S U B - R E S O U R C E P US H W I T H D E P E N D E N C I E S
     Ɇ Ȑ
     ɂ
     GET /post/1
     200 OK application/json
     

     View Slide

162. S U B - R E S O U R C E P US H W I T H D E P E N D E N C I E S
     Ɇ Ȑ
     ɂ
     GET /post/1
     200 OK application/json
     /post/1/comments
     /author/1
     

     View Slide

163. S U B - R E S O U R C E P US H W I T H D E P E N D E N C I E S
     Ɇ Ȑ
     ɂ
     GET /post/1
     200 OK application/json
     /post/1/comments
     /author/1
     /comment/1
     /comment/…
     

     View Slide

164. S U B - R E S O U R C E P US H W I T H D E P E N D E N C I E S
     Ɇ Ȑ
     ɂ
     GET /post/1
     200 OK application/json
     /post/1/comments
     /author/1
     /comment/1
     /images/author/1
     /comment/…
     

     View Slide

165. S U B - R E S O U R C E P US H W I T H D E P E N D E N C I E S
     Ɇ Ȑ
     ɂ
     GET /post/1
     200 OK application/json
     /post/1/comments
     /author/1
     /comment/1 /author/2
     /images/author/1
     /comment/…
     

     View Slide

166. S U B - R E S O U R C E P US H W I T H D E P E N D E N C I E S
     Ɇ Ȑ
     ɂ
     GET /post/1
     200 OK application/json
     /post/1/comments
     /author/1
     /comment/1 /author/2
     /images/author/1
     /comment/… /author/…
     

     View Slide

167. I N S U M M A R Y
     

     View Slide

168. N O M O R E H AC K S !
     

     View Slide

169. H U G E P E R FO R M A N C E W I N S
     

     View Slide

170. 6 0 % + M A R K E T S H A R E
     

     View Slide

171. H T T P / 2 I S A W E S O M E !
     CC-BY-SA: Steven Gerner
     

     View Slide

172. F E E D B AC K & Q U E ST I O N S
     Feedback:
     Twitter:
     Email:
     Slides:
     https://joind.in/
     @dshafik
     dshafik@akamai.com
     http://daveyshafik.com/slides
     18813
     

     View Slide