{"id":14555,"date":"2021-12-13T12:12:00","date_gmt":"2021-12-13T09:12:00","guid":{"rendered":"https:\/\/railsware.com\/blog\/?p=14555"},"modified":"2022-01-26T16:41:31","modified_gmt":"2022-01-26T13:41:31","slug":"almost-jsless-frontend-on-rails","status":"publish","type":"post","link":"https:\/\/railsware.com\/blog\/almost-jsless-frontend-on-rails\/","title":{"rendered":"Almost JSless Frontend on Rails"},"content":{"rendered":"\n
Despite some thoughts you can hear in the developer communities, Rails is not becoming a legacy technology, it\u2019s not going to die, and it\u2019s still a great tool to build your new project. One of the reasons is that Rails has enough tooling to cover the essential parts of a typical web application. You don\u2019t have to think about how to handle HTTP requests, what to use to input and retrieve data from the database, how to generate HTML that users will see in their browsers, and even how to give life to the UI.<\/div>\n\n\n\n
\"JSless<\/figure>\n\n\n\n

Rails tools out of the box: rails-ujs, turbolinks<\/h2>\n\n\n\n

Rails UJS<\/h3>\n\n\n\n

For a long time, since back when I was trying to build my first web page using only HTML, Rails had a cool tool called jquery-ujs <\/em>(unobtrusive javascript), which is now called rails-ujs<\/em>. It works great with a rails backend when you want to add a pinch of AJAX requests for a small price.<\/p>\n\n\n\n

You can do something like this.<\/p>\n\n\n\n

app\/controllers\/money_controller.rb<\/strong><\/p>\n\n\n\n

class MoneyController < ApplicationController\n  def show\n    @money = GetAllMoney.call\n  end\n\n  def destroy\n    SpendAllMoney.call\n  end\nend<\/code><\/pre>\n\n\n\n
views\/money\/show.html.erb<\/strong><\/p>\n\n\n\n
<div class=\"money\">\n  <h3>Your money<\/h3>\n  <span id=\"money-amount\"><%= @money %><\/span>\n  <span>$<\/span>\n\n  <%= link_to 'Spend all money',\n              money_path,\n              method: 'delete',\n              remote: true,\n              data: { confirm: 'Do you want to spend all money?' },\n              class: 'spend-money-button' %>\n<\/div><\/code><\/pre>\n\n\n\n
views\/money\/destroy.js<\/strong><\/p>\n\n\n\n
document.querySelector('#money-amount').innerHTML = 0<\/code><\/pre>\n\n\n\n
\"\"<\/figure><\/div>\n\n\n\n
So you\u2019ve made an AJAX request with a few HTML attributes and one JS file with one line of code. Pretty cool!<\/p>\n\n\n\n
Turbolinks<\/h3>\n\n\n\n
Another old-timer in the Rails world is Turbolinks. It is not under active development, but we will talk about its successor later. To make a long story short, Turbolinks brings you a SPA experience with almost no client-side code. To be more detailed it: <\/p>\n\n\n\n