Slide 1

Slide 1 text

Les-Tilleuls.coop HTTP/2 & Symfony

Slide 2

Slide 2 text

Les-Tilleuls.coop Kévin Dunglas ❏ ❏ WebLink ❏ @dunglas

Slide 3

Slide 3 text

Les-Tilleuls.coop Self-managed ⬆ ➡ Les-Tilleuls.coop

Slide 4

Slide 4 text

Les-Tilleuls.coop HTTP, powering the web since 1989 Tim Berners Lee

Slide 5

Slide 5 text

Les-Tilleuls.coop 1991: HTTP 0.9 ❏ ❏ ❏ ❏ hypermedia ❏ ❏ ❏ Simple 1 line protocol

Slide 6

Slide 6 text

Les-Tilleuls.coop $ telnet les-tilleuls.coop 80 Connected to les-tilleuls.coop. GET /en/jobs Hello Symfony Folks Connection closed by foreign host.

Slide 7

Slide 7 text

Les-Tilleuls.coop

Slide 8

Slide 8 text

Les-Tilleuls.coop 1996: HTTP 1.0 ❏ headers ❏ ❏ ❏ ❏ ❏ ❏

Slide 9

Slide 9 text

Les-Tilleuls.coop $ telnet les-tilleuls.com 80 GET /en/jobs HTTP/1.0 User-Agent: MyBrowser Accept: text/html HTTP/1.0 200 OK Content-Type: text/html …

Hi sfPot

Connection closed by foreign host.

Slide 10

Slide 10 text

Les-Tilleuls.coop 1997: HTTP 1.1 ❏ 1st official internet standard (RFC 2068) ❏ ❏ ❏ ❏ ❏ ❏

Slide 11

Slide 11 text

Les-Tilleuls.coop $ telnet les-tilleuls.com 80 GET /en/jobs HTTP/1.1 Host: les-tilleuls.coop [...] HTTP/1.1 200 OK Transfer-Encoding: chunked ➡

Slide 12

Slide 12 text

Les-Tilleuls.coop 100 0 GET /favicon.ico HTTP/1.1 [headers] GET /style.css HTTP/1.1 Connection: close [headers] HTTP/1.1 200 OK [body] HTTP/1.1 200 OK [body]

Slide 13

Slide 13 text

Les-Tilleuls.coop HTTP/2 (aka h2)

Slide 14

Slide 14 text

Les-Tilleuls.coop 2015: HTTP/2 ❏ ❏ Binary protocol ❏ ❏ ❏ QUIC ❏ High-level compatibility with HTTP 1 ❏

Slide 15

Slide 15 text

Les-Tilleuls.coop http://qnimate.com/what-is-multiplexing-in-http2/ Multiplexing

Slide 16

Slide 16 text

Les-Tilleuls.coop

Slide 17

Slide 17 text

Les-Tilleuls.coop Supported by 82% of end users

Slide 18

Slide 18 text

Les-Tilleuls.coop Cloudways

Slide 19

Slide 19 text

Les-Tilleuls.coop ● ● ●

Slide 20

Slide 20 text

Les-Tilleuls.coop h2 and PHP, server-side

Slide 21

Slide 21 text

Les-Tilleuls.coop h2 and PHP: server-side 3. No change to the PHP app ✌

Slide 22

Slide 22 text

Les-Tilleuls.coop h2 and PHP: Nginx server { listen 443 ssl http2; # ssl_certificate config # fastcgi_pass config } ❏ No Push hint support

Slide 23

Slide 23 text

Les-Tilleuls.coop h2 and PHP: Apache Listen 443 SSLEngine on # SSL config Protocols h2 http/1.1 ❏ Push hint support

Slide 24

Slide 24 text

Les-Tilleuls.coop h2 and PHP: alternative ❏ ❏ ❏ ❏ ❏ ❏

Slide 25

Slide 25 text

Les-Tilleuls.coop h2 and PHP, client-side

Slide 26

Slide 26 text

Les-Tilleuls.coop cURL

Slide 27

Slide 27 text

Les-Tilleuls.coop Guzzle Use https://github.com/csarrazi/CsaGuzzleBundle

Slide 28

Slide 28 text

Les-Tilleuls.coop H2 Push & hints ⚡

Slide 29

Slide 29 text

Les-Tilleuls.coop Specifications W3C’s Preload ❏ ❏ W3C’s Resource Hints ❏

Slide 30

Slide 30 text

Les-Tilleuls.coop Hint the server, the proxy or the client with a Link header...

Slide 31

Slide 31 text

Les-Tilleuls.coop The server or the proxy may push the linked resource using h2 nopush attribute: prevent h2 push but let the client send an early request.

Slide 32

Slide 32 text

Les-Tilleuls.coop Other standard rel types ❏ dns_prefetch ❏ preconnect ❏ prefetch ❏ prerender

Slide 33

Slide 33 text

Les-Tilleuls.coop The Symfony WebLink Component

Slide 34

Slide 34 text

Les-Tilleuls.coop Symfony Weblink Component ❏ Link ❏ ❏ ❏ ❏ ❏

Slide 35

Slide 35 text

Les-Tilleuls.coop Install composer req symfony/weblink Or with Flex: composer req weblink

Slide 36

Slide 36 text

Les-Tilleuls.coop Standalone usage

Slide 37

Slide 37 text

Les-Tilleuls.coop In Symfony

Slide 38

Slide 38 text

Les-Tilleuls.coop In Twig

Slide 39

Slide 39 text

Les-Tilleuls.coop Resulting Header

Slide 40

Slide 40 text

Les-Tilleuls.coop In the Browser

Slide 41

Slide 41 text

Les-Tilleuls.coop Other Built-in Twig Helpers ❏ link() ❏ preload() ❏ dns_prefetch() ❏ preconnect() ❏ prefetch() ❏ prerender()

Slide 42

Slide 42 text

Les-Tilleuls.coop Start Right Now

Slide 43

Slide 43 text

Les-Tilleuls.coop Symfony Docker docker-compose up

Slide 44

Slide 44 text

Les-Tilleuls.coop

Slide 45

Slide 45 text

Les-Tilleuls.coop @dunglas @coopTilleuls