... JavaScript functionality to HTML elements - even if that HTML is loaded via AJAX. In this course, we'll talk about Turbo: a JavaScript library that instantly makes your site feel like an SPA. How? By turning every link and ...

... different pieces. And when you clicked a link inside a frame, the navigation stayed inside that frame. It was like having separate web pages that you cobbled together into one. The second part of Turbo is Turbo Frames ...

... Wouldn't it be cool if when we click on a link or even submit a form, instead of that triggering a full page reload, it made an Ajax call... then updated the page with the new HTML? Well, that's exactly what Turbo Drive ...

... 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 rendering while it downloads the file and executes it. But by adding defer, the file ...

Time to move on to part two of Turbo: Turbo frames. This is a brand new feature - it did not exist in the old Turbolinks library. To put it simply, Turbo frames allow you to treat part of your page, well, basically like ...

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

Our data tables-like setup is working. And it's almost awesome. What I don't love 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 ...

... scroll to the bottom, I want to make an AJAX request to show the next nine results, and so on. The result is a "forever scroll". In the first tutorial in this series, we installed a library called Symfony UX Turbo, which ...

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

This is Turbo Drive. And yes, it feels like absolute magic. So let's break down how this works. To start... we never wrote any JavaScript that said: Hey Turbo! Please activate your Drive functionality. So... how would ...

... Today, we're diving headfirst into the finale of the Turbo trilogy: Turbo Streams. Streams allow us to solve problems that we... just don't have a solution for yet. Take, for instance, our homepage: we have this really ...

... thanks to a library called Turbo. Right now, our site, of course, has full page refreshes. Keep an eye on the logo in the address bar. When I click, everything is done with a full page refresh. That's fine. Never mind ...

... make our app feel like a single page application. What I mean is: how we can make our site lightning fast by never having any full page refreshes. That is what Turbo gives us. To be more precise, Turbo is actually three ...

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

On page load, Turbo did notice our new <turbo-frame> element and it did make an Ajax request to fetch the contents. But then, for some reason, it gave us this error. Why? This is a super important detail of Turbo frames ...

... use another library from the same people that made Stimulus called Turbo. Turbo can do a lot of things, but its main job is to eliminate full-page refreshes. Like Stimulus, it's a JavaScript library. And also like Stimulus ...

To get Turbo Drive to work super nicely, we're going to need to hook into a few events, like turbo:before-cache. Before we're done, we'll listen into even more of these to help us properly load JavaScript widgets, add ...

The third and final part of Turbo is Turbo Streams. These are fun! Turbo Streams are a way to return instructions on updating any element on the page. And there are two main use cases. First: you're submitting a form ...

... .. it's interesting and... subtle. Dig a little to find 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 ...

... submit the form and close the modal on success. We're revisiting this example because, by leveraging Turbo frames, I think we can simplify this... like, a lot. And you can probably guess how: we can use a turbo frame to load ...