A Look at Rails Hotwire: Turbo Drive

When the Turbolinks technology first came out in Rails 4, some people did not understand what it was really about. I happened to get it right away only because I personally implemented my own version of Turbo Drive for one of my client projects before Turbolinks was released (around 2011), so I really appreciated Turbolinks when it was released. With the latest updates in Rails 7, the Turbolinks technology has been renamed to Turbo Drive (now part of Hotwire) since it not only accelerates hyperlinks, but also form submissions too.

Basically, a very common pattern in jQuery frontend code in web applications is to execute an Ajax call to submit a form or request updated data and then only update parts of the web page that changed. 

The most manual way of implementing that is by providing a server-side JSON API resource that returns JSON data and then having the jQuery code receive that data after making an Ajax call and build DOM elements to update parts of the web page manually.

A more streamlined version would be to implement a server-side HTML resource that returns an already rendered HTML partial snippet to use in the jQuery Ajax call to update the part of the web page that changed directly without having to do any DOM building work in JavaScript.

The most streamlined version I personally came up with around 2011 is to simply reuse the same exact server-side HTML resource that rendered the current web page to begin with after making an Ajax call, and then only slice out the HTML elements that changed from the returned full-page HTML and use those elements to update the parts of the web page that changed.

Now, that is almost exactly what Turbo Drive does today so that you do not even have to write jQuery Ajax code or any JavaScript code to begin with. It all happens automatically for you! However, Turbo Drive will by default always replace the entire page's body instead of slicing the parts that changed only. It would have been nice if Turbo Drive automatically performed diffing on pages, but until then, you can use Turbo Frames to solve that problem semi-manually (Turbo Frames are outside the scope of this blog post).

Let's take a look at Turbo Drive in Rails 7:

1. Install Rails 7:

gem install rails -v7.0.2.3

Output:

Fetching tzinfo-2.0.4.gem

Fetching i18n-1.10.0.gem

Fetching thor-1.2.1.gem

Fetching zeitwerk-2.5.4.gem

Fetching method_source-1.0.0.gem

Fetching concurrent-ruby-1.1.10.gem

Fetching nokogiri-1.13.4-x86_64-darwin.gem

Fetching activesupport-7.0.2.3.gem

Fetching crass-1.0.6.gem

Fetching loofah-2.16.0.gem

Fetching rails-html-sanitizer-1.4.2.gem

Fetching rails-dom-testing-2.0.3.gem

Fetching rack-2.2.3.gem

Fetching rack-test-1.1.0.gem

Fetching erubi-1.10.0.gem

Fetching builder-3.2.4.gem

Fetching actionview-7.0.2.3.gem

Fetching actionpack-7.0.2.3.gem

Fetching railties-7.0.2.3.gem

Fetching mini_mime-1.1.2.gem

Fetching marcel-1.0.2.gem

Fetching activemodel-7.0.2.3.gem

Fetching activerecord-7.0.2.3.gem

Fetching globalid-1.0.0.gem

Fetching activejob-7.0.2.3.gem

Fetching activestorage-7.0.2.3.gem

Fetching actiontext-7.0.2.3.gem

Fetching mail-2.7.1.gem

Fetching actionmailer-7.0.2.3.gem

Fetching actionmailbox-7.0.2.3.gem

Fetching websocket-extensions-0.1.5.gem

Fetching websocket-driver-0.7.5.gem

Fetching nio4r-2.5.8.gem

Fetching actioncable-7.0.2.3.gem

Fetching rails-7.0.2.3.gem

Successfully installed zeitwerk-2.5.4

Successfully installed thor-1.2.1

Successfully installed method_source-1.0.0

Successfully installed concurrent-ruby-1.1.10

Successfully installed tzinfo-2.0.4

Successfully installed i18n-1.10.0

Successfully installed activesupport-7.0.2.3

Successfully installed nokogiri-1.13.4-x86_64-darwin

Successfully installed crass-1.0.6

Successfully installed loofah-2.16.0

Successfully installed rails-html-sanitizer-1.4.2

Successfully installed rails-dom-testing-2.0.3

Successfully installed rack-2.2.3

Successfully installed rack-test-1.1.0

Successfully installed erubi-1.10.0

Successfully installed builder-3.2.4

