Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
@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
Upcoming SlideShare
Loading in …5
×

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

30,394 views

Published on

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

Published in: Software
no profile picture user
  • ➤➤ How Long Does She Want You to Last? Here's the link to the FREE report ♣♣♣ https://tinyurl.com/rockhardxxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
Show More

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

×