WEBVTT NOTE Created by CaptionSync from Automatic Sync Technologies www.automaticsync.com 00:00:01.126 --> 00:00:04.566 align:middle When I build a UI, I want it to be beautiful, interactive, and smooth. 00:00:05.156 --> 00:00:09.966 align:middle Personally, I choose not to use front-end frameworks like React or Vue or Next. 00:00:10.216 --> 00:00:11.236 align:middle But you can... 00:00:11.356 --> 00:00:14.506 align:middle and there's nothing wrong with them: those are great tools. 00:00:15.016 --> 00:00:18.016 align:middle Also, building an API in Symfony is awesome! 00:00:18.526 --> 00:00:22.436 align:middle But if you want to build your HTML in Twig - like I love doing - 00:00:22.686 --> 00:00:27.366 align:middle we can absolutely have a super-rich, responsive, interactive user interface! 00:00:27.896 --> 00:00:32.326 align:middle One big piece of a fancy interface is removing full-page reloads. 00:00:32.796 --> 00:00:38.226 align:middle Right now, when I click around, watch: it's fast, but these are full-page reloads. 00:00:38.656 --> 00:00:41.866 align:middle Those don't happen if you use something like React or Vue. 00:00:42.676 --> 00:00:45.616 align:middle To eliminate those, we're going to use another library 00:00:45.616 --> 00:00:48.736 align:middle from the same people that made Stimulus called Turbo. 00:00:49.296 --> 00:00:54.646 align:middle Turbo can do a lot of things, but its main job is to eliminate full-page refreshes. 00:00:55.246 --> 00:00:57.436 align:middle Like Stimulus, it's a JavaScript library. 00:00:57.726 --> 00:01:01.806 align:middle And also like Stimulus, Symfony has a bundle that helps integrate it. 00:01:02.526 --> 00:01:10.256 align:middle Find your terminal and run: composer require symfony/ux-turbo This time, 00:01:10.256 --> 00:01:12.596 align:middle the recipe made two interesting changes. 00:01:12.806 --> 00:01:13.326 align:middle I'll show you. 00:01:13.756 --> 00:01:19.896 align:middle The first is in importmap.php: it added the @hotwired/turbo JavaScript package. 00:01:20.466 --> 00:01:23.866 align:middle The second change is in assets/controllers.json. 00:01:24.296 --> 00:01:28.466 align:middle We didn't talk about this file before, but it was added by the StimulusBundle recipe: 00:01:28.796 --> 00:01:33.706 align:middle it's a way to activate Stimulus controllers that live inside third-party packages. 00:01:34.316 --> 00:01:39.566 align:middle So the symfony/ux-turbo PHP package we just installed has a JavaScript controller inside 00:01:39.566 --> 00:01:40.996 align:middle called turbo-core. 00:01:41.626 --> 00:01:47.356 align:middle And because we have enabled: true here, it means that controller is now registered and available: 00:01:47.556 --> 00:01:50.696 align:middle it's as if it lived in our assets/controllers/ directory. 00:01:51.346 --> 00:01:54.096 align:middle Now we're not going to use this controller directly - 00:01:54.186 --> 00:01:56.366 align:middle we're not going to attach it to an element. 00:01:56.796 --> 00:01:58.986 align:middle But the fact that it's being loaded & registered 00:01:58.986 --> 00:02:02.306 align:middle with Stimulus is enough to activate Turbo on our site. 00:02:02.986 --> 00:02:04.396 align:middle What the heck does that mean? 00:02:04.786 --> 00:02:08.526 align:middle It's like magic: give the page a refresh, and bam! 00:02:08.796 --> 00:02:10.816 align:middle Full-page reloads vanish! 00:02:11.356 --> 00:02:15.366 align:middle Watch up here: when I click back, you won't see it reload. 00:02:16.016 --> 00:02:19.906 align:middle Boom! It's super fast and all happening via Ajax. 00:02:20.866 --> 00:02:22.166 align:middle Here's how it works. 00:02:22.586 --> 00:02:27.866 align:middle When we click this link, Turbo intercepts the click and, instead of a full page reload, 00:02:28.036 --> 00:02:30.196 align:middle it makes an Ajax call to that page. 00:02:30.686 --> 00:02:36.326 align:middle That Ajax call returns the full HTML for that page and then Turbo puts that onto this page. 00:02:36.916 --> 00:02:41.156 align:middle That small thing transforms our project into a single page application 00:02:41.386 --> 00:02:44.846 align:middle and makes a big difference with how fast our site feels. 00:02:45.526 --> 00:02:46.626 align:middle But there's one more thing. 00:02:47.086 --> 00:02:48.276 align:middle I'll refresh so we can see it. 00:02:49.026 --> 00:02:53.976 align:middle Whenever you make an Ajax call in a Symfony app - whether it's via Turbo or any other way - 00:02:54.356 --> 00:02:56.666 align:middle the Web Debug Toolbar notices that. 00:02:57.086 --> 00:02:58.796 align:middle Watch right around here when I click. 00:02:59.476 --> 00:03:00.136 align:middle Check that out! 00:03:00.626 --> 00:03:04.776 align:middle We have a running list of all the Ajax calls made on this page. 00:03:05.366 --> 00:03:09.676 align:middle And if we want to see the profiler for any of those Ajax requests, we can click the link. 00:03:10.186 --> 00:03:11.096 align:middle And yeah... 00:03:11.326 --> 00:03:11.786 align:middle there we are. 00:03:12.226 --> 00:03:14.786 align:middle Here's the Ajax request that was made for the homepage. 00:03:15.296 --> 00:03:20.436 align:middle Though with Turbo, you don't even need to rely on this trick because, as we click around, 00:03:20.626 --> 00:03:24.746 align:middle this entire bar is replaced by the new Web Debug Toolbar for the page. 00:03:25.516 --> 00:03:30.566 align:middle Oh, and get this: in Turbo 8, which is out now, your site will feel even faster. 00:03:31.156 --> 00:03:33.746 align:middle That's thanks to a new feature called Instant Click. 00:03:34.156 --> 00:03:36.536 align:middle With this, when you hover over a link, 00:03:36.766 --> 00:03:40.276 align:middle Turbo makes an Ajax call to that page before you click. 00:03:40.786 --> 00:03:43.766 align:middle Then, when you do click, it loads instantly... 00:03:43.996 --> 00:03:45.506 align:middle or at least has a head start. 00:03:46.236 --> 00:03:50.596 align:middle Turbo has a lot of other features, and we use a bunch of them in our LAST Stack Tutorial 00:03:50.716 --> 00:03:54.536 align:middle where we build a frontend with popovers, modals, toast notifications, and more. 00:03:55.206 --> 00:03:56.636 align:middle But one note about Turbo. 00:03:56.996 --> 00:04:00.316 align:middle Because full page reloads are gone, your JavaScript needs 00:04:00.316 --> 00:04:02.496 align:middle to be built in a way to handle that. 00:04:03.016 --> 00:04:05.896 align:middle A lot of JavaScript expects full page reloads... 00:04:06.226 --> 00:04:10.876 align:middle and if HTML is suddenly added to the page without a reload, it breaks. 00:04:11.366 --> 00:04:14.496 align:middle The good news is that if you write your JavaScript in Stimulus, you're good. 00:04:14.966 --> 00:04:17.356 align:middle Watch. No matter how we get to the homepage, 00:04:17.436 --> 00:04:20.996 align:middle our JavaScript to close the sidebar just keeps working. 00:04:21.846 --> 00:04:24.166 align:middle Alright squad, we're on the home stretch! 00:04:24.456 --> 00:04:28.186 align:middle Before we finish, I want to do one last bonus chapter where we play 00:04:28.186 --> 00:04:31.236 align:middle with Symfony's awesome generation tool: MakerBundle.