HTTP is dead, long live HTTP! 20 years ago, HTTP/1.1 was born and it has served us well. But a lot has changed since the time a single request was often enough to display a web page. Nowadays, web applications need lots of external resources, forcing us into hacky territory. We can do better! HTTP/2 is here and you can and should use it. No more domain sharding, resource bundling, convoluted hacks. Instead, you get much better performance and security with less work than before. This talk focuses on HTTP's history and its new features: multiplexing, header compression, server push and more! About Piet van Dongen By day, Piet is a software engineer at Luminis, where he keeps himself busy doing the whole full stack thing. By night, he sleeps. The rest of the time, he mostly entertains his kids, wife and vacuum cleaner, sometimes locking himself in the bathroom to read his Twitter feed or a book.

1. Those who stand for nothing,
fall for anything - Alexander
Hamilton
I am always doing that which I
can not do, in order that I may
learn how to do it. - Pablo PicassoPiet van Dongen
HTTP/2:
What's new?

2. @pietvandongen
About me
Piet van Dongen
- Senior Software Engineer at Luminis
- Multi-privileged
- One foot in the grave
- Buzzword(s) of the month: product thinking
- Should start running again

4. What's up?
What I do What you do
Introduce the talk Check office mail
Dive into HTTP/2 theory Check Twitter / Facebook / WhatsApp
Look at HTTP/2 in practice Brief moment of attention
Create a HTTP/2 server (live!) Laugh at Piet fumbling
Answer questions Come up with shitty questions

5. HTTP
in perspective

6. HTTP in perspective
• A bit of history
• The technology
• Why HTTP/2?
• New features

7. A bit
of history

8. 1941
• Jorge Luis Borges' El jardín de senderos que se
bifurcan (The Garden of Forking Paths)
• Hypertext fiction

9. • Vannevar Bush's As We May Think
• Essay on the memex (memory + index)
• Proto hypertext system
• Collective memory
• Information explosion
• Knowledge explosion
1945

10. Douglas Engelbart
• 1962: Creates NLS (oN-Line System)
• 1968: The Mother of All Demos
Ted Nelson & Andries van Dam
• 1963: Nelson coins hypertext and
hypermedia
• 1967: With Van Dam: Hypertext
Editing System
• 1976: FRESS (File Retrieval and Editing
System)
1962 – 1976

11. • Aspen Movie Map (funded by (D)ARPA)
• First hypermedia system
1978

12. • Sir Tim Berners Lee creates ENQUIRE (wiki / web site)
• Peter J. Brown creates Guide (hypertext system)
• Roberto Busa creates Index Thomisticus (text search)
1980

13. • Ben Shneiderman develops TIES (The Interactive
Encyclopedia System)
• First electronic book: Hypertext Hands-On!
1983

14. • Apple Computer's HyperCard
• ACM Hypertext Conference
• Storyspace (hypertext fiction software)
1987

15. • Sir Tim Berners Lee (CERN): WorldWideWeb
• HyperText
• Network
• Browsers
1989

