Building Dynamic Interfaces with Turbo Frames
Turbo Frames enable you to create reactive elements within your Rails application. You can find the first part of this tutorial here.
- Open the
app/views/posts/index.html.erb
file and replace theposts
div with the following code:
<turbo-frame id="posts">
<%= render @posts %>
</turbo-frame>
2. Modify the form in the same file to use a Turbo Frame for updates:
<%= form_with model: Post.new, id: "new_post", data: { turbo_frame: "posts" } do |f| %>
<%= f.text_field :title %>
<%= f.submit "Create Post" %>
<% end %>
3. In the app/views/posts/_post.html.erb
file, wrap the post content with a Turbo Frame:
<turbo-frame id="<%= dom_id(post) %>">
<h3><%= post.title %></h3>
</turbo-frame>
4. Restart the Rails server if it’s not running and refresh the http://localhost:3000/posts
page. Create a new post, and you'll notice that only the relevant frame is updated, resulting in a smoother and more dynamic user experience.
Enhancing User Experience with Turbo Drive:
Turbo Drive optimizes navigation within your Rails application, reducing page reloads and preserving the application state.
- Open the
app/views/layouts/application.html.erb
file and add the following code within the<head>
section:
<%= javascript_include_tag 'application', 'data-turbo-track': 'reload' %>
2. Replace the link_to
tags in the app/views/posts/index.html.erb
file with the following code:
<%= link_to "Home", root_path, data: { turbo_frame: "posts" } %>
<%= link_to "New Post", new_post_path, data: { turbo_frame: "posts" } %>
3. In the app/controllers/posts_controller.rb
file, modify the create
action as follows:
def create
@post = Post.create(post_params)
respond_to do |format|
format.turbo_stream { render turbo_stream: turbo_stream.append("posts", @post) }
format.html { redirect_to posts_path }
end
end
4. Restart the Rails server if needed and navigate through the application. You’ll notice that the content updates happen seamlessly without page reloads.
Unleashing the Power of Stimulus:
Stimulus is a JavaScript framework that enables you to enhance your Rails views with interactive behavior.
- Install Stimulus using Yarn:
yarn add stimulus
2. Create a new directory for Stimulus controllers:
mkdir app/javascript/controllers
3. Create a new file app/javascript/controllers/posts_controller.js
and add the following code:
import { Controller } from "stimulus"
export default class extends Controller {
static targets = ["title"]
connect() {
console.log("Posts Controller connected!")
}
updateTitle() {
this.titleTarget.innerText = "Updated with Stimulus!"
}
}
4. Open the app/views/posts/index.html.erb
file and add the following code to the "Posts" header:
<h1 data-controller="posts" data-action="click->posts#updateTitle" data-target="posts.title">Posts</h1>
5. Start the Rails server and visit http://localhost:3000/posts
. When you click on the "Posts" header, the text should update to "Updated with Stimulus!" without a page refresh.
Congratulations! You’ve successfully explored Rails Hotwire, Turbo Streams, Turbo Frames, Turbo Drive, and Stimulus. These powerful tools will enable you to build highly interactive and performant Rails applications.
Remember, this blog post only scratches the surface of what Rails Hotwire can do. Feel free to dive deeper into the documentation and explore the various features and possibilities it offers. Happy coding!