But now it works anywhere, so very cool. Let me show you. Let's create a lesson called Turbolinks. And let me grab Laravel 5.3. Now, while that's doing its thing, if we come back, you can see we can install it through NPM by doing npm install Turbolinks. So if we cd in there, I will go ahead and paste that in. And also, in general, we need to install our dependencies. Now, once again, while that's doing its thing, yeah, we can see that we pull it in. So import Turbolinks and then call Turbolinks.start().

So the reason why this is so much faster is because, really, the costly thing for applications is the assets. I always joke about how sometimes people seem, in the PHP world, to be more interested in the performance difference between single versus double quotes than they are on that 300 kilobyte image. So yeah, the assets, the images, the scripts, those are the most costly things in so many situations. So if we can make the scripts and the style sheets a non-issue, think of the performance boost you could get. All right, let's open this up in Sublime.

think of the performance boost you could get. All right, let's open this up in Sublime. Now in Laravel 5.3, there is a resources/app.js file out of the box. It'll give you some boilerplate. In this case, we don't really need it, so I will get rid of that and instead pull in Turbolinks. Let's use the new syntax, in fact. Import Turbolinks from Turbolinks and then start it up. Okay, but next, yeah, we can stick with Webpack in this case. I'm also a really big fan of Rollup.

Okay, but next, yeah, we can stick with Webpack in this case. I'm also a really big fan of Rollup. But, yeah, whatever you want to use. And, of course, you can use Browserify as well. All three are supported. So let's run gulp, and that's going to compile down our Sass as well as Webpack. Great. So now let's go to our main routes file. By default, it loads a welcome page. If we go to that, maybe we can change some things up.

By default, it loads a welcome page. If we go to that, maybe we can change some things up. Let's do this. Let's get rid of the style tag. Get rid of the body. And, in fact, why don't we extract all of that to a layout file? So resources/views/layout.blade.php. And then we will yield our content. Okay, so here we can extend layout. And then for our content section, yeah, this is going to be our welcome page.

Okay, so here we can extend layout. And then for our content section, yeah, this is going to be our welcome page. Welcome. And maybe we'll add an anchor tag that will go to the about page. Go to the about page. All right. So on that note, why don't we go ahead and create resources/views/about? And update this. You know, we're just building a basic skeleton here. And then, finally, in our routes/web.php file, I will duplicate this.

You know, we're just building a basic skeleton here. And then, finally, in our routes/web.php file, I will duplicate this. And when we request about, we'll load the about page. Okay, so if we go to turbolinks.dev, I'm using Laravel Valet. Highly recommend it. We cover it at Laracasts. Give it a shot. Anyways, if I click on the about page, yeah, what I want you to notice is right up here. So we're performing a full postback right now. So if I click on that, you see the little loading bar.

So we're performing a full postback right now. So if I click on that, you see the little loading bar. It's very quick because there's nothing to load. But in real life, yeah, that can sometimes take a second or two seconds. So one more time, notice the loading bar. Yeah. Okay, so take a look at this. Back to our layout file. At the very bottom, I'm going to import our compiled script, js/app.js. Now, don't forget, as part of that file, we have right here started up Turbolinks.

At the very bottom, I'm going to import our compiled script, jsapp.js. Now, don't forget, as part of that file, we have right here started up Turbolinks. So it instantly intercepts any anchor tags. However, it's pretty smart. It knows that if you're going to an external site that, obviously, we're not going to do anything funky. It'll just automatically go to that page. Okay, so we imported a script, and now if I click it, look at the loading icon here. Click it. You didn't see anything because we didn't perform a full postback. So instead, let's go back, open up Chrome DevTools, go to my network tab.

So instead, it just detects if there are any differences, and it merges them in. So as an example, let's see. Let's go to layout. And why don't we yield a head section? And then our about page can reference that. So we'll say in the head section, I want to pull in some style sheets. So maybe CSS, about.css. We'll create that really quick. Just as a proof of concept. Background is red.

It makes an AJAX request. If I now hit back, it doesn't make another AJAX request. It instead pulls from the cache. Anyways, though, let me give this a refresh. If I click on the version without TurboLynx, yeah, you can see, once again, it's going to do a typical full post back, which is a lot slower, versus the TurboLynx optimized version. Now, we can even do things where we redirect dynamically or with JavaScript. So we have access to this TurboLynx object, right? So we could say TurboLynx.visitAbout, and this is going to do the exact same thing as if we clicked on this page. So if I run it, yeah, we perform the AJAX request as you would expect. Now, one other thing to keep in mind that I've been noticing is, remember, I'm still learning this myself.

So if I run it, yeah, we perform the AJAX request as you would expect. Now, one other thing to keep in mind that I've been noticing is, remember, I'm still learning this myself. Anyways, imagine that you have some kind of URL, or maybe it's a POST request. We're just going to use this dummy redirect here. And maybe that responds to a form submission, and it's going to return a redirect to another page. So in this case, we're just going to use the example of, if I link to /redirect, it should take me to the About page, right? Well, normally, that's entirely fine. However, once we hijack everything and we're using TurboLynx, it gets a little tricky because TurboLynx is going to detect the endpoint as redirect. And the fact that we perform a different redirect behind the scenes, well, that's sort of implicit or sort of invisible to TurboLynx. So let me show you what I mean by this.

then TurboLynx, the JavaScript library, will pick up on that and update it dynamically for you. But what I was thinking is that maybe this part, determining whether it's the result of a redirect, I'm not sure if we need to do that at all. Maybe we can just set our application up so that it sets this header on every single request. I don't know. Is there any problem with that? It seems like that would make sense to me. So if we wanted to do that, maybe I could do something like this. php artisan make:middleware TurboLynx, or how about setTurboLynxHeader. Okay. setTurboLynxHeader. And if we scroll down, why don't we grab the response?

Okay. Set TurboLynx header. And if we scroll down, why don't we grab the response? Let me give you some more room. And then we will return the response and then set a header with that key. And now the value is going to be equal to any URI that you specify. So, for example, if I just set it to foobar, let me show you how this works. Let's go into app, HTTP, Kernel.php. We're going to add app, HTTP, Middleware, SetTurboLynxHeader. So we go to the about page, and notice it does set it to foobar. So we can see that TurboLynx is reading that header and updating the URI.

okay, we'll determine if this current request is the result of a redirect. And if so, only on that condition should you set the header, right? So I was thinking like, well, can we set the status code, or do I have to do something like, even with a helper function, before you redirect, flash something to the session, like zTurboLynx, and then make that equal to where you're going. And then, yeah, just wrap this all within like a helper function that will do that for you automatically. I was thinking, oh, maybe I have to do that, and then, if I undo all this, and then within the middleware, I would say something like if session zTurboLynx,

I was thinking, oh, maybe I have to do that, and then, if I undo all this, and then within the middleware, I would say something like if session $zTurboLynx, then the previous request resulted in a redirect, in which case I should set the header, right? Or, you know, response header here, and then you return the response. Yeah, I was thinking maybe I needed to do that, and you know what? It might turn out that that's still the proper thing, but at least my current thinking right now is, is there any problem with just setting this header for every single request, and that way I never have to worry about this again.

is there any problem with just setting this header for every single request, and that way I never have to worry about this again. Okay, so what were the reproducible steps? You set up a Laravel app, of course. In your app.js file, you're going to do npm install TurboLynx. You will import that. You will start up TurboLynx that will instantly intercept all anchor tags and perform AJAX requests. Then the server, yeah, all that stuff is going to work automatically. If you remember with PJAX, I had to set up a custom middleware