…directly - we're not going to attach it to an element. But the fact that it's being loaded & registered with Stimulus is enough to activate Turbo on our site. What the heck does that mean? It's like magic: give the page a refresh…

For day 24, strap in for a quick adventure. We've learned that Turbo Streams are custom HTML elements that you can throw onto the page anywhere... and they execute! But there's another way to use Streams that's actually more commonly-documented, even…

…is just an HTML element like a div, and so it renders normally. Though, for styling purpose, turbo-frame is an inline element by default. However, when we click a link... it's busted! It says "Content missing". And in the console: The response did…

…shine. All the fundamentals are in place - AssetMapper, Tailwind & Stimulus - so today is... almost a victory lap. We're about to get a huge bang for our buck thanks to a library called Turbo. Right now, our site, of course, has full page refreshes. Keep…

…commit everything first... in case the new package installs an interesting recipe: Ok, let's install the new package: composer require symfony/ux-turbo See that "ux" in the package name? Symfony UX is a set of libraries that add JavaScript functionality to your app.…

…is a big difference compared to a traditional web app. But, it's also what makes Turbo so fast: re-parsing all that JavaScript over and over again on each page load takes time! However, if you put JavaScript into the body of your page…

…Temporarily, give this an id called company_name so we can target it. Now, anywhere else on the page - so how about down here in the footer - edit as HTML and paste that Turbo Stream. In this case, we want the target to be company…

…same project as the first tutorial, though I did make some changes, like adding a review system below each product... and upgrading some libraries. Now that we have this running, let's install Turbo and activate Turbo Drive to instantly eliminate full page refreshes. Woh.

…redirect, the frame system followed that redirect, found the frame on the next page, and updated this area. The normal Turbo Frames behavior. Then our stream caused the quick stats area to update... and it also re-updated the reviews area... because, right now, our…

…a chat app where you want a new message to render as soon as the other person sends it, Turbo Streams can help. Streams are another way to enhance your page. So they're an extra feature - like frames - that you can choose to add…

…unaffected. Frames are super cool, but I do want us to keep something in mind: they're an "extra" feature. Turbo Drive gives us the single page app experience. Frames give us the ability to make the user experience even better. But using frames does…

…looked in the response for the with the id, found it and used its HTML. If you inspect element and find the turbo-frame, you can see the src="" attribute is still there, but now it's filled with content. At this point…

…submitForm()... yea, we're not going to need this at all. The turbo frame will handle the form submit all on its own. And thanks to these changes, one of the targets up on top - modalBody - is no longer used. So we can remove that…

…it does modify the URL, which gives us normal browser behavior, like clicking back and forward. Speaking of back and forward, Turbo Drive has a feature called "snapshots". Let me refresh the page real quick. As you navigate to a new page, it stores a …

…then updated the page with the new HTML? Well, that's exactly what Turbo Drive does. And it's a huge step towards making our app feel like a single page application. Turbo itself is... just a JavaScript library! It has nothing to do with…

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

…the frame. Ok, the src starts set to /admin/product/new, which means that when we open the modal, we see the contents of the turbo-frame from that page. Fill in some data and then submit. Hmm, the src changed to /admin/product/. Well…

Sometimes you need to trigger a Turbo visit programmatically... like after running some custom JavaScript, you want to send the user to another page. Head over to your code and open assets/controllers/counter_controller.js. This very advanced Stimulus controller powers this high-tech…

…talk about Turbo: a JavaScript library that instantly makes your site feel like an SPA. How? By turning every link and form into an AJAX call... without you needing to make any changes to your app (well, almost no changes): Understanding and enabling Turbo Drive…