Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
@dunglas
Speed up
your apps with
HTTP/2
@dunglas
Kévin Dunglas
❏
❏
WebLink
❏
@dunglas
@dunglas
✍ Self-managed
⬆
👷 ➡
Les-Tilleuls.coop
@dunglas
HTTP, powering the
web since 1989
Tim Berners Lee
@dunglas
1991: HTTP 0.9
❏
❏
❏
❏ Hypermedia
❏
❏
❏ Simple 1 line protocol
@dunglas
$ telnet les-tilleuls.coop 80
Connected to les-tilleuls.coop.
GET /en/jobs
<TITLE>Hi, Forum PHP folks</TITLE>
Con...
@dunglas
@dunglas
1996: HTTP 1.0
❏ headers
❏
❏
❏
❏
❏
❏
@dunglas
$ telnet les-tilleuls.com 80
GET /en/jobs HTTP/1.0
User-Agent: MyBrowser
Accept: text/html
HTTP/1.0 200 OK
Conten...
@dunglas
1997: HTTP 1.1
❏ 1st official internet standard (RFC 2068)
❏
❏
❏
❏
❏
❏
@dunglas
$ telnet les-tilleuls.com 80
GET /en/jobs HTTP/1.1
Host: les-tilleuls.coop
[...]
HTTP/1.1 200 OK
Transfer-Encodin...
@dunglas
100
<html><!--...!-->
0
GET /favicon.ico HTTP/1.1
[headers]
GET /style.css HTTP/1.1
Connection: close
[headers]
H...
@dunglas
HTTP/2 (aka h2)
@dunglas
2015: HTTP/2
❏
❏ Binary protocol
❏
❏
❏ QUIC
❏ High-level compatibility with HTTP 1.x
❏
@dunglas
http://qnimate.com/what-is-multiplexing-in-http2/
Multiplexing
@dunglas
https://www.slideshare.net/SimoneBordet/http2-and-java-current-status
@dunglas
Global support: 86%
@dunglas
Cloudways
@dunglas
●
●
●
@dunglas
h2 and PHP,
server-side
@dunglas
h2 and PHP: server-side
3. No change to the PHP app ✌
@dunglas
h2 and PHP: Nginx
server {
listen 443 ssl http2;
# ssl_certificate config
# fastcgi_pass config
}
❏ 💪 Push hint s...
@dunglas
h2 and PHP: Apache
Listen 443
SSLEngine on
# SSL config
Protocols h2 http/1.1
❏ 💪 Push hint supported
@dunglas
h2 and PHP: alternative
❏
❏
❏
❏
❏
@dunglas
h2 and PHP,
client-side
@dunglas
cURL
@dunglas
Guzzle
Use https://github.com/csarrazi/CsaGuzzleBundle
@dunglas
h2 Push & hints ⚡
@dunglas
Specifications
W3C Preload
❏
❏
W3C Resource Hints
❏
@dunglas
Hint the server, the proxy or the client
with a Link header...
@dunglas
The server or the proxy may push the linked
resource using h2
nopush attribute: prevent h2 push but let the clien...
@dunglas
Other standard rel types
❏ dns_prefetch
❏ preconnect
❏ prefetch
❏ prerender
@dunglas
The Symfony WebLink
Component
@dunglas
Symfony WebLink Component
❏ Link
❏
❏
❏
❏
❏
@dunglas
Install
composer req symfony/web-link
Or with Flex:
composer req web-link
@dunglas
Standalone usage
@dunglas
In a Symfony controller
@dunglas
In Twig
@dunglas
Resulting Header
@dunglas
In the Browser
@dunglas
Other Built-in Twig Helpers
❏ link()
❏ preload()
❏ dns_prefetch()
❏ preconnect()
❏ prefetch()
❏ prerender()
@dunglas
Start Right Now
@dunglas
Symfony Docker
docker-compose up
@dunglas
@dunglas
Debugging
@dunglas
@dunglas
Mercure ✉
@dunglas
@dunglas github.com/dunglas/mercure
@dunglas
Discovery Mechanism
@dunglas
Mercure, the Protocol
❏
❏
❏ h2 multiplexing
❏ Authorization
❏ Reconnection
❏
❏
❏
@dunglas
Subscribing (JavaScript)
@dunglas
@dunglas
Mercure x Symfony
composer req symfony/mercure-bundle
# A standalone component is also available: symfony/mercure...
@dunglas
Publishing (Symfony)
@dunglas
Mercure x API Platform
@dunglas
@dunglas
Summary
❏
❏
❏
❏
❏ push
❏
❏
Use HTTP/2, right now
@dunglas
Thanks!
@dunglas
@coopTileuls
Nächste SlideShare
Wird geladen in …5
×

