DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Alessandro Rodi
Alessandro Rodi

Posted on

From Turbolinks to Turbo

I was eager to start using Hotwire in a project that I thought was a perfect fit. Here I will show you what I had to do, to migrate from Turbolinks to Turbo, and keep using Webpacker as main assets bundler.

Remove turbolinks. Add turbo.

Turbo is basically the new version of Turbolinks, so we need to remove the old npm package and add the new one:

yarn remove turbolinks
yarn add @hotwired/turbo
Enter fullscreen mode Exit fullscreen mode

This will replace the package with the new one.

Turbo Drive

Turbo Drive is that part of Turbo that replaces the functionalities provided before by Turbolinks.

We need to remove the previous initialization of turbolinks and initialize turbo instead.
In your application.js (or wherever you initialized Turbolinks), replace

require('turbolinks').start();
Enter fullscreen mode Exit fullscreen mode


with

import Turbo from "@hotwired/turbo"
Enter fullscreen mode Exit fullscreen mode

With this, you will already have Turbo up and running.

Replace old Turbolinks code.

The event turbolinks:load is now called turbo:load. Replace them wherever you are using them.

If you were using data-turbolinks attributes, they are now called data-turbo. You can replace them as well.

Basically you can search for turbolinks within your project and replace it with turbo.

That's it

I started writing this post thinking "This is going to take a while. Such a guide will be useful for sure!". But it ended up being way easier than I thought πŸ˜…
In the next posts, I will show you my experiments with Hotwire and Turbo and show how I refactored the code to use the new framework. As of now, Turbo is up and running! πŸ₯³

Top comments (6)

Collapse
 
honzasterba profile image
Honza Ε tΔ›rba

What about: .turbolinks-progress-bar class?
Rename to .turbo-progress-bar!
What about classic form actions doing render instead of redirect when validation fails?
You need to return status 422 (unprocessable_entity).
What about Devise?
Thats a big one, redirects work but, failed logins should also return 422 response. Maybe some of these will help:
gorails.com/episodes/devise-hotwir...
dev.to/fadrien/rails-devise-and-re...

Collapse
 
archonic profile image
Archonic

It's not quite this simple. Form submissions now go through Turbo and there's a convention change for submitting forms that fail validation.
youtube.com/watch?v=cSEs_Ax5Xdo

Collapse
 
bdavidxyz profile image
David Boureau

What about the "turbolinks" gem in the gemfile ? Should it be also replaced ? Thanks for your insights.

Collapse
 
blackbiron profile image
Arman Adhitama Prawirasasra

remove, not replace

Collapse
 
martingerez profile image
martinGerez

Have you tried Turbo Frames with Github's ViewComponent?

Collapse
 
coorasse profile image
Alessandro Rodi

Yes. We are using it in production already with great results!

πŸ” If you came here from Google, why not take a look at some of our top posts?