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

…taken right before the new page is "swapped in". Thanks to our new fade out functionality... it means that snapshots are taken when the page has the turbo-loading class! In other words, snapshots are taken when the page has low opacity! Thanks to this…

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

…Ah, here's the problem. When we submitted the add to cart form into the frame, our controller redirected and the turbo frame followed that redirect. This request is the POST to /cart... and this is the Ajax request for the redirect. That response does…

…let's use this. Remove all of this modal stuff... and then move the event.preventDefault() and Turbo.visit() to the end of the method... because we're going to reverse the if logic to keep things clean. If the fetchResponse did not succeed or…

…disabled form to give us the exact effect we want. Scroll up, log out, then go to the registration form. This form does not live in a Turbo frame. But it still gets the new submit behavior! Yup, with just a few lines of code…

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

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

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

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

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

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

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

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

…any full page refresh. Quick side note about this. Our next tutorial in this series - which will be about Stimulus's sister technology "Turbo" - will show an even easier way to submit any form via Ajax. So definitely check that out. But doing this with…

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

…dropdowns: a little JavaScript so that when we click, this opens and closes. We're not using this at SymfonyCasts... and it doesn't play well with Turbo. At least not out of the box. We prefer to create tiny Stimulus controllers to power things…