Successfully installed actionview-7.0.2.3

Successfully installed actionpack-7.0.2.3

Successfully installed railties-7.0.2.3

Successfully installed mini_mime-1.1.2

Successfully installed marcel-1.0.2

Successfully installed activemodel-7.0.2.3

Successfully installed activerecord-7.0.2.3

Successfully installed globalid-1.0.0

Successfully installed activejob-7.0.2.3

Successfully installed activestorage-7.0.2.3

Successfully installed actiontext-7.0.2.3

Successfully installed mail-2.7.1

Successfully installed actionmailer-7.0.2.3

Successfully installed actionmailbox-7.0.2.3

Successfully installed websocket-extensions-0.1.5

Building native extensions. This could take a while...

Successfully installed websocket-driver-0.7.5

Building native extensions. This could take a while...

Successfully installed nio4r-2.5.8

Successfully installed actioncable-7.0.2.3

Successfully installed rails-7.0.2.3

35 gems installed

2. Create a new rails blog app:

rails new blog_app

Output:

      create  

      create  README.md

      create  Rakefile

      create  .ruby-version

      create  config.ru

      create  .gitignore

      create  .gitattributes

      create  Gemfile

         run  git init from "."

Initialized empty Git repository in /Users/andymaleh/code/rails7/blog_app/.git/

      create  app

      create  app/assets/config/manifest.js

      create  app/assets/stylesheets/application.css

      create  app/channels/application_cable/channel.rb

      create  app/channels/application_cable/connection.rb

      create  app/controllers/application_controller.rb

      create  app/helpers/application_helper.rb

      create  app/jobs/application_job.rb

      create  app/mailers/application_mailer.rb

      create  app/models/application_record.rb

      create  app/views/layouts/application.html.erb

      create  app/views/layouts/mailer.html.erb

      create  app/views/layouts/mailer.text.erb

      create  app/assets/images

      create  app/assets/images/.keep

      create  app/controllers/concerns/.keep

      create  app/models/concerns/.keep

      create  bin

      create  bin/rails

      create  bin/rake

      create  bin/setup

      create  config

      create  config/routes.rb

      create  config/application.rb

      create  config/environment.rb

      create  config/cable.yml

      create  config/puma.rb

      create  config/storage.yml

      create  config/environments

      create  config/environments/development.rb

      create  config/environments/production.rb

      create  config/environments/test.rb

      create  config/initializers

      create  config/initializers/assets.rb

      create  config/initializers/content_security_policy.rb

      create  config/initializers/cors.rb

      create  config/initializers/filter_parameter_logging.rb

      create  config/initializers/inflections.rb

      create  config/initializers/new_framework_defaults_7_0.rb

      create  config/initializers/permissions_policy.rb

      create  config/locales

      create  config/locales/en.yml

      create  config/master.key

      append  .gitignore

      create  config/boot.rb

      create  config/database.yml

      create  db

      create  db/seeds.rb

      create  lib

      create  lib/tasks

      create  lib/tasks/.keep

      create  lib/assets

      create  lib/assets/.keep

      create  log

      create  log/.keep

      create  public

      create  public/404.html

      create  public/422.html

      create  public/500.html

      create  public/apple-touch-icon-precomposed.png

      create  public/apple-touch-icon.png

      create  public/favicon.ico

      create  public/robots.txt

      create  tmp

      create  tmp/.keep

      create  tmp/pids

      create  tmp/pids/.keep

      create  tmp/cache

      create  tmp/cache/assets

      create  vendor

      create  vendor/.keep

      create  test/fixtures/files

      create  test/fixtures/files/.keep

      create  test/controllers

      create  test/controllers/.keep

      create  test/mailers

      create  test/mailers/.keep

      create  test/models

      create  test/models/.keep

      create  test/helpers

      create  test/helpers/.keep

      create  test/integration

      create  test/integration/.keep

      create  test/channels/application_cable/connection_test.rb

      create  test/test_helper.rb

      create  test/system

      create  test/system/.keep

      create  test/application_system_test_case.rb

      create  storage

      create  storage/.keep

      create  tmp/storage

      create  tmp/storage/.keep

      remove  config/initializers/cors.rb

      remove  config/initializers/new_framework_defaults_7_0.rb

         run  bundle install

