DEV Community

Cover image for I created the same app with Rails and Javascript
Mario Alberto Chávez
Mario Alberto Chávez

Posted on • Originally published at mariochavez.io

I created the same app with Rails and Javascript

#rails #react #javascript #stimulus

A few days ago, I came into a post on Medium "I created the exact same app in React and Svelte. Here are the differences", this post talks about side by side code comparison on writing a simple To Do application with both Javascript Framework.

Sunil Sandhu, the author of the post, is familiar with React by using it at work, and he wrote the post based on his exploration of Svelte and his experience with React.

It is an excellently written post with much useful information, so he tackled the work of creating a second post comparing Svelte and Vue "I created the exact same app in Vue and Svelte. Here are the differences".

While both posts have great information, I have always been vocal about why not try the old good Web foundation before jumping directly into a Javascript framework that takes over the application heart.

So I decided to use his same approach and wrote this post about using HTML, SASS, and StimulusJs with a Rails backend.

The Rails project

For this project backend needs, there is no need for all the Rails frameworks. Fortunately, a project can be customized since creating to include what is need it. The rails command gives many options to what includes and what left out.

$ rails --help
$ Usage:
  rails new APP_PATH [options]

Options:
      [--skip-namespace], [--no-skip-namespace]              # Skip namespace (affects only isolated applications)
  -r, [--ruby=PATH]                                          # Path to the Ruby binary of your choice
                                                             # Default: /Users/marioch/.rbenv/versions/2.6.3/bin/ruby
  -m, [--template=TEMPLATE]                                  # Path to some application template (can be a filesystem path or URL)
  -d, [--database=DATABASE]                                  # Preconfigure for selected database (options: mysql/postgresql/sqlite3/oracle/frontbase/ibm_db/sqlserver/jdbcmysql/jdbcsqlite3/jdbcpostgresql/jdbc)
                                                             # Default: sqlite3
      [--skip-gemfile], [--no-skip-gemfile]                  # Don't create a Gemfile
  -G, [--skip-git], [--no-skip-git]                          # Skip .gitignore file
      [--skip-keeps], [--no-skip-keeps]                      # Skip source control .keep files
  -M, [--skip-action-mailer], [--no-skip-action-mailer]      # Skip Action Mailer files
      [--skip-action-mailbox], [--no-skip-action-mailbox]    # Skip Action Mailbox gem
      [--skip-action-text], [--no-skip-action-text]          # Skip Action Text gem
  -O, [--skip-active-record], [--no-skip-active-record]      # Skip Active Record files
      [--skip-active-storage], [--no-skip-active-storage]    # Skip Active Storage files
  -P, [--skip-puma], [--no-skip-puma]                        # Skip Puma related files
  -C, [--skip-action-cable], [--no-skip-action-cable]        # Skip Action Cable files
  -S, [--skip-sprockets], [--no-skip-sprockets]              # Skip Sprockets files
      [--skip-spring], [--no-skip-spring]                    # Don't install Spring application preloader
      [--skip-listen], [--no-skip-listen]                    # Don't generate configuration that depends on the listen gem
  -J, [--skip-javascript], [--no-skip-javascript]            # Skip JavaScript files
      [--skip-turbolinks], [--no-skip-turbolinks]            # Skip turbolinks gem
  -T, [--skip-test], [--no-skip-test]                        # Skip test files
      [--skip-system-test], [--no-skip-system-test]          # Skip system test files
      [--skip-bootsnap], [--no-skip-bootsnap]                # Skip bootsnap gem
      [--dev], [--no-dev]                                    # Setup the application with Gemfile pointing to your Rails checkout
      [--edge], [--no-edge]                                  # Setup the application with Gemfile pointing to Rails repository
      [--rc=RC]                                              # Path to file containing extra configuration options for rails command
      [--no-rc], [--no-no-rc]                                # Skip loading of extra configuration options from .railsrc file
      [--api], [--no-api]                                    # Preconfigure smaller stack for API only apps
  -B, [--skip-bundle], [--no-skip-bundle]                    # Don't run bundle install
  --webpacker, [--webpack=WEBPACK]                           # Preconfigure Webpack with a particular framework (options: react, vue, angular, elm, stimulus)
      [--skip-webpack-install], [--no-skip-webpack-install]  # Don't run Webpack install

