Upgrade to Pro — share decks privately, control downloads, hide ads and more …

[PyCon SE 2016] HTTP/2 and Asynchronous APIs

[PyCon SE 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.

Davey Shafik

May 09, 2016
Tweet

More Decks by Davey Shafik

Other Decks in Programming

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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  7. 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 full-size slide

  8. 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 full-size slide

  9. 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 full-size slide

  10. CC-BY: mrbill
    1991
    HTTP/0.9

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  14. –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 full-size slide

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

    View full-size slide

  16. 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 full-size slide

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

    View full-size slide

  18. 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 full-size slide

  19. 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 full-size slide

  20. 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 full-size slide

  21. 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 full-size slide

  22. 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 full-size slide

  23. 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 full-size slide

  24. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  27. 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 full-size slide

  28. 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 full-size slide

  29. 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 full-size slide

  30. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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


    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  43. 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 full-size slide

  44. Ȑ
    GET /post/1

    View full-size slide

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

    View full-size slide

  46. {
    "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 full-size slide

  47. Ȑ
    GET /posts/1/comments

    View full-size slide

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

    View full-size slide

  49. [
    "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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  56. 6
    requests
    (possibly connections)

    View full-size slide

  57. 14
    requests
    (possibly connections)

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  61. 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 full-size slide

  62. 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 full-size slide

  63. 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 full-size slide

  64. 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 full-size slide

  65. num_requests = 378;

    View full-size slide

  66. H T T P/ 1 . 1 : SY N C H R O N O US
    import pycurl
    from StringIO import StringIO
    for i in range(0, num_requests):
    url = 'https://http2.akamai.com/demo/tile-%d.png' % i
    buffer = StringIO()
    c = pycurl.Curl()
    c.setopt(c.URL, url)
    c.setopt(c.WRITEDATA, buffer)
    c.perform()
    c.close()

    View full-size slide

  67. H T T P/ 1 . 1 : SY N C H R O N O US
    import pycurl
    from StringIO import StringIO
    for i in range(0, num_requests):
    url = 'https://http2.akamai.com/demo/tile-%d.png' % i
    buffer = StringIO()
    c = pycurl.Curl()
    c.setopt(c.URL, url)
    c.setopt(c.WRITEDATA, buffer)
    c.perform()
    c.close()

    View full-size slide

  68. import pycurl
    from StringIO import StringIO
    for i in range(0, num_requests):
    url = 'https://http2.akamai.com/demo/tile-%d.png' % i
    buffer = StringIO()
    c = pycurl.Curl()
    c.setopt(c.URL, url)
    c.setopt(c.WRITEDATA, buffer)
    c.perform()
    c.close()
    H T T P/ 1 . 1 : SY N C H R O N O US

    View full-size slide

  69. import pycurl
    from StringIO import StringIO
    for i in range(0, num_requests):
    url = 'https://http2.akamai.com/demo/tile-%d.png' % i
    buffer = StringIO()
    c = pycurl.Curl()
    c.setopt(c.URL, url)
    c.setopt(c.WRITEDATA, buffer)
    c.perform()
    c.close()
    H T T P/ 1 . 1 : SY N C H R O N O US

    View full-size slide

  70. H T T P/ 1 . 1 : SY N C H R O N O US
    import pycurl
    from StringIO import StringIO
    for i in range(0, num_requests):
    url = 'https://http2.akamai.com/demo/tile-%d.png' % i
    buffer = StringIO()
    c = pycurl.Curl()
    c.setopt(c.URL, url)
    c.setopt(c.WRITEDATA, buffer)
    c.perform()
    c.close()

    View full-size slide

  71. 2 0 

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

    View full-size slide

  72. H T T P/ 2 : SY N C H R O N O US
    import pycurl
    from StringIO import StringIO
    for i in range(0, num_requests):
    url = 'https://http2.akamai.com/demo/tile-%d.png' % i
    buffer = StringIO()
    c = pycurl.Curl()
    c.setopt(c.HTTP_VERSION, c.CURL_HTTP_VERSION_2_0)
    c.setopt(c.URL, url)
    c.setopt(c.WRITEDATA, buffer)
    c.perform()
    c.close()

    View full-size slide

  73. H T T P/ 2 : SY N C H R O N O US
    import pycurl
    from StringIO import StringIO
    for i in range(0, num_requests):
    url = 'https://http2.akamai.com/demo/tile-%d.png' % i
    buffer = StringIO()
    c = pycurl.Curl()
    c.setopt(c.HTTP_VERSION, c.CURL_HTTP_VERSION_2_0)
    c.setopt(c.URL, url)
    c.setopt(c.WRITEDATA, buffer)
    c.perform()
    c.close()

    View full-size slide

  74. H T T P/ 2 : SY N C H R O N O US
    import pycurl
    from StringIO import StringIO
    for i in range(0, num_requests):
    url = 'https://http2.akamai.com/demo/tile-%d.png' % i
    buffer = StringIO()
    c = pycurl.Curl()
    c.setopt(c.HTTP_VERSION, c.CURL_HTTP_VERSION_2_0)
    c.setopt(c.URL, url)
    c.setopt(c.WRITEDATA, buffer)
    c.perform()
    c.close()

    View full-size slide

  75. 3 4 

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

    View full-size slide

  76. import pycurl
    from StringIO import StringIO
    m = pycurl.CurlMulti()
    m.setopt(m.M_PIPELINING, 1)
    m.handles = []
    for i in range(0, num_requests):
    url = 'https://http2.akamai.com/demo/tile-%d.png' % i
    buffer = StringIO()
    c = pycurl.Curl()
    c.setopt(c.URL, url)
    c.setopt(c.WRITEDATA, buffer)
    m.handles.append(c)
    m.add_handle(c)
    H T T P/ 1 . 1 : CO N CU R R E N T

    View full-size slide

  77. import pycurl
    from StringIO import StringIO
    m = pycurl.CurlMulti()
    m.setopt(m.M_PIPELINING, 1)
    m.handles = []
    for i in range(0, num_requests):
    url = 'https://http2.akamai.com/demo/tile-%d.png' % i
    buffer = StringIO()
    c = pycurl.Curl()
    c.setopt(c.URL, url)
    c.setopt(c.WRITEDATA, buffer)
    m.handles.append(c)
    m.add_handle(c)
    H T T P/ 1 . 1 : CO N CU R R E N T

    View full-size slide

  78. import pycurl
    from StringIO import StringIO
    m = pycurl.CurlMulti()
    m.setopt(m.M_PIPELINING, 1)
    m.handles = []
    for i in range(0, num_requests):
    url = 'https://http2.akamai.com/demo/tile-%d.png' % i
    buffer = StringIO()
    c = pycurl.Curl()
    c.setopt(c.URL, url)
    c.setopt(c.WRITEDATA, buffer)
    m.handles.append(c)
    m.add_handle(c)
    H T T P/ 1 . 1 : CO N CU R R E N T

    View full-size slide

  79. import pycurl
    from StringIO import StringIO
    m = pycurl.CurlMulti()
    m.setopt(m.M_PIPELINING, 1)
    m.handles = []
    for i in range(0, num_requests):
    url = 'https://http2.akamai.com/demo/tile-%d.png' % i
    buffer = StringIO()
    c = pycurl.Curl()
    c.setopt(c.URL, url)
    c.setopt(c.WRITEDATA, buffer)
    m.handles.append(c)
    m.add_handle(c)
    H T T P/ 1 . 1 : CO N CU R R E N T

    View full-size slide

  80. H T T P/ 1 . 1 : CO N CU R R E N T ( CO N T. )
    while True:
    ret, num_handles = m.perform()
    if ret != pycurl.E_CALL_MULTI_PERFORM:
    break
    while num_handles:
    ret = m.select(1.0)
    if ret == -1:
    continue
    while True:
    ret, num_handles = m.perform()
    if ret != pycurl.E_CALL_MULTI_PERFORM:
    break

    View full-size slide

  81. 6 

    s e co n d s

    View full-size slide

  82. import pycurl
    from StringIO import StringIO
    m = pycurl.CurlMulti()
    m.setopt(m.M_PIPELINING, 2)
    m.handles = []
    for i in range(0, num_requests):
    url = 'https://http2.akamai.com/demo/tile-%d.png' % i
    buffer = StringIO()
    c = pycurl.Curl()
    c.setopt(c.URL, url)
    c.setopt(c.HTTP_VERSION, c.CURL_HTTP_VERSION_2_0)
    c.setopt(c.WRITEDATA, buffer)
    m.handles.append(c)
    m.add_handle(c)
    H T T P/ 2 : M U LT I P L E X E D

    View full-size slide

  83. import pycurl
    from StringIO import StringIO
    m = pycurl.CurlMulti()
    m.setopt(m.M_PIPELINING, 2)
    m.handles = []
    for i in range(0, num_requests):
    url = 'https://http2.akamai.com/demo/tile-%d.png' % i
    buffer = StringIO()
    c = pycurl.Curl()
    c.setopt(c.URL, url)
    c.setopt(c.HTTP_VERSION, c.CURL_HTTP_VERSION_2_0)
    c.setopt(c.WRITEDATA, buffer)
    m.handles.append(c)
    m.add_handle(c)
    H T T P/ 2 : M U LT I P L E X E D

    View full-size slide

  84. import pycurl
    from StringIO import StringIO
    m = pycurl.CurlMulti()
    m.setopt(m.M_PIPELINING, 2)
    m.handles = []
    for i in range(0, num_requests):
    url = 'https://http2.akamai.com/demo/tile-%d.png' % i
    buffer = StringIO()
    c = pycurl.Curl()
    c.setopt(c.URL, url)
    c.setopt(c.HTTP_VERSION, c.CURL_HTTP_VERSION_2_0)
    c.setopt(c.WRITEDATA, buffer)
    m.handles.append(c)
    m.add_handle(c)
    H T T P/ 2 : M U LT I P L E X E D

    View full-size slide

  85. H T T P/ 2 : M U LT I P L E X E D ( CO N T. )
    while True:
    ret, num_handles = m.perform()
    if ret != pycurl.E_CALL_MULTI_PERFORM:
    break
    while num_handles:
    ret = m.select(1.0)
    if ret == -1:
    continue
    while True:
    ret, num_handles = m.perform()
    if ret != pycurl.E_CALL_MULTI_PERFORM:
    break

    View full-size slide

  86. 4 

    s e co n d s
    CC-BY: motoracereports

    View full-size slide

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

    View full-size slide

  88. 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 full-size slide

  89. – 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 full-size slide

  90. 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 full-size slide

  91. 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 full-size slide

  92. 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 full-size slide

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

    View full-size slide

  94. 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 full-size slide

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

    View full-size slide

  96. 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 full-size slide

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

    View full-size slide

  98. {
    "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 full-size slide

  99. {
    "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 full-size slide

  100. {
    "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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  105. Ȑ
    GET /post/1

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  110. Ȑ
    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 full-size slide

  111. Ȑ
    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 full-size slide

  112. Ȑ
    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 full-size slide

  113. 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 full-size slide

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

    View full-size slide

  115. 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 full-size slide

  116. 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 full-size slide

  117. 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 full-size slide

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

    View full-size slide

  119. 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 full-size slide

  120. 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 full-size slide

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

    View full-size slide

  122. 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 full-size slide

  123. # 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 full-size slide

  124. I N S U M M A R Y

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  129. F E E D B A C K & Q U E S T I O N S
    Twitter:
    Email:
    Slides:
    @dshafik
    [email protected]
    http://daveyshafik.com/slides

    View full-size slide