Symfony UX Turbo

Tired Of Modern Web Development?

You build your backend that exposes some kind of API.

You build your backend that exposes some kind of API. You build a Single-Page Application that consumes your API.

You build your backend that exposes some kind of 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 your backend that exposes some kind of 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 coordinate releases to make sure neither side causes trouble in production.

You build your backend that exposes some kind of 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 coordinate releases to make sure neither side causes trouble in production. You fight with Webpack and Babel.

You build your backend that exposes some kind of 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 coordinate releases to make sure neither side causes trouble in production. You fight 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?

Yes.

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?

No content

No content

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

No content

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 and merges . 5. Updates browser history with history.pushState.

Clicking Links Create Room Create Room

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

Rooms

Create Room

{% for room in rooms %} {{ include('fragments/_room_list_item.html.twig', {room: room}) }} {% endfor %}

Create Room

Create New Room

{{ form(form) }}

Create Room

Create New Room

{{ form(form) }}

{{ form(form) }}

Create New Room

{{ form(form) }}

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

No content

Listening on Streams

{% for room in rooms %} {{ include('fragments/_room_list_item.html.twig', {room: room}) }} {% endfor %}

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

Doctrine Integration • Symfony UX Turbo makes it easy to publish changes from Doctrine entities. • Maker bundle supports generating the necessary files (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 • first-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);