...
Enter fullscreen mode Exit fullscreen mode

By looking at the command usage information, a decision can be made based on project needs. By running the rails command with the following flags, the bootstrap process is cutting out many dependencies.

$ rails new frontend -M --skip-action-mailbox --skip-action-text --skip-active-storage --skip-action-cable --skip-sprockets --skip-javascript
Enter fullscreen mode Exit fullscreen mode

Webpack will help in this project to handle assets like SASS, Javascript, and images. To install it, open the Gemfile and add the Webpacker gem. It is a wrapper for Webpack that helps with Rails integration.

# Gemfile

...
gem "webpacker", "~> 4.0"
...
Enter fullscreen mode Exit fullscreen mode

Run the bundle command and then configure Webpack and install StimulusJs in the project.

$ bundle
$ bin/rails webpacker:install
$ bin/rails webpacker:install:stimulus
Enter fullscreen mode Exit fullscreen mode

The project bootstrap is done and ready for you to focus on the functionality of this application.

Backend side

First, this application needs a Todo model with a Name attribute to stored To Dos data. The simple step to create the model is to take advantage of Rails generators for this.

$ bin/rails g model todo name
invoke  active_record
      create    db/migrate/20191219201444_create_todos.rb
      create    app/models/todo.rb
      invoke    test_unit
      create      test/models/todo_test.rb
      create      test/fixtures/todos.yml
Enter fullscreen mode Exit fullscreen mode

A few files were created along with our model. For now, focus on db/migrate/20191219201444_create_todos.rb file; it is a database migration. Every time a database migration is created, you need to sure that it has database constraints required for a model; in this case, the name can not be null.

class CreateTodos < ActiveRecord::Migration[6.0]
  def change
    create_table :todos do |t|
      t.string :name, null: false

      t.timestamps
    end
  end
end
Enter fullscreen mode Exit fullscreen mode

With changes in place, it is time to migrate the database.

$ bin/rails db:migrate
Enter fullscreen mode Exit fullscreen mode

In the Ruby world, it is common to write automated tests, so why not write a few for the Todo model. Open the test file test/models/todo_test.rb and add the following tests.

require "test_helper"

class TodoTest < ActiveSupport::TestCase
  test "is valid" do
    subject = Todo.new todo_params

    assert subject.valid?
  end

  test "is invalid" do
    subject = Todo.new todo_params(name: "")

    refute subject.valid?
    refute_empty subject.errors[:name]
  end

  def todo_params(attributes = {})
    {name: "Test todo"}.merge(attributes)
  end
end
Enter fullscreen mode Exit fullscreen mode

The tests are simple; they make sure the mode model is valid when all attributes meet requirements and invalid when not. To run the tests execute the following command.

$ bin/rails test
# Running:

F

Failure:
TodoTest#test_is_invalid [/Users/marioch/Development/personal/frontend/test/models/todo_test.rb:13]:
Expected true to not be truthy.


rails test test/models/todo_test.rb:10

.

Finished in 0.194414s, 10.2873 runs/s, 10.2873 assertions/s.
2 runs, 2 assertions, 1 failures, 0 errors, 0 skips
Enter fullscreen mode Exit fullscreen mode

The runner reports failed tests; it is expected because the model under test is not validating any attributes requirements. The fix is straightforward, open the file app/models/todo.rb and add the following validations.

class Todo < ApplicationRecord
  validates :name, presence: true
end
Enter fullscreen mode Exit fullscreen mode

Rerun the tests after the change, and now the runner reports that everything is ok.

$ bin/rails test
# Running:

..

Finished in 0.116393s, 17.1832 runs/s, 34.3663 assertions/s.
2 runs, 4 assertions, 0 failures, 0 errors, 0 skips
Enter fullscreen mode Exit fullscreen mode

The last part of the Backend needs a controller, the TodosController. This time the controller will be created manually and not with the help of Rails generators, it must have three actions Index, Create, and Destroy.

Let us start with the routes of the application, open the file config/routes.rb, and add the following rules for TodosController actions.

Rails.application.routes.draw do
  resources :todos, only: [:index, :create, :destroy]

  root to: "todos#index"