Fetching gem metadata from https://rubygems.org/...........

Resolving dependencies.......

Fetching rake 13.0.6

Installing rake 13.0.6

Using concurrent-ruby 1.1.10

Using builder 3.2.4

Fetching racc 1.6.0

Fetching minitest 5.15.0

Using erubi 1.10.0

Using crass 1.0.6

Using rack 2.2.3

Using nio4r 2.5.8

Using websocket-extensions 0.1.5

Using marcel 1.0.2

Using mini_mime 1.1.2

Fetching digest 3.1.0

Fetching timeout 0.2.0

Installing racc 1.6.0 with native extensions

Installing digest 3.1.0 with native extensions

Installing timeout 0.2.0

Installing minitest 5.15.0

Fetching strscan 3.0.1

Fetching public_suffix 4.0.7

Installing strscan 3.0.1 with native extensions

Installing public_suffix 4.0.7

Fetching bindex 0.8.1

Installing bindex 0.8.1 with native extensions

Fetching msgpack 1.5.1

Using bundler 2.3.1

Fetching matrix 0.4.2

Installing msgpack 1.5.1 with native extensions

Installing matrix 0.4.2

Fetching regexp_parser 2.3.0

Installing regexp_parser 2.3.0

Fetching childprocess 4.1.0

Installing childprocess 4.1.0

Fetching io-console 0.5.11

Installing io-console 0.5.11 with native extensions

Using method_source 1.0.0

Using thor 1.2.1

Using zeitwerk 2.5.4

Using rexml 3.2.5

Fetching rubyzip 2.3.2

Installing rubyzip 2.3.2

Fetching sqlite3 1.4.2

Installing sqlite3 1.4.2 with native extensions

Using i18n 1.10.0

Using tzinfo 2.0.4

Using rack-test 1.1.0

Fetching sprockets 4.0.3

Installing sprockets 4.0.3

Fetching puma 5.6.4

Installing puma 5.6.4 with native extensions

Using websocket-driver 0.7.5

Using mail 2.7.1

Fetching net-protocol 0.1.3

Installing net-protocol 0.1.3

Fetching addressable 2.8.0

Installing addressable 2.8.0

Using nokogiri 1.13.4 (x86_64-darwin)

Fetching selenium-webdriver 4.1.0

Installing selenium-webdriver 4.1.0

Fetching reline 0.3.1

Installing reline 0.3.1

Using activesupport 7.0.2.3

Fetching net-imap 0.2.3

Installing net-imap 0.2.3

Using net-pop 0.1.1

Fetching net-smtp 0.3.1

Installing net-smtp 0.3.1

Using loofah 2.16.0

Fetching xpath 3.2.0

Installing xpath 3.2.0

Fetching webdrivers 5.0.0

Using rails-dom-testing 2.0.3

Using globalid 1.0.0

Using activemodel 7.0.2.3

Fetching bootsnap 1.11.1

Installing webdrivers 5.0.0

Installing bootsnap 1.11.1 with native extensions

Fetching irb 1.4.1

Installing irb 1.4.1

Using rails-html-sanitizer 1.4.2

Fetching capybara 3.36.0

Installing capybara 3.36.0

Using activejob 7.0.2.3

Using activerecord 7.0.2.3

Fetching debug 1.5.0

Installing debug 1.5.0 with native extensions

Using actionview 7.0.2.3

Using actionpack 7.0.2.3

Fetching jbuilder 2.11.5

Installing jbuilder 2.11.5

Using actioncable 7.0.2.3

Using activestorage 7.0.2.3

Using actionmailer 7.0.2.3

Using railties 7.0.2.3

Fetching sprockets-rails 3.4.2

Installing sprockets-rails 3.4.2

Using actionmailbox 7.0.2.3

Using actiontext 7.0.2.3

Fetching importmap-rails 1.0.3

Installing importmap-rails 1.0.3

Fetching stimulus-rails 1.0.4

Fetching turbo-rails 1.0.1

Installing stimulus-rails 1.0.4

Installing turbo-rails 1.0.1

Fetching web-console 4.2.0

Installing web-console 4.2.0

Using rails 7.0.2.3

Bundle complete! 15 Gemfile dependencies, 73 gems now installed.

