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

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

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

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
Front-end application development, Symfony-style(s)
dunglas
2
1.9k
Running Laravel Apps With FrankenPHP
dunglas
4
1.6k
PHP and Symfony Apps As Standalone Binaries
dunglas
2
7.6k
Webperf: boost your PHP apps with 103 Early Hints
dunglas
2
3.3k
The PHP Revolution Is Underway: FrankenPHP 1.0 Beta
dunglas
1
13k
Mitigate Attacks on your PHP Supply Chain
dunglas
2
1.3k
Symfony ImportMaps: Manage Your JavaScript Dependencies Without Node
dunglas
2
3.4k
Ne vous lamentez pas, organisez-vous !
dunglas
0
1k
FrankenPHP: a modern app server for PHP and Symfony apps
dunglas
1
12k

Other Decks in Programming

See All in Programming
CQRS/ES avec Symfony, c’est (trop) bien !
jeremyfreeagent
1
630
Milestoner
bkuhlmann
1
400
Javaエンジニアのための Nodejs/Nuxt3入門
hidekatsu_izuno
0
280
Micro Frontends for Java Microservices - Devnexus 2024
mraible
PRO
0
420
大規模Reactアプリのリアーキテクチャ~8万行のTanStack Query移行の軌跡~
kj455
3
710
Elm Form Validation
bkuhlmann
0
500
ドメイン・ファーストで考える問題解決に役立つモデル設計 / Domain First Model Design
suzushin54
2
2.1k
PHP8.3の機能を振り返る / Review of PHP 8.3 features
seike460
PRO
1
110
雑に思考を整理する技術と効能
konifar
55
25k
今の SmartHR にエンジニアで入社するとどうなるの？
daisukeshinoku
5
4.6k
OpenTelemetry のサービスという概念について
azukiazusa1
2
1.1k
HUIT新歓2024「競技プログラミング、やってみませんか？」
slephy2784
1
250

Featured

See All Featured
Producing Creativity
orderedlist
PRO
336
39k
Why Our Code Smells
bkeepers
PRO
331
56k
Scaling GitHub
holman
457
140k
Product Roadmaps are Hard
iamctodd
43
9.7k
Statistics for Hackers
jakevdp
789
220k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
273
13k
Facilitating Awesome Meetings
lara
41
5.6k
Design by the Numbers
sachag
274
18k
In The Pink: A Labor of Love
frogandcode
138
21k
Building Better People: How to give real-time feedback that sticks.
wjessup
354
18k
What's new in Ruby 2.0
geeforr
337
31k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
124
32k

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