How to Build a Twitter Clone with Rails and Hotwire
Hotwire is fresh out of the Basecamp Github and has set the Rails community ablaze. This quick write up is an update from How to Build a Twitter Clone with rails, ActionCable, and React to show a comparison between the two approaches.
Now, this doesn’t mean to throw away any React code you may be using or StimulusReflex if you have already gone down that path. Those approaches are both more mature and widely discoverable.
I may follow this up with a video to do a more side-by-side look at these two approaches.
Without further ado, let’s get started with a new app:
Rails will do its thing, install the application, install the gems, process the Webpacker install, and install the NPM packages.
Next, we will want to add the hotwire-rails
gem to get the libraries needed:
Bundle and run the installer command for Hotwire:
Now, let’s make a model to hold the data to clone a tweet in this Twitter clone called Blabber. All basic attributes:
To keep this closely resembling the CableReady/StimulusReflex/React article, we’ll add the same validation in the Post
model:
One difference you see is the callbacks. When using Hotwire, the prevailing convention is to use ActiveRecord
callbacks. While working on the model collection, you can set up callbacks for create, update, and destroy broadcasts.
We’ll make a few small adjustments to the generated migration file to add some database-level defaults (and allows us to keep the code around Post
creation simple):
Ok! Now, we’re ready to run that migration!
With the Model and Database layer out of the way, we can move on to the controller and corresponding view templates!
Simple controller. The index
action returns a list of posts to @post
. create
uses StrongParameters
, creates a new Post, and addresses some Turbo::Stream
usage (more on that soon), and redirects back to the index
template. like
and repost
are similar except they increment the respective count columns.
Let’s wire up a few routes to match up to those controller actions. Yes, these aren’t perfect RESTful routes, but 1) They work. 2) This is a 10-minute tutorial. 3) Are GET requests making sure we do not have to worry about AJAX/fetch/CSRF in the front-end. You would work around these issues in a production application.
With a Model, Controller, and routes, we can put together some view templates. We’ll start by adding Bootstrap
CDN CSS. This way, we can wire up some UI interfaces pretty quickly!
The yield :head
, turbo_include_tags
, and stimulus_include_tags
were all added earlier by the hotwire:install
command.
The first view template up is the app/views/posts/index.html.erb
:
The view is a relatively simple usage of Rails, with a render @posts
method, rendering the collection of @posts
, using a posts/_post
partial. The turbo_frame_tag
’s will allow the Turbo
libraries to instantiate the “frames” that will manage the HTML partials sent over the wire from the broadcasted changes. A lot is going on with that process, but Hotwire and Rails are taking care of it all and merely managing the markup. Specifically, turbo_stream_from :posts
hooks up the view layer to listen to the Post model’s broadcasts.
The partial is some pretty standard singular object markup with some Bootstrap classes thrown in to make it look half decent:
app/views/posts/_posts.html.erb
Another turbo_stream
command to listen for broadcasted updates and deletions, and the dom_id
helper to create conventional Rails View IDs model_resource-id
. In this case, it would look like posts_1
, etc.
Up next is a straightforward Rails form:
If you remember the index.html.erb
, another frame wrapped the form’s render call. Thus we included the dom_id
to allow the controller’s create
action to enable Turbo to manage the streams’ markup.
Now we’ll head back to the controller to talk about the create action in depth:
On a failed save, it will instruct the form’s partial to update the form frame with the form template, but this time with the errors markup triggered.
At this point, it should look like this!
There you go! I bet with a fast enough system to work through the Rails install, gem install, and javascript package installs, you could make it through this tutorial in less than 10 minutes!