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

HTTP/2, PHP and Symfony: a brief history of the...

Kévin Dunglas
January 16, 2018
Programming
6
17k

HTTP/2, PHP and Symfony: a brief history of the protocol powering the web, and how to use it

A few months ago, I’ve contributed a new component to Symfony: WebLink.
By implementing cutting edge web standards, namely HTTP/2 Server Push and W3C’s Resource Hints, it brings great opportunities to boost webapp’s performance.

Let's discover how HTTP/2 and WebLink work.

Kévin Dunglas

January 16, 2018
Tweet

More Decks by Kévin Dunglas

See All by Kévin Dunglas
How to debug Xdebug... or any other weird bug in PHP
dunglas
2
1.8k
API Platform for Laravel
dunglas
1
1.7k
Containerization Tips and Tricks for PHP apps
dunglas
3
6.6k
Front-end application development, Symfony-style(s)
dunglas
2
3.3k
Running Laravel Apps With FrankenPHP
dunglas
5
3.5k
PHP and Symfony Apps As Standalone Binaries
dunglas
3
9.6k
Webperf: boost your PHP apps with 103 Early Hints
dunglas
2
4.4k
The PHP Revolution Is Underway: FrankenPHP 1.0 Beta
dunglas
1
14k
Mitigate Attacks on your PHP Supply Chain
dunglas
2
1.5k

Other Decks in Programming

See All in Programming
EventSourcingの理想と現実
wenas
6
2.3k
as（型アサーション）を書く前にできること
marokanatani
6
1.8k
WebフロントエンドにおけるGraphQL（あるいはバックエンドのAPI）との向き合い方 / #241106_plk_frontend
izumin5210
4
1.3k
Pinia Colada が実現するスマートな非同期処理
naokihaba
4
220
Boost Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
1.7k
Jakarta EE meets AI
ivargrimstad
0
290
What’s New in Compose Multiplatform - A Live Tour (droidcon London 2024)
zsmb
1
460
ふかぼれ！CSSセレクターモジュール / Fukabore! CSS Selectors Module
petamoriken
0
150
LLM生成文章の精度評価自動化とプロンプトチューニングの効率化について
layerx
PRO
2
180
PHP でアセンブリ言語のように書く技術
memory1994
PRO
1
160
Tauriでネイティブアプリを作りたい
tsucchinoko
0
360
ヤプリ新卒SREの オンボーディング
masaki12
0
120

Featured

See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
How GitHub (no longer) Works
holman
310
140k
Building a Scalable Design System with Sketch
lauravandoore
459
33k
Bash Introduction
62gerente
608
210k
Building Applications with DynamoDB
mza
90
6.1k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Keith and Marios Guide to Fast Websites
keithpitt
409
22k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Put a Button on it: Removing Barriers to Going Fast.
kastner
59
3.5k
How to Think Like a Performance Engineer
csswizardry
20
1.1k
Code Reviewing Like a Champion
maltzj
520
39k
Building Your Own Lightsaber
phodgson
103
6.1k

Transcript

  1. Les-Tilleuls.coop HTTP/2 & Symfony

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

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

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

  5. Les-Tilleuls.coop 1991: HTTP 0.9 ❏ ❏ ❏ ❏ hypermedia ❏

    ❏ ❏ Simple 1 line protocol

  6. Les-Tilleuls.coop $ telnet les-tilleuls.coop 80 Connected to les-tilleuls.coop. GET /en/jobs

    <TITLE>Hello Symfony Folks</TITLE> Connection closed by foreign host.

  7. Les-Tilleuls.coop

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

    ❏ ❏

  9. 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 … <h1>Hi sfPot</h1> Connection closed by foreign host.

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

    2068) ❏ ❏ ❏ ❏ ❏ ❏

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

  12. Les-Tilleuls.coop 100 <html><!--...!--> 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]

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

  14. Les-Tilleuls.coop 2015: HTTP/2 ❏ ❏ Binary protocol ❏ ❏ ❏

    QUIC ❏ High-level compatibility with HTTP 1 ❏

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

  16. Les-Tilleuls.coop

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

  18. Les-Tilleuls.coop Cloudways

  19. Les-Tilleuls.coop • • •

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

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

    PHP app ✌

  22. Les-Tilleuls.coop h2 and PHP: Nginx server { listen 443 ssl

    http2; # ssl_certificate config # fastcgi_pass config } ❏ No Push hint support

  23. Les-Tilleuls.coop h2 and PHP: Apache Listen 443 SSLEngine on #

    SSL config Protocols h2 http/1.1 ❏ Push hint support

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

    ❏

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

  26. Les-Tilleuls.coop cURL

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

  28. Les-Tilleuls.coop H2 Push & hints ⚡

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

  30. Les-Tilleuls.coop Hint the server, the proxy or the client with

    a Link header...

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

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

    prefetch ❏ prerender

  33. Les-Tilleuls.coop The Symfony WebLink Component

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

    ❏

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

    weblink

  36. Les-Tilleuls.coop Standalone usage

  37. Les-Tilleuls.coop In Symfony

  38. Les-Tilleuls.coop In Twig

  39. Les-Tilleuls.coop Resulting Header

  40. Les-Tilleuls.coop In the Browser

  41. Les-Tilleuls.coop Other Built-in Twig Helpers ❏ link() ❏ preload() ❏

    dns_prefetch() ❏ preconnect() ❏ prefetch() ❏ prerender()

  42. Les-Tilleuls.coop Start Right Now

  43. Les-Tilleuls.coop Symfony Docker docker-compose up

  44. Les-Tilleuls.coop

  45. Les-Tilleuls.coop @dunglas @coopTilleuls