…is how it jumps around. Every time we click a link, it jumps back to the top of the page. Boo. That's because Turbo is reloading the full page. And when it does that, it scrolls to the top... because that's usually what…

…It made an AJAX request for Page 2, our app returned that full HTML page - including the header, footer and all - but then Turbo Frame found the matching mix-browse-list inside of that, grabbed its contents, and put it here. And though…

…well, we learned why in the last chapter! By adding them here, they won't be re-executed on every Turbo visit. But normally, adding script tags to the head is bad for performance. When your browser sees a script tag, it freezes the page…

…new review" form submits, we want the page to not navigate away: we want everything to happen in this reviews area. Isn't that... exactly what Turbo Frames are for? If we wrapped this entire template in a ... wouldn't that do it…

Turbo streams would be much more interesting if we could subscribe to something that could send us stream updates in real time. Like, imagine we're viewing a page... and generally minding our own business. At the same moment, someone else - on the other side…

Our Turbo-frame-powered modal is now almost perfect. When we submit successfully, it closes the modal. But... dang! That's all it did. The product list did not update... so it's not super obvious that this worked! Look at the console log of…

With Turbo Drive, when we click a link or submit a form, and that takes longer than 500 milliseconds to load, we get a loading animation on the top of the page... which we don't see here because this is all loading fast, but…

…console. Ooh. Form responses must redirect to another location. Okay. Part of what makes Turbo so cool is that you get the single page app experience without making any changes to your server code. But the one big exception to that rule is forms. Don…

How does Turbo handle when a JavaScript or CSS file that's downloaded onto our page changes? When we navigate, it's smart enough to merge any new CSS or JS into our head element without duplicating anything that's already there. But what about…

Thanks to the turbo-frame system, we're now lazily-loading just part of the weather page down in the footer. And... notice that this is working... which actually proves something: script tags inside frames are executed. Let me find that frame... here it is…

…if you need to load an external widget - like our weather widget - but that widget might be loaded onto the page at any time, even via a custom, non-Turbo Drive Ajax call. This solution basically involves running the same code that we have here…

Our modal is now powered by a turbo-frame: the form was Ajax loaded by the frame system. But when we submit, wah, wah. It submits to the whole page. Let's see what's going on. Reopen the modal and inspect it. Hmm. Ah…

One of the cooler features of Turbo Drive is its snapshot feature, which we know about already. When we visit a page that we've already been to, like Office Supplies or Furniture, it instantly shows the snapshot while it waits for the new Ajax…

Where else could we use our new turbo frame redirect system? Go to the cart. On the featured product sidebar, we could leverage a frame around the cart controls. Right now, this form submits to the whole page. And so, on success, the entire page…

There's one super cool feature of the Turbo Mercure UX package that we installed earlier that we have not talked about. And it's this: the ability to publish a Mercure update automatically whenever an entity is created, updated or removed. It's a…

…new number. In addition to doing this, I want to invent a Turbo Stream that adds a flash message to the top of the page. First, we need to be able to target the flash area so that we can put stuff into it. In…

…form via Ajax and reload the cart area also via Ajax. Once you start using Turbo, you absolutely can still do stuff like this... but you'll find that it's less necessary. In this case, if Turbo were active, after confirming in the modal…

…function onKernelResponse() method with a ResponseEvent $event argument. Cool. So the logic inside of here will be fairly simple: if the request has the Turbo-Frame-Redirect header and the response is a redirect, then we're going to change the response to something else.…

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…

…Stimulus & Turbo - puts the joy, productivity & simplicity back into creating rich, frontend experiences. And in 30 days, I'll prove it: AssetMapper fundamentals JavaScript Modules? ESM? 3rd party packages with importmap:require CSS Tailwind CSS! Stimulus UXs Package Turbo Drive Turbo Frames Popover & Stimulus Components…