…you can see it down here in the network tools. It then looked for a cart-sidebar turbo frame on that page because it wants to find which part of this page it should render inside of the cart-sidebar frame. But... in this case…

…asynchronous: Bootstrap waits for the transition to finish before finally removing all of the elements, like its backdrop. But the snapshot does not wait: Turbo takes the snapshot immediately, which is when the modal has only started to be removed and its backdrop is still…

…then hit this button again. There is the backdrop. Why was it missing the first time? It's actually a bug in Bootstrap 5.0.1 when using Turbo. But don't worry, it's already fixed and will be available in 5.0.2…

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

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

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

…dinner, watch Mystery Science Theater 3000 and come back to my computer tomorrow. During that time, my session has timed out. What would happen if I tried to submit this form - which submits into a turbo-frame - without refreshing first? Well... let's try it…

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

…prefetch that page via Ajax and saved it to the snapshot cache? Then, assuming the user does click that link, Turbo would show the page instantly via its preview system. Is that possible? Well, not officially. But thanks to some clever people on the Internet…

…with AssetMapper! Install & Running Tailwind CSS Intro into Stimulus & Turbo for JavaScript & an SPA (single page app) feel Create a JSON API endpoint All-important "service objects": a quick tour of using them and creating your own Say hello to MakerBundle Let's boldly go!…

…for us: the MakerBundle! Run: symfony console make:entity For the name, use Starship. We're not using Symfony UX Turbo, so answer no to that question. This already created a Starship class in the Entity/ directory and a StarshipRepository class. We'll talk about…

…but not then redirected back to /login... The problem here is Turbo. It's capturing the form submission, and sees the redirect is an error, so it just stays on the current page. Not the greatest experience... While Turbo works well with normal Symfony forms…

…form_end(form) }} below it, and put a special {{ form_widget(form) }} between them to render all the form fields. Move our submit button just before form_end(): Because when Turbo is enabled, page navigation happens via AJAX requests, and, I know that sounds crazy…

…bundle and symfony/ux-turbo can all be upgraded to the next major version. Let's go ahead and do that in our composer.json file. Find phpdocumentor/reflection-docblock and change to ^6.0. Next, stimulus-bundle, change to ^3.0. Finally, ux-turbo…

…browser's network tab or in the web debug toolbar (WDT). This behavior ensures compatibility with tools that rely on the HTTP specification, like Symfony UX Turbo. This works because, in our controller, we're passing the $form object to the Twig template. If we…

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

…importmap.php file. This is, effectively, the new package.json: the home for 3rd party packages. And hey! It already added Stimulus and Turbo! Those are two of the packages from package.json that we do need. Will this work? Refresh and... kinda? We don…

…our browser does start downloading the files slightly earlier. And this plays nicer with Turbo - the topic of our next tutorial. If you want to learn more about this change, check out a blog post I wrote on Symfony.com. Next: let's use Encore…

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

…mixes in our system. So let's create a new class called VinylMix. Then answer no for broadcasting entity updates: that's an extra feature related to Symfony Turbo. Ok, here's the important part: it asks which properties we want. We're going to…