16. • HTTP V0.9
• TCP-IP connection
• Request: GET address (no http://, host or port)
• Response: byte stream of ASCII characters
• After transfer: connection close
1991

17. • Browser Lynx
• Birth of the internet
• 500 web servers
1993

18. • W3C (World Wide Web Consortium) founded
• 10.000 web servers
1994

19. • HTTP V1.0
• No formal specification
• Required version number in request
• Headers
• Status codes
• New OPTIONS method
1995

20. • Pre-standard HTTP/1.1
• Fast adoption: Arena, Netscape, Mosaic, Lynx, IE 2.0
• March: 40% of browsers compliant
• June: 65%
1996

21. • Standard HTTP/1.1 (RFC 2068)
• Required header Host
• Open connections
• Better caching (ETags and headers)
• Lots of additions and improvements
1997

22. • HTTP/1.1 improvements (RFC 2616)
1999

23. • HTTPbis Working Group takes 7 years to improve
and clear up HTTP/1.1
2007

24. • SPDY developed by Google
2012

25. • A new standard: HTTP/2
2015

26. The
technology

27. Terminology
• Hypertext Transfer Protocol
• Hypertext: structured text with
linked (text) nodes
• Protocol: to transfer hypertext from
server to clients
• TCP/IP: Internet Protocol Suite
• HTTP is protocol in top layer
(application)
HTTP
TCPUDP
Application
Transport
IP Internet
Ethernet Link

28. The protocol from a bird's eye view
• Client / user agent asks (request)
• Methods: GET, PUT, POST, DELETE, HEAD…
• Server answers (response)
• Status codes: 200 OK, 404 Not Found, 500 Internal Server Error…
• Resources identified by URLs
• protocol://host[:port]/path

29. A request
GET / HTTP/1.1
Host: www.example.com
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_3) AppleWe
Accept: */*

30. A response
HTTP/1.1 200 OK
Content-Length: 1365
Content-Type: text/html
<!DOCTYPE html>
<html lang="en">
<head><title>Hello world demo page</title></head>
<body>
<h1>Hello, world!</h1>
</body>

31. Why
HTTP/2?

32. What is wrong with HTTP/1.1?
• Web pages contain more resources than ever
• Efficient loading using 1 request per HTTP connection is hard
• Parallel is possible, but… chance of congestions
• A lot of overhead, especially headers
• Hacks needed: image sprites, data inlining, domain sharding, …

33. How is HTTP/2 gonna solve that?
• Binary protocol: more efficient parsing, more compact, fewer errors
• Multiplexing:
• Non ordered, interleaved if necessary
• Non blocking, but all data at once
• Just one TCP connection: less congestion, more fair on network
• Header compression with HPACK: more compact and robust
• Server push: pushing data on expected demand
• Compatible with HTTP/1.1

34. New
features

35. Binary protocol
• More efficient, easy to parse
• More compact on the wire
• Harder to read for humans
Application (HTTP)
Transport (TCP)
Network (IP)
Link (Ethernet)
Binary Framing
HEADERS frame
DATA frame

36. Streams, messages, frames
• Stream: bidirectional flow of bytes, contains 1 or more messages
• Message: sequence of frames, map to request of response
• Frame: smalles unit of communication, references stream
Stream 1
HEADERS
Stream 2
HEADERS
Stream 2
DATA
Stream 2
DATA

37. Multiplexing
• Everything on a single connection
• Messages in random order
• No guessing
• No congestion
Stream 5
DATA
Stream 1
DATA
Stream 3
DATA
Stream 3
DATA
Stream 2
DATA
Stream 3
HEADERS
Stream 1
DATA
Stream 2
DATA
Stream 1
DATA

38. Server push
• Multiple response for 1 request
• Serve before request
Stream 1
FRAME 2
Stream 4
FRAME 1
…Stream 1
FRAME n
Stream 4
PROMISE
Stream 2
PROMISE

39. :path: /blog/383
7
38: example.com
:path: /blog
19: text/html
58: Mozilla/5…
Header compression (HPACK)
• Huffman encoding
• ~30% size reduction
• Only diffs on
subsequent requests
Stream 1
HEADERS
Stream 2
HEADERS
:method GET
:scheme https
:host example.nl
:path /blog
accept text/html
user-agent Mozilla/5…
:method GET
:scheme https
:host example.nl
:path /blog/38
accept text/html
user-agent Mozilla/5…

40. ALPN
• Application-Layer Protocol Negotiation
• TLS extension of application layer ClientHello (ALPN extenstion + list of protocols)
ServerHello (ALPN extenstion + selected protocol)
ChangeCipherSpec
Finished
ChangeCipherSpec
Finished

41. And more…
• Inherently safe (because effectively only TLS)
• Stream prioritisation
• Flow control
*
A
12
B
4
*
D
1
C
8
*
D
1
C
8
A
12
B
4
*
D
1
E
8
A
12
B
4
C
8

42. That's great, Piet.
How about you show us
some working code. You
promised some action.”
“

43. HTTP /2
in action

44. HTTP/2 in action
• Implementations in the wild
• Roll your own HTTP/2-server
• HTTP/2 on a bad network
• Findings and recommendations
• Sources

45. Implementations
in the wild

46. Terminology
• ALPN: Application-Layer Protocol Negotiation, TLS extension to over
negotiate on application layer protocol
• NPN: precursor to ALPN
• Upgrade: negotiation mechanism for HTTP/1.1 => HTTP/2
• Direct: connection without upgrade / negotiation
• h2: HTTP/2 over TLS
• h2c: HTTP/2 over TCP

47. Servers
Name Version Negotiation Protocol
Apache HTTP 2.4.17+ ALPN, Upgrade, direct h2, h2c
NGINX 1.9.5+ ALPN, NPN, direct h2, h2c
node-http2 ALPN, NPN, direct h2
Tomcat 8.5+ ALPN, Upgrade, direct h2, h2c
http2 (Go) ALPN, NPN h2, h2-14
Jetty 9.3+ ALPN, Upgrade, direct h2, h2-17, h2-14, h2c,
h2c-17
IIS 10 ? ?
http-katana ALPN, Upgrade h2-12

48. Clients
Name Version Negotiation Protocol
Firefox 49+ ALPN, NPN h2-15, h2-14, h2
Chrome ALPN h2, h2-14
IE Windows 10 ALPN h2
curl, libcurl ALPN, NPN, Upgrade h2-14, h2c-14
node-http2 ALPN, NPN, direct h2
http-katana ALPN, Upgrade h2-12
http2 (Go) ALPN, NPN h2, h2-14

49. Roll your
own HTTP/2 server

50. Requirements
• Java Development Kit (8+)
• Eclipse Vert.x (reactive application toolkit for JVM)
• netty-tcnative-boringssl-static (to dynamicly link TLS-support, no
longer need in Java 9)
• Some HTML, CSS and JavaScript files
• A build / run tool (Gradle in this case)
• A browser (for testing)

51. Application resources
• HTML: index.html
• JavaScript: application.js (pushed!)
• Style sheet: style.css (pushed!)
• Image: photo.jpg (pushed!)

52. Demo time!
• Sources can be found at:
https://github.com/pietvandongen/http2-brain-upgrade
pull requests and issues are welcome!
• The Docker container image is at:
https://hub.docker.com/r/pietvandongen/http2-demo-server/

53. HTTP/2
on a bad network

54. Comparing HTTP/1.1 to HTTP/2
HTTP/2:
Multiplexed + push
HTTP/1.1:
Sequential
HTTP/1.1:
Pipelined
HTTP/2:
Multiplexed

55. HTTP: high latency
HTTP/2:
Multiplexed + push
HTTP/1.1:
Sequential
HTTP/1.1:
Pipelined
HTTP/2:
Multiplexed

56. Demonstration
• http://http2.golang.org/gophertiles

57. Findings
and recommendations

58. Findings and recommendations
• Switch over, but use ALPN
• Try before you assume (push!)
• Start with a web project
• Don't forget the decrypter during debugging
• Read the documentation :)

59. Sources

60. Sources / literature
• https://http2.github.io/: HTTP/2 homepage curated by IETF HTTP
Working Group
• https://developers.google.com/web/fundamentals/performance/
http2/: Introduction to HTTP/2 by Google
• http://vertx.io/: Homepage of Eclipse Vert.x
• Stephen Ludin & Javier Garza, Learning HTTP/2: A Practical Guide for
Beginners (O'Reilly 2017)
• https://hpbn.co/http2/: Chapter 12 of High Performance Browser
Networking (Ilya Grigorik, O'Reilly 2013)

61. Any
questions?

62. Any questions?
• Mail me: piet.vandongen@luminis.eu
• Tweet me: https://twitter.com/pietvandongen
• Link me: https://www.linkedin.com/in/pietvandongencom/
• Visit me at Luminis (https://www.luminis.eu/)