Use `bundle info [gemname]` to see where a bundled gem is installed.

         run  bundle binstubs bundler

       rails  importmap:install

Add Importmap include tags in application layout

      insert  app/views/layouts/application.html.erb

Create application.js module as entrypoint

      create  app/javascript/application.js

Use vendor/javascript for downloaded pins

      create  vendor/javascript

      create  vendor/javascript/.keep

Ensure JavaScript files are in the Sprocket manifest

      append  app/assets/config/manifest.js

Configure importmap paths in config/importmap.rb

      create  config/importmap.rb

Copying binstub

      create  bin/importmap

       rails  turbo:install stimulus:install

Import Turbo

      append  app/javascript/application.js

Pin Turbo

      append  config/importmap.rb

Run turbo:install:redis to switch on Redis and use it in development for turbo streams

Create controllers directory

      create  app/javascript/controllers

      create  app/javascript/controllers/index.js

      create  app/javascript/controllers/application.js

      create  app/javascript/controllers/hello_controller.js

Import Stimulus controllers

      append  app/javascript/application.js

Pin Stimulus

Appending: pin "@hotwired/stimulus", to: "stimulus.min.js", preload: true"

      append  config/importmap.rb

Appending: pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true

      append  config/importmap.rb

Pin all controllers

Appending: pin_all_from "app/javascript/controllers", under: "controllers"

      append  config/importmap.rb

3. Generate blog post scaffolding:

cd blog_app

rails g scaffold blog_post title:string body:text

Output:

      invoke  active_record

      create    db/migrate/20220418153744_create_blog_posts.rb

      create    app/models/blog_post.rb

      invoke    test_unit

      create      test/models/blog_post_test.rb

      create      test/fixtures/blog_posts.yml

      invoke  resource_route

       route    resources :blog_posts

      invoke  scaffold_controller

      create    app/controllers/blog_posts_controller.rb

      invoke    erb

      create      app/views/blog_posts

      create      app/views/blog_posts/index.html.erb

      create      app/views/blog_posts/edit.html.erb

      create      app/views/blog_posts/show.html.erb

      create      app/views/blog_posts/new.html.erb

      create      app/views/blog_posts/_form.html.erb

      create      app/views/blog_posts/_blog_post.html.erb

      invoke    resource_route

      invoke    test_unit

      create      test/controllers/blog_posts_controller_test.rb

      create      test/system/blog_posts_test.rb

      invoke    helper

      create      app/helpers/blog_posts_helper.rb

      invoke      test_unit

      invoke    jbuilder

      create      app/views/blog_posts/index.json.jbuilder

      create      app/views/blog_posts/show.json.jbuilder

      create      app/views/blog_posts/_blog_post.json.jbuilder

4. Migrate database:

rails db:migrate

Output:

== 20220418153744 CreateBlogPosts: migrating ==================================

-- create_table(:blog_posts)

   -> 0.0039s

== 20220418153744 CreateBlogPosts: migrated (0.0041s) =========================

5. Start Rails server:

rails s

Output:

=> Booting Puma

=> Rails 7.0.2.3 application starting in development 

=> Run `bin/rails server --help` for more startup options

Puma starting in single mode...

* Puma version: 5.6.4 (ruby 3.0.2-p107) ("Birdie's Version")

*  Min threads: 5

*  Max threads: 5

*  Environment: development

*          PID: 26666

* Listening on http://127.0.0.1:3000

* Listening on http://[::1]:3000

Use Ctrl-C to stop

6. Visit home page at http://localhost:3000

7. Visit blog posts index at http://localhost:3000/blog_posts

8. Create 3 blog posts:

9. Open the web browser developer tools and go to the Network tab:

10. Show a blog post and notice how only a few network calls were made because of Turbo Drive without refreshing all the page resources:

11. Refresh the page in the web browser and notice how all resources got loaded in the Network tab:

12. Edit the blog post and clear the Network tab (click on the second button in the second row at the top of the developer tools to do so):

13. Update the blog post by submitting the form and notice how only a few network calls have been made because of Turbo Drive without refreshing all the page resources:

And, that's all folks!

Learn more about Rails 7 Hotwire Turbo Drive in the Turbo Handbook.