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

Symfony UX @ PHPro Tech Meetup

Symfony UX @ PHPro Tech Meetup

javaScript components you can't live without

Toon Verwerft

May 11, 2023
Tweet

More Decks by Toon Verwerft

Other Decks in Programming

Transcript

  1. • New initiative from the developers of Symfony • A

    set of front-end tools, components and libraries • Behind the scenes, the UX packages uses
  2. • Bind a PHP object to a template (Twig view)

    • Re-usable components in your Symfony application • Apply atomic design in Twig
  3. • Add real-time (partial) updates to your app using WebSocket

    or SSE • Chat • Live availabilty (webshop, reservation app, …) • Auction bidding (Zangersheide) • Our shared TODO app • ...
  4. WebSocket SSE 2 way 1 way Non HTTP HTTP based

    No reconnection Built-in reconnection
  5. • Functionally simalar to old school HTML frames • Update

    parts of the page • Equal to Turbo Steams, but "synchronously"
  6. data data data data data data data data data data

    data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data
  7. PHP BROWSER Initial render Updated view connect connect Updated view

    connect Updated view connect Lifecycle callbacks