end
Enter fullscreen mode Exit fullscreen mode

Since automated tests are being written for this project, test data is required for us to write TodosController tests. A fixture is just that, test data available in tests only. To add a To Do fixture, open the file test/fixtures/todos.yml and add the following record, simple, right?

todo:
  name: "Fixture todo"
Enter fullscreen mode Exit fullscreen mode

Now create the file test/controllers/todos_controller_test.rb, this file is used to write tests for TodosController. It is important to notice that tests for controllers only cares about the input and the response, nothing else.

require "test_helper"

class TodosControllerTest < ActionDispatch::IntegrationTest
  test "GET /todos" do
    get todos_path

    assert_response :success
  end

  test "POST /todos (success)" do
    post todos_path, params: {todo: {name: "Test todo"}}, as: :json

    assert_response :created

    json_response = JSON.parse(response.body, symbolize_names: true)
    assert json_response.dig(:id).present?
    assert json_response.dig(:html).present?
  end

  test "POST /todos (failure)" do
    post todos_path, params: {todo: {name: ""}}, as: :json

    assert_response :unprocessable_entity

    json_response = JSON.parse(response.body, symbolize_names: true)
    assert json_response.dig(:errors, :name).present?
  end

  test "DELETE /todos/:id" do
    todo = todos(:todo)
    delete todo_path(todo), as: :json

    assert_response :no_content
  end
end
Enter fullscreen mode Exit fullscreen mode

A run on the tests report all controller tests with an error; it is because the TodosController does not exist.

$ bin/rails test
# Running:

E

Error:
TodosControllerTest#test_POST_/todos_(failure):
ActionController::RoutingError: uninitialized constant TodosController
Did you mean?  TodosControllerTest
    test/controllers/todos_controller_test.rb:20:in `block in <class:TodosControllerTest>'


rails test test/controllers/todos_controller_test.rb:19

...

E

Error:
TodosControllerTest#test_GET_/todos:
ActionController::RoutingError: uninitialized constant TodosController
Did you mean?  TodosControllerTest
    test/controllers/todos_controller_test.rb:5:in `block in <class:TodosControllerTest>'
.
Enter fullscreen mode Exit fullscreen mode

It is time to add the TodosController. Create a file app/controllers/todos_controller.rb and add the code for all actions. Notice that Index action responds with HTML, Create with a JSON response, and Destroy with no content.

class TodosController < ApplicationController
  def index
    @todos = Todo.order(created_at: :desc)
    @todo = Todo.new
  end

  def create
    todo = Todo.new(todo_params)

    if todo.save
      todo_html = render_to_string(partial: "todos/todo", locals: {todo: todo}, formats: [:html])
      return render(json: {id: todo.id, html: todo_html}, status: :created)
    end

    render json: {errors: todo.errors.to_h}, status: :unprocessable_entity
  end

  def destroy
    todo = Todo.find_by(id: params[:id])
    todo.destroy

    render plain: "", status: :no_content
  end

  private

  def todo_params
    params.require(:todo).permit(:name)
  end
end
Enter fullscreen mode Exit fullscreen mode

Let us try the tests again; much better, everything is green except for one test. The failing test indicates that Index action could not found an HTML template to render; it is ok for now; this template is added in the next section.

$ bin/rails test

# Running:

E

