Improving Your Page Load Speeds on Any Site with Turbolinks

[@NickJanetakis]

Just as a friendly reminder, the time stamps are in the description.

[@jubiee2]

thanks! very clear introduce turbo link to me! thanks again!!

[@alpakat292]

Thanks! Looks very intresting...

[@devtest7659]

im using turbolinks and during page transition or initial load of the page, the broken layout of the css is displayed before it is properly rendered. is there a way to load the css first before displaying the page on the browser so user won't be able to see the broken layout of the page during page transitions/loading?

[@NickJanetakis]

Are you using Turbo or Turbolinks?

[@banest0]

Thanks you for the video! I have a question, though - On RoR app how would you suggest adding page-specific javascript that won't require full reload? For example, if I have one basic js file which is required on each page and lots of different js files on different pages. All those js files would have data-turbolinks-track="reload". It appears to trigger full reload by navigating from page to page, which makes Turbolinks useless at this point.

[@NickJanetakis]

Hi, you might want to look into the new Hotwire Turbo functionality that the Rails team released at hotwire.dev/.

[@banest0]

@@NickJanetakis Oh wow this looks like will require complete overhaul of the app :)

[@Rm-ey8xe]

Thanks for the video sir, just wanna ask how about before form submission? when I tried to navigate a page with a form, the js doesn't seem to work so well but when I reload the page everything is back to normal, sorry if it's not detailed but i am using laravel livewire.

[@NickJanetakis]

To my limited understanding live wire and turbolinks aren't compatible at the moment. That would be a question better asked for Caleb. I remember reading something about those tools not playing nicely with each other. I don't use laravel personally.

[@AirWick219]

I wondered y ppl seems to lean toward not using turbolink but rather just use React?

[@NickJanetakis]

Turbolinks 5 focused mainly on full page transitions of swapping the body. But the next version of Turbolinks will supposedly allow you to have more control over partial changes. Without seeing how it works it's hard to say if it'll be a viable React alternative, but the team who created Turbolinks have built a very nice cross device email client with it, so it might be.

[@AirWick219]

@@NickJanetakis forcing page reload seems pretty heavy vs React where those state can just handle in the client side. But I am guessing thats a design choice. I think it would be cool if you can make a video that talks about HEY stack that DHH posted and why you think those are used.

[@NickJanetakis]

@@AirWick219 It's not that heavy in practice. In the video there's a few examples of sites that use it, you can check those out. I'll make another video on Turbolinks 6 when it ships. Right now all we can go by is the JS code you see in the page source of Hey.