In Review.stream.html.twig, we have the ability to publish turbo streams automatically whenever a review is created, updated or removed. That's pretty cool. Unrelated to this, I haven't mentioned it yet, but our site has a review admin area! You can…

It was subtle, but we just saw one important property of Turbo frames. When we submitted this form successfully, it submitted to the edit action inside of ProductAdminController. This code handled the form submit and, because it was successful, it redirected to the public product…

…Stack! We've accomplished a lot during the first 26 days with just three letters of LAST Stack: Asset Mapper, Stimulus, and Turbo. Today we crack the code on the L of LAST Stack: Live components. Live components let us take a Twig component... then…

…those full page refreshes are gone. So Turbo just works. There's no build system to get in the way, and that's beautiful. In practice, this works because a new JavaScript file is being loaded called turbo_controller.js. Filter the network calls to…

…The reviews section is still weird - but that's ok. Scroll up. Yes! Our Turbo Stream updated the area with the real data! That is so cool! Now we need to fix the reviews area... because showing a filled-in form with a disabled button.…

…yes, once again, run: yarn upgrade @hotwired/turbo This time I get beta version 8, which is actually the release I was waiting for. This changes how JavaScript is handled inside frames, which will be important for what we're about to do. But for…

…let's learn how to do this. It's a fascinating example of the power of Turbo events. So here's the plan: at various times while the old page is leaving and the new page is entering, we're going to add some CSS…

Okay, so if we don't want to cheat and use the internal restore action with a Turbo visit, how else can we solve our problem? Well, there's really only one option. Let me reopen my network tools. Right now, when we successfully submit…

Something isn't right. We can click this "edit" link to inline-load the product form into the Turbo Frame. But when we save, something weird happens. Watch the console closely down here. Whoa! It was fast, but it looked the Ajax request failed! And…

…checkout steps — if your app lets humans type things, congrats, you’re in Form Land. And even though front-ends today might be buzzing with Ajax, Turbo, and fancy JavaScript libraries, the core job is still the same old classic: grab some data, check it…

…match a whole new paradigm. It stands for Live Components, AssetMapper, Stimulus, and Turbo. It's a front-end stack that'll let us build a truly rich user interface - like a single-page application, with modals and AJAX everywhere - but entirely with Symfony, Twig...…

…form, the query parameter is in the URL, and it filters the results. Naturally, thanks to Turbo Drive, it all happens via AJAX. For our first trick, watch as we make the search update automatically as we type. So we type and, without hitting enter…

…Vue or some other frontend framework Laziness: loading controllers lazily By the end, you'll be able to build anything on your site with Stimulus. And once you have, you'll be ready to give your app a SPA (single page app) feel with Turbo!

…like the first approach. And by using Stimulus - as well as another tool we'll talk about in a few minutes called Turbo - we can create highly-interactive apps that look and feel as responsive as a single page app. We have an entire tutorial…

…and I think this weirdness is isolated to the popover behavior. Instead, we'll add a way to disable the transitions on a frame. On the homepage, search for turbo-frame. Here it is. Add a new attribute called data-skip-transition: I totally made…

…extra padding with modal:m-0 and modal:p-0: Next, make the edit link target the modal frame. This lives in _row.html.twig. I'll break this onto multiple lines.... then add data-turbo-frame="modal": Moment of truth. Refresh. And... darn it…

…Our goal is simple but bold! I want to be able to trigger a toast notification from any template or from a Turbo Stream. Start by creating a new template partial: _toast.html.twig. I'll paste in a structure that's from Bootstrap's…

…a message key or category. Second, in PHP, publish a message to that topic containing Turbo Stream HTML. And finally, when our JavaScript receives a message, make it pass the Turbo Stream HTML to the stream-processing system. The result? The power to update any…

…then scroll back up to the top of the requests. Cool. Turbo - which doesn't know or care that we're doing this prefetch stuff - made its Ajax call like normal. But when it did, our browser was smart enough to instantly pull that from…

…And when we click it... beautiful! It hits the endpoint! Notice that the URL didn't change... that's just because Turbo submitted the form via Ajax... and then our dd() stopped everything. Ok, in a minute, we're going to add another button with…