Just Another Twitter Clone with Rails 6, CableReady, and Stimulus Reflex

Image from Pexels.com

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?

I remember those days when Ruby on Rails came up to the scene and I was making Web Applications with PHP, there were other times, and I also learn a lot of OOP concepts then. Projects where you had to write/create every single file that your application goes to need, call it Classes, Stylesheets or JavaScript files.

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.

This is how it looks a current Rails Application and another JavaScript framework

Then, you usually don’t manage just one application in your ecosystem, so it’s possible that your apps looks like this:

Multiple Rails Applications with another JavaScript framework
The original flow in a Rails Applications
Entire Keynote about Turbolinks 5 from Sam Stephenson in RailsConf 2016.

Turbolinks

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.

Stimulus Reflex

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.

Original video from Nate Hopkins where I got inspired fot this post.

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:

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.

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:

Then just opening http://localhost:3000 you should be able to register and login (if you just download the latinchat application from my Github account).

Twitter: @emmanueloseguer

Ruby on Rails Developer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store