HTTP/2: speed up your apps and dispatch real time updates (Symfony and API Platform's features announcement)

32.442 Aufrufe

Veröffentlicht am

HTTP/2 can improve the loading time of webpages up to 2 times. Did you know that it’s very easy to optimize your Symfony applications to leverage the advanced features of this new protocol?

This talk also contains the announcement of 3 new PHP packages:

- Symfony Mercure Component
- Symfony Mercure Bundle
- Mercure integration in API Platform

The talk agenda:
- a historically contextualized presentation of the different versions of the HTTP protocol;
- a state of the protocol support in the PHP ecosystem;
- a guide explaining how to serve your PHP and Symfony apps with h2, using Nginx, Apache and Docker;
- many code samples showing how to use h2 to improve the loading time of your assets and APIs using the WebLink component and Twig
- examples of how to take advantage of the protocol using the curl and Guzzle clients
- the Mercure Protocol
- Mercure x Symfony
- Mercure x API Platform

Veröffentlicht in: Software
  • Als Erste(r) kommentieren

HTTP/2: speed up your apps and dispatch real time updates (Symfony and API Platform's features announcement)

  1. 1. @dunglas Speed up your apps with HTTP/2
  2. 2. @dunglas Kévin Dunglas ❏ ❏ WebLink ❏ @dunglas
  3. 3. @dunglas ✍ Self-managed ⬆ 👷 ➡ Les-Tilleuls.coop
  4. 4. @dunglas HTTP, powering the web since 1989 Tim Berners Lee
  5. 5. @dunglas 1991: HTTP 0.9 ❏ ❏ ❏ ❏ Hypermedia ❏ ❏ ❏ Simple 1 line protocol
  6. 6. @dunglas $ telnet les-tilleuls.coop 80 Connected to les-tilleuls.coop. GET /en/jobs <TITLE>Hi, Forum PHP folks</TITLE> Connection closed by foreign host.
  7. 7. @dunglas
  8. 8. @dunglas 1996: HTTP 1.0 ❏ headers ❏ ❏ ❏ ❏ ❏ ❏
  9. 9. @dunglas $ 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>Coucou Forum PHP</h1> Connection closed by foreign host.
  10. 10. @dunglas 1997: HTTP 1.1 ❏ 1st official internet standard (RFC 2068) ❏ ❏ ❏ ❏ ❏ ❏
  11. 11. @dunglas $ telnet les-tilleuls.com 80 GET /en/jobs HTTP/1.1 Host: les-tilleuls.coop [...] HTTP/1.1 200 OK Transfer-Encoding: chunked ➡
  12. 12. @dunglas 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. 13. @dunglas HTTP/2 (aka h2)
  14. 14. @dunglas 2015: HTTP/2 ❏ ❏ Binary protocol ❏ ❏ ❏ QUIC ❏ High-level compatibility with HTTP 1.x ❏
  15. 15. @dunglas http://qnimate.com/what-is-multiplexing-in-http2/ Multiplexing
  16. 16. @dunglas https://www.slideshare.net/SimoneBordet/http2-and-java-current-status
  17. 17. @dunglas Global support: 86%
  18. 18. @dunglas Cloudways
  19. 19. @dunglas ● ● ●
  20. 20. @dunglas h2 and PHP, server-side
  21. 21. @dunglas h2 and PHP: server-side 3. No change to the PHP app ✌
  22. 22. @dunglas h2 and PHP: Nginx server { listen 443 ssl http2; # ssl_certificate config # fastcgi_pass config } ❏ 💪 Push hint supported
  23. 23. @dunglas h2 and PHP: Apache Listen 443 SSLEngine on # SSL config Protocols h2 http/1.1 ❏ 💪 Push hint supported
  24. 24. @dunglas h2 and PHP: alternative ❏ ❏ ❏ ❏ ❏
  25. 25. @dunglas h2 and PHP, client-side
  26. 26. @dunglas cURL
  27. 27. @dunglas Guzzle Use https://github.com/csarrazi/CsaGuzzleBundle
  28. 28. @dunglas h2 Push & hints ⚡
  29. 29. @dunglas Specifications W3C Preload ❏ ❏ W3C Resource Hints ❏
  30. 30. @dunglas Hint the server, the proxy or the client with a Link header...
  31. 31. @dunglas 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. 32. @dunglas Other standard rel types ❏ dns_prefetch ❏ preconnect ❏ prefetch ❏ prerender
  33. 33. @dunglas The Symfony WebLink Component
  34. 34. @dunglas Symfony WebLink Component ❏ Link ❏ ❏ ❏ ❏ ❏
  35. 35. @dunglas Install composer req symfony/web-link Or with Flex: composer req web-link
  36. 36. @dunglas Standalone usage
  37. 37. @dunglas In a Symfony controller
  38. 38. @dunglas In Twig
  39. 39. @dunglas Resulting Header
  40. 40. @dunglas In the Browser
  41. 41. @dunglas Other Built-in Twig Helpers ❏ link() ❏ preload() ❏ dns_prefetch() ❏ preconnect() ❏ prefetch() ❏ prerender()
  42. 42. @dunglas Start Right Now
  43. 43. @dunglas Symfony Docker docker-compose up
  44. 44. @dunglas
  45. 45. @dunglas Debugging
  46. 46. @dunglas
  47. 47. @dunglas Mercure ✉
  48. 48. @dunglas
  49. 49. @dunglas github.com/dunglas/mercure
  50. 50. @dunglas Discovery Mechanism
  51. 51. @dunglas Mercure, the Protocol ❏ ❏ ❏ h2 multiplexing ❏ Authorization ❏ Reconnection ❏ ❏ ❏
  52. 52. @dunglas Subscribing (JavaScript)
  53. 53. @dunglas
  54. 54. @dunglas Mercure x Symfony composer req symfony/mercure-bundle # A standalone component is also available: symfony/mercure Or with Flex: composer req mercure
  55. 55. @dunglas Publishing (Symfony)
  56. 56. @dunglas Mercure x API Platform
  57. 57. @dunglas
  58. 58. @dunglas Summary ❏ ❏ ❏ ❏ ❏ push ❏ ❏ Use HTTP/2, right now
  59. 59. @dunglas Thanks! @dunglas @coopTileuls

×