Error:
TodosControllerTest#test_GET_/todos:
ActionController::MissingExactTemplate: TodosController#index is missing a template for request formats: text/html
    test/controllers/todos_controller_test.rb:5:in `block in <class:TodosControllerTest>'


rails test test/controllers/todos_controller_test.rb:4

......
Enter fullscreen mode Exit fullscreen mode

The Frontend side

The project is ready for us to work on the frontend. Since it uses Webpack, it is the right time to start the Webpack server and the Rails server; each one needs to run in its terminal session.

$ bin/webpack-dev-server
----
$ bin/rails s -p 3400
Enter fullscreen mode Exit fullscreen mode

From the original React project, a few assets will be reused. To start, copy the contents of App.css, components/ToDo.css, and components/ToDoItem.css into a single file in our project, this file is app/javascript/stylesheets/application.scss.

rails-ujs library is a Javascript library from Rails that helps in what Rails community calls "Unobtrusive Javascript", it makes Ajax call made by Rails helpers transparent. To install it, use Yarn.

$ bin/yarn add @rails-ujs
Enter fullscreen mode Exit fullscreen mode

Also, a new logo for this project must be placed at app/javascript/images and imported along with the application.scss file into the app/javascript/packs/application.js for Webpack to manage those files for us. Here also rails-ujs gets initialized.

require("@rails/ujs").start()

import "../stylesheets/application.scss"
import "../images/logo.png"

import "controllers"
Enter fullscreen mode Exit fullscreen mode

For Rails to use the bundle files from Webpack, the Rails application HTML layout needs to be updated to use Webpack's files. Open the file app/views/layout/application.html.erb and add the Webpack helpers to it.

<!DOCTYPE html>
<html>
  <head>
    <title>Rails To Do</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= javascript_pack_tag "application" %>
    <%= stylesheet_pack_tag "application" %>

  </head>

  <body>
    <%= yield %>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

From the React components, ToDoItem.js and ToDo.js let us copy the HTML template part into two Rails template app/views/todos/_todo.html.erb and app/views/todos/index.html.erb respectively but with few modifications. First, the React specific code must be replaced with Rails code.

<div class="ToDoItem" data-controller="todo-delete" data-target="todo-delete.item">
  <p class="ToDoItem-Text"><%= todo.name %></p>
  <%= button_to "-", todo_path(todo.id),
      method: :delete,
      remote: true,
      form: { data: { action: "ajax:success->todo-delete#successResult ajax:error->todo-delete#errorResult" } },
      class: "ToDoItem-Delete"
     %>
</div>
Enter fullscreen mode Exit fullscreen mode

StimulusJS will use those attributes to interact and connect with the HTML DOM.

data-controller tells StimulusJS, which Javascript component (controller) to activate when that attribute is present in the DOM. data-target is a way to reference DOM nodes inside the StimulusJS controller, and data-action is the way to dispatch DOM events to the StimulusJS controller.

Right now, without a StimulusJS controller, those data attributes are kind of useless, but we are planning for the time when the controllers are in place.

Now let us do the same for React component ToDo.js, the HTML template code needs to be copied to /app/views/todos/index.html.erb, here is the modified version of it.

<div class="ToDo">
  <%= image_tag asset_pack_path("media/images/logo.png"), class: "Logo", alt: "Rails logo" %>
  <h1 class="ToDo-Header">Rails To Do</h1>
  <div class="ToDo-Container" data-controller="todo">
    <div class="ToDo-Content" data-target="todo.todos">
      <%= render @todos %>
    </div>

    <div class="ToDoInput">
      <%= form_with model: @todo, local: false,
        data: { action: "ajax:beforeSend->todo#validateSubmit ajax:error->todo#errorResult ajax:success->todo#successResult" } do |form| %>
        <%= form.text_field :name, data: { target: "todo.field" } %>
        <%= form.submit "+", class: "ToDo-Add" %>
      <% end %>
    </div>
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode

Before we continue, let us make a little detour here. Remember the failing test for TodosController due to a missing template? The template is now in place, so the test should not be failing anymore, rerun the tests and see it by yourself.

$ bin/rails test

# Running:

........

Finished in 0.355593s, 22.4976 runs/s, 36.5586 assertions/s.
8 runs, 11 assertions, 0 failures, 0 errors, 0 skips
Enter fullscreen mode Exit fullscreen mode

It is time to add Javascript to the project. Let us start with the controller that helps to delete a To Do item. The file is app/javascript/controllers/todo_delete_controller.js

import { Controller } from "stimulus"

export default class extends Controller {
  static targets = ["item"]

  errorResult(event) {
    console.log(event.detail)
  }

  successResult(event) {
    event.preventDefault()
    this.itemTarget.remove()
  }
}
Enter fullscreen mode Exit fullscreen mode

The next controller is the one that takes care of adding new To Do item. The file is app/javascript/controllers/todo_controller.js

import { Controller } from "stimulus"

export default class extends Controller {
  static targets = ["todos", "field"]

  errorResult(event) {
    console.log("error", event.detail)
  }

  successResult(event) {
    const response = event.detail[0]
    const todoHTML = document.createRange().createContextualFragment(response.html)

    this.todosTarget.prepend(todoHTML)
    this.fieldTarget.value = ""
  }

  validateSubmit(event) {
    if (this.fieldTarget.value === "") {
      event.preventDefault()
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

It has two functions, validatesSubmit, which is called on form submit, and validates the input to now allow empty To Do. The second one, successResult is called after the Ajax request is made, and it takes care to place the To Do HTML fragment in the DOM. The HTML To Do fragment is part of the server response.

The project is done. If you want to try it out, add a couple of seed records into db/seeds.rb file.

Todo.create(name: "clean the house")
Todo.create(name: "buy milk")
Enter fullscreen mode Exit fullscreen mode

And seed the database with the following command.

$ bin/rails db:seed
Enter fullscreen mode Exit fullscreen mode

Now point your browser to http://localhost:3400 and try the application.

Alt Text

The application is similar in terms of UI interaction, but in addition, it has a Backend that is not present in the original React application. It also has automated tests for models and controllers, and we can do a little better by adding a System Test. This kind of test automates the browser to "use" the application in specific scenarios.

To add a System test, create the file test/system/todos_test.rb and add the following content.

require "application_system_test_case"

class TodosTest < ApplicationSystemTestCase
  test "visit todos" do
    todos_count = Todo.count
    visit root_url

    assert_selector "h1", text: "Rails To Do".upcase
    assert_selector ".ToDoItem", count: todos_count
  end

  test "try to add an empty todo" do
    todos_count = Todo.count
    visit root_url

    fill_in "todo_name", with: ""
    click_button "+"

    assert_selector ".ToDoItem", count: todos_count
  end

  test "add a todo" do
    todo = "Add Tests"
    todos_count = Todo.count
    visit root_url

    fill_in "todo_name", with: todo
    click_button "+"

    assert_selector ".ToDoItem", count: todos_count + 1
    assert_selector ".ToDoItem", text: todo
  end

  test "delete a todo" do
    todo = todos(:todo)
    todos_count = Todo.count

    visit root_url
    todo_element = page.find ".ToDoItem", text: todo.name
    remove_button = todo_element.find ".ToDoItem-Delete"
    remove_button.click

    assert_selector ".ToDoItem", count: todos_count - 1
    refute_selector ".ToDoItem", text: todo.name
  end
end
Enter fullscreen mode Exit fullscreen mode

To run the System test, you need to have the Chrome browser installed. Run the test using the following command.

$ bin/rails test:system


  
  
  Running:




Capybara starting Puma...



    

  • Version 4.3.1 , codename: Mysterious Traveller
    • 

  • Min threads: 0, max threads: 4
    • 

  • Listening on tcp://127.0.0.1:51968
Capybara starting Puma...
    • 

  • Version 4.3.1 , codename: Mysterious Traveller
    • 

  • Min threads: 0, max threads: 4
    • 

  • Listening on tcp://127.0.0.1:51971
....
    • 




Finished in 5.133107s, 0.7793 runs/s, 1.3637 assertions/s.

4 runs, 7 assertions, 0 failures, 0 errors, 0 skips
Enter fullscreen mode Exit fullscreen mode




Final words

What I would like you to take from replicating this example is that sometimes there is no need to go all the way in with a separated frontend like React, Vue, or Svelte.

By using the HTML standard, the maturity of your framework, and a tool like StimulusJS you can archive the same "snappy" functionality without the mess of Javascript code from the time before frameworks.

Both libraries, rails-ujs, and StimulusJS were developed within the Rails community, but the truth is that they do not depend on Rails, both can be used with any other backend/HTML template system.

You can find the sample code at https://github.com/mariochavez/rails-todo-2019

Top comments (0)

Read next

hamzakhan profile image

🛠️ React Server Components vs. Client Components: When to Use Which? ⚡

Hamza Khan -

vivecodes profile image

Understanding Expensive Calculations in React for Beginners

vive -

tomasdevs profile image

Why I Built the "Soo Good" Vegan Burger Website 🌱

Tomas Stveracek -

harshalshah26 profile image

MarkoJS Frontend Development with Generative AI: A Modern Approach

Harshal Shah -