Just Another Twitter Clone with Rails 6, CableReady, and Stimulus Reflex
Hello world, welcome to this little blog post that intends just to remember those great benefits that you have when you work with tools like Ruby on Rails to rapidly build Web applications.
Why Ruby on Rails?
When I start using Rails, I was fascinated about the time that you save making a fully and functional CRUD for a “X” model, in this “new” framework (version 3, not the first version as you can see) I start making Web applications for Real Estate companies in really record times and I really focus in the architecture of the entire solution for problems of the customers/users, more than in the how’s that solution has to be build.
Then, you necessarily need JS to handle some things related with the client side, and frameworks like Angular, and React, just to mention some of them, come up to the scene to try to solve this needs, yes, but for issues of Google users and issues of Facebook users.
I don’t want to sound revolutionary, but for those developers, and companies that make solutions based on Ruby on Rails framework, with the agile mindset, it doesn’t needed another framework to deal with the JS required. Even worst, we finish with a kind of Frankenstein Web application that has some challenges each time that you add/modify some new features. And when the times comes, we want to migrate our appliation to a newer version of Rails, and then we notice that we have some(just to say a word) dependencies that make our labor even more challenging. But maybe that’s material for another post.
Then, you usually don’t manage just one application in your ecosystem, so it’s possible that your apps looks like this:
Turbolinks is a Rails feature, available as a gem and enabled by default in new Rails apps. It is intended to speed up navigating between pages of your application.
It works by intercepting all link clicks that would navigate to a page within the app, and instead makes the request via AJAX, replacing the body with the received content.
The primary speedup comes from not having to download or parse the CSS & JS files again.
Check more about Turbolinks.
Have you seen the benefits that Turbolinks (more noticeable from the 5 version) has for your current Web application? Even better, you can use Turbolinks for your native iOS application and just reuse all you did in your current Rails Web Application (also in other framework/languages), we’re going to discuss how in my next post.
Extends the capabilities of both Rails and Stimulus by intercepting user interactions and passing them to Rails over real-time websockets. These interactions are processed by Reflex actions that change application state. The current page is quickly re-rendered and the changes are sent to the client using CableReady. The page is then morphed to reflect the new application state. This entire round-trip allows us to update the UI in 20–30ms without flicker or expensive page loads. To see more about this great tool check the official site of Stimuls Reflex.
What we’re going to build here?
In order to practice this concepts we’re going to make a new Rails 6 based Web Application and the StimulusReflex that intends to be the “new way to craft modern, reactive web interfaces with Ruby on Rails”, so let’s create a simple Chat Application, we’re going to call it LatinChat.
Creating the Rails 6 new Application
Asuming that you already have Rails 6 (the minimum version to use the new benefits of Turbolinks is 5) gem installed and Ruby 2.7 installed, lets run the next link in the terminal:
rails new --skip-spring --webpack=stilmulus latinchat
bundle add redis cable_ready stimulus_reflex
yarn add cable_ready stimulus_reflex
bundle exec rails stimulus_reflex:install
Now we should have a basic Rails Application with stimulus and reflex ready to use.
You can use other method instead of the scaffold if you prefer.
$ rails g scaffold Post username:string body:text likes_count:integer reposts_count:integer --skip-jbuilder
Then, we should do some adjusts to just created controllers and views, in order to use just that we need. in This case, you can go this url and check out the repo latintwit made along with this post.
You should refactor the views(implement some bootstrap) and the Post controller as well acording this repo. Feel free for send your thoughts and comments.
In order to run the application just run the next commands in the root folder of the rails application:
# In one terminal window run
redis-server# In other terminal window run
rails s# In other terminal window run