Symfony UX Turbo

Tired Of Modern Web Development?

You build your backend that exposes some kind of API.

You build a Single-Page Application that consumes your API.

You build a Single-Page Application that consumes your API. You make sure the backend doesn't send data the frontend doesn't expect (and vice versa).

You build a Single-Page Application that consumes your API. You make sure the backend doesn't send data the frontend doesn't expect (and vice versa). You coordinate releases to make sure neither side causes trouble in production.

You build a Single-Page Application that consumes your API. You make sure the backend doesn't send data the frontend doesn't expect (and vice versa). You coordinate releases to make sure neither side causes trouble in production. You ﬁght with Webpack and Babel.

You build a Single-Page Application that consumes your API. You make sure the backend doesn't send data the frontend doesn't expect (and vice versa). You coordinate releases to make sure neither side causes trouble in production. You ﬁght with Webpack and Babel. And all you wanted was to give your users that modern web experience !

Ever Wish You Could Write a modern application Without Writing
JavaScript?

Is that even possible?

Thanks for listening! $kernel->terminate($request, $response);

Actually, there's a bit more to it...

Olá! ! Marco Petersen " Software Developer @ QOSSMIC (fka
SensioLabs Germany) # Berlin $ % @ocrampete16

Today's Menu • Appetizer: The Back Story - What is
Symfony UX Turbo? • Main Course: 3 Building Blocks - Drive, Frames & Streams • Dessert: Turbo In Action: Example Application

Appetizer What is Symfony UX Turbo?

What is Hotwire? • Turbo: modern applications without writing JavaScript
• Stimulus: simple JS framework if you need JavaScript • Strada: web/native app bridge

Installation composer require symfony/ux-turbo symfony/ux-turbo-mercure yarn install --force yarn encore
dev

Main Course Drive, Frames & Streams

Turbo Drive navigates to new pages without full page reloads.

Turbo Drive 1. User clicks on a link or submits
a form. 2. intervenes and stops the default action (visit new page). 3. fetches the page using fetch in the background. 4. Replaces <body> and merges <head>. 5. Updates browser history with history.pushState.

Clicking Links <a href="{{ path('create_room') }}">Create Room</a> <a href="{{ path('create_room')
}}" data-turbo-action="replace">Create Room</a>

Handling Forms #[Route('/rooms/create', name: 'create_room')] public function create(Request $request, EntityManagerInterface
$entityManager): Response { $room = new Room(); $form = $this->createForm(RoomType::class, $room); $form->handleRequest($request); if ($form->isSubmitted() && $form->isValid()) { $entityManager->persist($form->getData()); $entityManager->flush(); return $this->redirectToRoute('rooms', [], Response::HTTP_SEE_OTHER); } return $this->renderForm('room/create.html.twig', ['form' => $form]); }

Learn more about Turbo Drive at https://turbo.hotwire.dev/ handbook/drive

Turbo Frames are independent content blocks.

Turbo Frames • quite similar to iframes • lets a
part of the page have their own "context" • clicking links & submitting forms inside a frame only replaces the content inside that frame • pages can contain multiple frames

Scoping Content and Actions <h1>Rooms</h1> <turbo-frame id="create-room"> <a href="{{ path('create_room')
}}">Create Room</a> </turbo-frame> <ul id="room-list"> {% for room in rooms %} {{ include('fragments/_room_list_item.html.twig', {room: room}) }} {% endfor %} </ul>

<turbo-frame id="create-room"> <a href="{{ path('create_room') }}">Create
Room</a> </turbo-frame>  <h1>Create New Room</h1> <turbo-frame id="create-room"> {{ form(form) }} </turbo-frame>

<turbo-frame id="create-room"> {{ form(form) }} </turbo-frame>
 <h1>Create New Room</h1> <turbo-frame id="create-room"> {{ form(form) }} </turbo-frame>

Turbo Frames and ESI • Just like in Rails, Turbo
Frames can also lazily load frames on the client-side. • The Symfony integration takes advantage of the already existing ESI features Symfony brings.

Lazily Loading a Frame <turbo-frame id="latest-news" src="{{ fragment_uri(controller('App\\Controller\\NewsController::latest')) }}"> </turbo-frame>
https://symfony.com/doc/current/http_cache/esi.html

Turbo Streams stream server-side changes to your users' browsers.

Turbo Streams • easily add real-time capabilities to your application
• HTML fragments are streamed to the browser • server pushes changes to connected users using a real-time protocol (like Mercure or Websocket) • Symfony integration uses Mercure

Listening on Streams <ul id="room-list" {{ turbo_stream_listen('my_stream_key') }}> {% for
room in rooms %} {{ include('fragments/_room_list_item.html.twig', {room: room}) }} {% endfor %} </ul>

Publishing Changes #[Route('/rooms/create', name: 'create_room')] public function create( Request $request,
EntityManagerInterface $entityManager, HubInterface $hub ): Response { // create form $form->handleRequest($request); if ($form->isSubmitted() && $form->isValid()) { $entityManager->persist($form->getData()); $entityManager->flush(); $hub->publish( new Update( 'my_stream_key', $this->renderView('room/new.stream.html.twig', ['room' => $room]) ) ); return $this->redirectToRoute('view_room', ['id' => $room->getId()], Response::HTTP_SEE_OTHER); } return $this->renderForm('room/rename.html.twig', ['form' => $form]); }

HTML Fragment  <turbo-stream action="append" target="room-list"> <template>  </template> </turbo-stream>

Doctrine Integration • Symfony UX Turbo makes it easy to
publish changes from Doctrine entities. • Maker bundle supports generating the necessary ﬁles (entity w/ attribute, fragment template etc.)

Dessert Example Application

Why I Like (Symfony UX) Turbo • Promising abstractions •
React introduced components ➡ large client-side applications now maintainable • Drive, Frames & Streams are useful primitives that can be used together in various combinations • ﬁrst-class integration with Symfony

But It's Still Early Days • Hotwire has only been
out for a few months. • Only large-scale user is Basecamp. • No established community best practices yet.

Thanks for listening! (for real now) $kernel->terminate($request, $response);

Symfony UX Turbo

Symfony UX Turbo

More Decks by Marco Petersen

Other Decks in Programming

Featured

Transcript