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
HTTP compression in PHP and Symfony apps
dunglas
2
1.7k
How to debug Xdebug... or any other weird bug in PHP
dunglas
2
1.9k
API Platform for Laravel
dunglas
1
1.9k
Containerization Tips and Tricks for PHP apps
dunglas
3
6.8k
Front-end application development, Symfony-style(s)
dunglas
2
3.4k
Running Laravel Apps With FrankenPHP
dunglas
5
3.8k
PHP and Symfony Apps As Standalone Binaries
dunglas
3
9.9k
Webperf: boost your PHP apps with 103 Early Hints
dunglas
2
4.6k
The PHP Revolution Is Underway: FrankenPHP 1.0 Beta
dunglas
1
15k

Other Decks in Programming

See All in Programming
Recoilを剥がしている話
kirik
5
7.1k
コンテナをたくさん詰め込んだシステムとランタイムの変化
makihiro
1
140
KubeCon + CloudNativeCon NA 2024 Overview at Kubernetes Meetup Tokyo #68 / amsy810_k8sjp68
masayaaoyama
0
260
採用事例の少ないSvelteを選んだ理由と それを正解にするためにやっていること
oekazuma
2
1.1k
Webエンジニア主体のモバイルチームの 生産性を高く保つためにやったこと
igreenwood
0
340
テストコード文化を0から作り、変化し続けた組織
kazatohiei
2
1.5k
Асинхронность неизбежна: как мы проектировали сервис уведомлений
lamodatech
0
930
nekko cloudにおけるProxmox VE利用事例
irumaru
3
450
今年やったこと最近やったこと２０２４
saito5656
0
100
DevFest - Serverless 101 with Google Cloud Functions
tunmise
0
120
Scalaから始めるOpenFeature入門 / Scalaわいわい勉強会 #4
arthur1
1
340
【re:Growth 2024】 Aurora DSQL をちゃんと話します！
maroon1st
0
800

Featured

See All Featured
Dealing with People You Can't Stand - Big Design 2015
cassininazir
365
25k
Building Adaptive Systems
keathley
38
2.3k
Build The Right Thing And Hit Your Dates
maggiecrowley
33
2.4k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.2k
Designing on Purpose - Digital PM Summit 2013
jponch
116
7k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.3k
Gamification - CAS2011
davidbonilla
80
5.1k
4 Signs Your Business is Dying
shpigford
182
21k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
29
2k
Being A Developer After 40
akosma
87
590k
For a Future-Friendly Web
brad_frost
175
9.4k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
6
520

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