…of a rich user interface is being able to avoid full page refreshes. That's handled by Turbo: the topic of the next tutorial. Put Stimulus and Turbo together and suddenly you can write clean JavaScript that always works and have a site where every…

…is subtle. When we redirect to the index page, Symfony renders that entire page... even though Turbo will only use the . This means that, right before we render this code, our flash container renders the flash messages... which removes them…

…form. And if you do want to get fancy and submit your login for via Ajax, you can totally do that. In fact, if you use Turbo, that happens automatically. But if you wanted to write some custom JavaScript, it's still no problem. Just…

…feature. This can also be done for third-party packages. If you look in assets/controllers.json... Turbo isn't a very good example of this, but if we said "fetch": "lazy" on any of these, they would have the same behavior that we just…

… That's... ya know... not what we want. But I can already see the problem: in the turbo stream, we're sending the entire _reviews.html.twig template to all users... which includes the reviews list... but also the flash message and the form. No…

… Well... that's almost disappointingly easy! Remember: we're inside of a turbo-frame... so all we need to do is add a link in the frame that navigates us to the review page... because the review page renders this frame with a fresh form…

…Nothing magic yet. When we refresh, there's our link... a fantastically boring edit link. Thanks to Turbo Drive, clicking it feels pretty good. And with a bit more work, we could add a link back to the public show page. Heck, we could even…

…how about, streamed-item_controller.js. I'll paste in the normal structure, which imports turbo, exports the controller and creates a connect() method. Before we fill this in, go over to _review.html.twig and use this. I'll break this onto multiple lines…

…see that an Ajax call failed! So... we all know that - despite our awesomeness - errors happen. When you work with turbo frames, these errors are harder to see since everything happens in a background Ajax call. To see it, you can go to the network…

…app experience of avoiding full page refreshes. How? With Stimulus's sister technology Turbo, which we'll talk about in the next tutorial. So if you're motivated to build an SPA mainly to avoid full page refreshes, well, that's not actually unique to…

…error. And second, if you're using Turbo, this is needed so that Turbo knows that your form validation failed. You get that for free just by using the new shortcut method. Next, Symfony comes with some nice and optional Docker integration for local development…

…The 422 status code means "unprocessable entity". And it's a pretty standard status code for validation errors. As a bonus, doing this on your forms will play super nicely with Stimulus's sister technology Turbo. Oh, and by the way, in Symfony 5.3…

…any full page refresh. Quick side note about this. Our next tutorial in this series - which will be about Stimulus's sister technology "Turbo" - will show an even easier way to submit any form via Ajax. So definitely check that out. But doing this with…

…application, right? A site where there are zero full page refreshes. But to build one, don't we need to use a JavaScript framework like React? No! We're going to transform our app into a single page application in... about 3 minutes with Turbo.

…also happens via Turbo, and form errors still work perfectly. On the parts list, if you go to "Create new part" and try to send the empty form... Yep, that's an AJAX request and we still see the expected validation errors. Turbo makes our…

…It's happy! In the main tab, run: git status Alongside the usual suspects, there's a new controller in controllers.json... which came from an update to ux-turbo. We won't use it, but it's fine there. In package.json, it added…

…for example in _flashes.html.twig, is to add a data-turbo-temporary attribute: That tells Turbo to remove this element before it takes the snapshot. Let's try adding this to our dialog so it's not in the snapshot. To see what happens…