[PyCon SE 2016] HTTP/2 and Asynchronous APIs

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

H T T P/ 2 A KA : H 2

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

CC-BY: mrbill 1991 HTTP/0.9

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

–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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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 ?

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

CO N CU R R E N T Ȑ 

Slide 40

Slide 40 text

CO N CU R R E N T Ȑ 

Slide 41

Slide 41 text

CO N CU R R E N T Ȑ 

Slide 42

Slide 42 text

CO N CU R R E N T Ȑ 

Slide 43

Slide 43 text

CO N CU R R E N T Ȑ 

Slide 44

Slide 44 text

A P I S

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

Slide 47

Slide 47 text

Slide 48

Slide 48 text

Ȑ GET /post/1

Slide 49

Slide 49 text

Ȑ GET /post/1 200 OK application/json

Slide 50

Slide 50 text

{ "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" }

Slide 51

Slide 51 text

Slide 52

Slide 52 text

Slide 53

Slide 53 text

Ȑ GET /posts/1/comments

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

[ "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" ]

Slide 56

Slide 56 text

Slide 57

Slide 57 text

Slide 58

Slide 58 text

Ȑ GET /post/example/comments/1

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

6 requests (possibly connections)

Slide 65

Slide 65 text

14 requests (possibly connections)

Slide 66

Slide 66 text

M U LT I P L E X E D Ȑ

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

CO D E

Slide 74

Slide 74 text

num_requests = 378;

Slide 75

Slide 75 text

No content

Slide 76

Slide 76 text

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()

Slide 77

Slide 77 text

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

Slide 80

Slide 80 text

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

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()

Slide 83

Slide 83 text

Slide 84

Slide 84 text

Slide 85

Slide 85 text

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

Slide 86

Slide 86 text

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

Slide 87

Slide 87 text

Slide 88

Slide 88 text

Slide 89

Slide 89 text

Slide 90

Slide 90 text

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

Slide 91

Slide 91 text

6   s e co n d s

Slide 92

Slide 92 text

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

Slide 93

Slide 93 text

Slide 94

Slide 94 text

Slide 95

Slide 95 text

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

Slide 96

Slide 96 text

4   s e co n d s CC-BY: motoracereports

Slide 97

Slide 97 text

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

Slide 98

Slide 98 text

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

Slide 99

Slide 99 text

– 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

Slide 100

Slide 100 text

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

Slide 101

Slide 101 text

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

Slide 102

Slide 102 text

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

Slide 103

Slide 103 text

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

Slide 104

Slide 104 text

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

Slide 105

Slide 105 text

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

Slide 106

Slide 106 text

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

Slide 107

Slide 107 text

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

Slide 108

Slide 108 text

{ "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" } } ] }

Slide 109

Slide 109 text

Slide 110

Slide 110 text

Slide 111

Slide 111 text

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

Slide 112

Slide 112 text

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

Slide 113

Slide 113 text

Slide 114

Slide 114 text

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

Slide 115

Slide 115 text

Slide 116

Slide 116 text

Slide 117

Slide 117 text

Ȑ GET /post/1

Slide 118

Slide 118 text

Ȑ GET /post/1 200 OK application/json

Slide 119

Slide 119 text

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

Slide 120

Slide 120 text

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

Slide 121

Slide 121 text

Ȑ GET /post/1/comments GET /post/1/comment/1

Slide 122

Slide 122 text

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

Slide 123

Slide 123 text

Slide 124

Slide 124 text

Ȑ 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

Slide 125

Slide 125 text

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

Slide 126

Slide 126 text

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

Slide 127

Slide 127 text

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

Slide 128

Slide 128 text

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

Slide 129

Slide 129 text

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

Slide 130

Slide 130 text

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

Slide 131

Slide 131 text

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

Slide 132

Slide 132 text

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 } }

Slide 133

Slide 133 text

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

Slide 134

Slide 134 text

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

Slide 135

Slide 135 text

# 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

Slide 136

Slide 136 text

I N S U M M A R Y

Slide 137

Slide 137 text

N O M O R E H AC K S !

Slide 138

Slide 138 text

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

Slide 139

Slide 139 text

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

Slide 140

Slide 140 text

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

Slide 141

Slide 141 text

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