تماشای این درس نیاز به اشتراک حرفه‌ای دارد.

Introducing Turbolinks Speedups0:38

little bit different. For one, it feels really really snappy. If you look at the little loading indicator in the tab, there's no loading indicator. And let's check out what's happening under the hood. If we open up the network tab in DevTools and look at the AJAX requests, everything we do is a server fetched partial. But it's not quite just a partial, it's making an AJAX request to this podcast endpoint, but it's fetching the entirety of the page. And then presumably there's some sort of JavaScript on the page that only swaps out, let's say, the body and keeps everything else. So there's a tool that makes this crazy easy. It's called TurboLynx. It's out of the Rails community and TurboLynx makes navigating your web application faster. It's exactly what it

Installing Turbolinks Script2:50

work that the browser does to fetch assets every time you load a page, to render things on the page, all this extra painting, all this thing that doesn't happen if you're just sending an AJAX request. So if we swap Turbolinks into this page, we should be able to massively cut down on the amount of time it takes to switch between pages. So let's try it. Let's include Turbolinks in this little app. So Turbolinks is just a script tag. We can just include it with a script tag. You can npm install it if you want. But for us, we're going to keep with our little unpackage thing that we've been doing in these episodes. So unpkg.com/Turbolinks. Okay, and now this is it. I'm going to do a refresh. Now check this out. I'm going to go to the profile page, but pay attention to the loading

Disabling Turbolinks Per Link8:08

it to be a Turbolinks-y experience. This one we want to load as a standard rendered page load. In those cases, let's go over to navigation and find that link. So let's say we're going to make account behave normally. So here's our account tag. It's an a tag. We can add this little attribute. data-turbolinks equals false. Okay, and now we click on profile. It's Turbolinks, but we click on account, and it's a full page load. I don't know if you saw that. You can look at this loading indicator to demo. Go to profile, no loading indicator. Go to account, and there is a loading indicator. So that's another little helpful tool to know about. Okay, and the last gotcha that you should be aware of in a Laravel context is if

Redirect Gotcha in Laravel8:45

is a loading indicator. So that's another little helpful tool to know about. Okay, and the last gotcha that you should be aware of in a Laravel context is if you're doing a redirects. So let's say we add a redirect. We'll say route, redirect, and we want to redirect. Let's say we'll redirect the profile route to, I don't know, account. Okay, so in the browser, I'm going between these pages invoices and account, and everything's fine. Now without Turbolinks, let's disable Turbolinks to see what this behavior would look like. So we're going to comment out Turbolinks, refresh our page. I'm going to go to profile. Now remember we added the redirect, so it's going to redirect back to account. So right now the URL says account. Now I go to profile, and it redirects to account and shows

the request, and it followed the redirect. But because Ajax requests follow redirects transparently, Turbolinks has no way of knowing where it ended up. So for these cases, you can add a little middleware inside Laravel that basically just takes care of this for you. If we go to the Turbolinks website, we scroll down to following redirects. There's a whole section in here about what to do. It explains the problem like I just showed you, and then it explains the solution. To work around this problem, send the Turbolinks location header in the final response to a visit that was redirected. Okay, so basically if you use Rails, this is just done for you, but we're using Laravel. So we're going to create a middleware that adds this location header to every

Adding Turbolinks Location Middleware10:33

basically if you use Rails, this is just done for you, but we're using Laravel. So we're going to create a middleware that adds this location header to every response so that Turbolinks automatically adapts. So let's do that. We'll say php artisan make:middleware, and we'll call this SetTurbolinksHeader. Okay, now we'll navigate to it, and now instead of just returning the response, we're going to store the response. And now we'll say response header. This is going to attach a header, and the header is called Turbolinks-Location, and the value is going to be request()->url(). And now we can return that response. Now that header is going to be attached to every single response that this application makes. Now the last step is to basically tell Laravel to use this middleware. So

Registering Middleware and Testing11:17

header is going to be attached to every single response that this application makes. Now the last step is to basically tell Laravel to use this middleware. So inside of kernel.php, that's inside of app/Http/Kernel.php, we can go to the web middleware section, and we'll add it right here. So set Turbolinks header. Okay, and now if we refresh the page, we're going to go to profile, and remember it's going to redirect us back, so we shouldn't really notice anything. But if we're lucky, the URL is going to show account instead of profile. Okay, so we saw it flashed a profile for a second, then it showed account. And if we take a look at the network request, we went to profile. Now let's take a look at that. It reaches out to profile, but then it comes back with a response header called

دوست دارید گاهی خبرهای Laracasts را ایمیل کنیم؟