Hotwire: Turbo-Streaming ViewComponents
This blog post was originally posted at thoughtbot.com/blog. An update was made on 2022-06-07 to add a missing code snippet in the broadcasting messages section.
GitHub built the ViewComponent library to integrate with Ruby on Rails. It exists as a framework for creating reusable, testable, and encapsulated view components. GitHub’s long term goal is to build all their Rails-rendered HTML with ViewComponents.
Rails 7 ships with Hotwire - Turbo included - by default. Turbo Streams make up part of Turbo and deliver page changes as fragments of HTML “over the wire” (e.g. with web sockets). They allow you to bring your application to life and keep users up to date with changes, all achieved without writing any JavaScript whatsoever.
But Turbo Streams lean on Rails partials. ViewComponents are reusable, testable and more performant than partials. How can we integrate them with Turbo Streams so we can use them in place of traditional partials?
Let’s give it a try.
All the source code used to create this post is on GitHub. The rails new
command with the latest version of Rails generated the code in this project.
#Building a message board with ViewComponent
Let’s consider a basic messages page, built using ViewComponent. Each message displays the message body and the created at timestamp in a readable format. There is also a small piece of logic included that highlights the most recent messages in green.
# app/controllers/messages_controller.rb
def index
@messages = Message.all
end
# app/views/messages/index.html.erb
<div>
<h1 class="text-xl font-bold">Messages</h1>
<div class="max-w-2xl">
<%= render MessageComponent.with_collection(@messages) %>
</div>
<div>
Like everything else in Ruby, ViewComponents are objects. That means we can keep our views clean and tidy by moving Ruby code and logic into our component file.
# app/components/message_component.rb
class MessageComponent < ViewComponent::Base
include ActionView::RecordIdentifier
def initialize(message:)
@message = message
end
private
attr_reader :message
delegate :body, :created_at, to: :message, prefix: true
def recent_message?
message_created_at > 1.hour.ago
end
def timestamp
message_created_at.strftime("%Y-%m-%d at %H:%M")
end
end
# app/components/message_component/message_component.html.erb
<%= tag.div(id: dom_id(message), class: "message-component flex flex-wrap justify-between items-center py-3 border-b-2 border-gray-300") do %>
<%= tag.div(
message_body,
class: class_names("mr-10", "text-green-600" => recent_message?, "text-gray-800" => !recent_message?)
) %>
<%= tag.time(timestamp, class: "text-gray-400") %>
<% end %>
#Integrating with Turbo Streams
#Posting messages
A form on the messages page and a create action in the messages controller post new messages. With Turbo Streams we can render new messages in the response without re-rendering the whole page. Turbo tag helpers allow us to replace the form and append the new message to the list of messages.
--- a/app/views/messages/index.html.erb
+++ b/app/views/messages/index.html.erb
<div class="max-w-2xl">
<h1 class="text-xl font-bold my-5">Messages</h1>
<div id="messages" class="mb-5">
<%= render MessageComponent.with_collection(@messages) %>
</div>
+ <%= render "form" %>
</div>
# app/views/messages/_form.html.erb
<div class="my-3">
<%= form_with url: messages_path, id: "new_message_form" do |f| %>
<%= f.label :body, "Message:", class: "mr-2" %>
<%= f.text_field :body, placeholder: "What do you want to say?", class: "my-2 mr-2" %>
<%= f.submit "Post message", class: "p-2 cursor-pointer hover:bg-green-600" %>
<% end %>
</div>
--- a/app/controllers/messages_controller.rb
+++ b/app/controllers/messages_controller.rb
class MessagesController < ApplicationController
def index
@messages = Message.all
end
+
+ def create
+ @message = Message.create(body: params[:body])
+
+ respond_to do |format|
+ format.html { redirect_to messages_path }
+ format.turbo_stream
+ end
+ end
end
# app/views/messages/create.turbo_stream.erb
<%= turbo_stream.replace "new_message_form", partial: "form" %>
<%= turbo_stream.append "messages" do %>
<%= render MessageComponent.new(message: @message) %>
<% end %>
#Broadcasting messages
What about when other users post messages?
The turbo-rails library has excellent integration for broadcasting
ActiveRecord objects with Rails partials. Turbo::StreamsChannel allows HTML to
be broadcast outside a model. We can use ApplicationController.render to
render the ViewComponent as HTML that we can pass to Turbo. Now we have a class
that we can use to broadcast messages from the messages controller.
# app/models/broadcast/message.rb
module Broadcast
class Message
def self.append(message:)
new(message).append
end
def initialize(message)
@message = message
end
def append
Turbo::StreamsChannel.broadcast_append_later_to(
:messages,
target: "messages",
html: rendered_component
)
end
private
attr_reader :message
def rendered_component
ApplicationController.render(
MessageComponent.new(message: message),
layout: false
)
end
end
end
--- a/app/controllers/messages_controller.rb
+++ b/app/controllers/messages_controller.rb
def create
- @message = Message.create(body: params[:body])
+ @message = Message.new(body: params[:body])
+
+ if @message.save
+ Broadcast::Message.append(message: @message)
+ end
respond_to do |format|
format.html { redirect_to messages_path }
format.turbo_stream
end
end
--- a/app/views/messages/index.html.erb
+++ b/app/views/messages/index.html.erb
<div class="max-w-2xl">
<h1 class="text-xl font-bold my-5">Messages</h1>
+ <%= turbo_stream_from :messages %>
<div id="messages" class="mb-5">
<%= render MessageComponent.with_collection(@messages) %>
</div>
<%= render "form" %>
</div>
Note: the last snippet was omitted in the initial version of this blog post. Thanks to Christophe Bliard for spotting the error!
#Looking back
We built a basic message board that renders new messages without the need to refresh the page.
We leveraged ViewComponents to build a reusable message component.
We integrated with Hotwire and Turbo Streams to broadcast messages to users in real time.
And we did all this without writing any custom JavaScript!
