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.

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

5. Les-Tilleuls.coop
   1991: HTTP 0.9
   ❏
   ❏
   ❏
   ❏ hypermedia
   ❏
   ❏
   ❏ Simple 1 line protocol
   

   View Slide

6. Les-Tilleuls.coop
   $ telnet les-tilleuls.coop 80
   Connected to les-tilleuls.coop.
   GET /en/jobs
   Hello Symfony Folks
   Connection closed by foreign host.
   

   View Slide

7. Les-Tilleuls.coop
   

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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
    ➡
    

    View Slide

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

    View Slide

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

    View Slide

14. Les-Tilleuls.coop
    2015: HTTP/2
    ❏
    ❏ Binary protocol
    ❏
    ❏
    ❏ QUIC
    ❏ High-level compatibility with HTTP 1
    ❏
    

    View Slide

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

    View Slide

16. Les-Tilleuls.coop
    

    View Slide

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

    View Slide

18. Les-Tilleuls.coop
    Cloudways
    

    View Slide

19. Les-Tilleuls.coop
    ●
    ●
    ●
    

    View Slide

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

    View Slide

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

    View Slide

22. Les-Tilleuls.coop
    h2 and PHP: Nginx
    server {
    listen 443 ssl http2;
    # ssl_certificate config
    # fastcgi_pass config
    }
    ❏ No Push hint support
    

    View Slide

23. Les-Tilleuls.coop
    h2 and PHP: Apache
    Listen 443
    SSLEngine on
    # SSL config
    Protocols h2 http/1.1
    ❏ Push hint support
    

    View Slide

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

    View Slide

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

    View Slide

26. Les-Tilleuls.coop
    cURL
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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.
    

    View Slide

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

    View Slide

33. Les-Tilleuls.coop
    The Symfony WebLink
    Component
    

    View Slide

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

    View Slide

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

    View Slide

36. Les-Tilleuls.coop
    Standalone usage
    

    View Slide

37. Les-Tilleuls.coop
    In Symfony
    

    View Slide

38. Les-Tilleuls.coop
    In Twig
    

    View Slide

39. Les-Tilleuls.coop
    Resulting Header
    

    View Slide

40. Les-Tilleuls.coop
    In the Browser
    

    View Slide

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

    View Slide

42. Les-Tilleuls.coop
    Start Right Now
    

    View Slide

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

    View Slide

44. Les-Tilleuls.coop
    

    View Slide

45. Les-Tilleuls.coop
    @dunglas
    @coopTilleuls
    

    View Slide