Symfony UX @ PHPro Tech Meetup

JavaScript tools you can't live without.

• New initiative from the developers of Symfony • A
set of front-end tools, components and libraries • Behind the scenes, the UX packages uses

DEMO – TODO APP

TWIG COMPONENTS

• Bind a PHP object to a template (Twig view)
• Re-usable components in your Symfony application • Apply atomic design in Twig

Atoms Molecules Organisms Templates Pages

templates/components/atoms/button.html.twig

LIVE COMPONENTS

PHP (SERVER) BROWSER Initial render Action triggered Updated view

templates/components/molecules/todo_item.html.twig

PHP BROWSER Initial render Data changed Updated view DATA DATA

templates/form/theme.html.twig

TURBO STEAMS TURBO DRIVE TURBO FRAMES

TURBO STEAMS

• 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 • ...

Publisher 1 Subscriber 1 Subscriber 2 Subscriber 3

WebSocket SSE 2 way 1 way Non HTTP HTTP based
No reconnection Built-in reconnection

templates/broadcast/Todo.stream.html.twig

templates/components/organisms/todo_list.html.twig

TURBO DRIVE

• Turn clicks and form submits into ajax calls •
SPA experience

replaces <body>, merges <head>

TURBO FRAMES

• Functionally simalar to old school HTML frames • Update
parts of the page • Equal to Turbo Steams, but "synchronously"

loading="lazy"

A modest JavaScript Framework for the HTML you already have!

Controller Target Action

data data data data data data data data data data
data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data

PHP BROWSER Initial render Updated view connect connect Updated view
connect Updated view connect Lifecycle callbacks

INITIALIZE CONNECT DISCONNECT

Controller Target Action

assets/controllers/confirm_controller.ts

ANY QUESTIONS?

Symfony UX @ PHPro Tech Meetup

Symfony UX @ PHPro Tech Meetup

More Decks by Toon Verwerft

Other Decks in Programming

Featured

Transcript