UJS trong Rails – Bí kíp làm frontend gọn nhẹ mà vẫn mạnh mẽ

Bạn không cần React, Vue hay SPA phức tạp để có trải nghiệm web mượt mà. Rails đã có UJS (Unobtrusive JavaScript) từ rất sớm – và nếu dùng đúng cách, nó vẫn cực kỳ lợi hại

1. UJS là gì?

UJS (Unobtrusive JavaScript) là triết lý tách** JavaScript ra khỏi HTML**, giúp:

• HTML sạch, dễ đọc
• JS tái sử dụng, dễ bảo trì
• Backend (Rails) và frontend phối hợp mượt mà

Trong Rails, UJS được hiện thực thông qua thư viện rails-ujs (Rails 5–6) và là nền tảng cho các tính năng như:

• remote: true
• data-method
• data-confirm
• data-disable-with

Mục tiêu: viết ít JS nhất nhưng vẫn có trải nghiệm tương tác tốt.

2. Vì sao Rails cần UJS?

Nếu không có UJS, bạn sẽ gặp các vấn đề:

Form submit → reload toàn trang

Link chỉ hỗ trợ GET

Phải viết JS thủ công cho confirm, disable button

UJS giải quyết tất cả những điều này ngay trong view Rails.

3. remote: true – AJAX "chuẩn Rails"

Ví dụ form AJAX

<%= form_with model: @comment, remote: true do |f| %>
    <%= f.text_area :content %>
    <%= f.submit "Gửi" %>
<% end %>

Rails sẽ tự động:

• Chặn submit mặc định
• Gửi request bằng AJAX
• Thêm header Accept: text/javascript

Controller

def create
    @comment = Comment.create(comment_params)
    respond_to do |format|
        format.js # create.js.erb
    end
end

View JS (create.js.erb)

document.querySelector('#comments').insertAdjacentHTML('beforeend', '<%= j render @comment %>');

Không cần viết fetch / axios – Rails lo hết.

4. data-method – RESTful đúng nghĩa

HTML <a> chỉ hỗ trợ GET, nhưng Rails thì cần:

• DELETE /logout
• PATCH /posts/:id

Ví dụ:

 <%= link_to "Logout", logout_path, method: :delete %>

Rails UJS sẽ:

• Chặn click
• Tạo form ẩn
• Submit với method DELETE

Chuẩn REST, không hack URL.

5. data-confirm – xác nhận trước khi hành động

<%= link_to "Delete", post_path(post), method: :delete, data: { confirm: "Are you sure you want to delete it?" } %>

Rails UJS tự động:

• Hiển thị confirm()
• User bấm OK → tiếp tục
• Cancel → dừng request

Không cần JS thủ công.

6. data-disable-with – chống double submit

<%= f.submit "Save", data: { disable_with: "Saving..." } %>

Khi submit:

• Button bị disable
• Text đổi thành Đang lưu…
• Request xong → enable lại

Rất hữu ích với form quan trọng.

7. UJS hoạt động thế nào bên dưới

Luồng xử lý:

1. Rails render HTML + data
2. Rails-ujs lắng nghe event (click, submit)
3. JS chặn hành vi mặc định
4. Gửi request bằng AJAX / form ẩn
5. Rails trả về JS hoặc HTML

Backend vẫn là trung tâm, frontend chỉ hỗ trợ.

8. UJS trong Rails hiện đại (Rails 7+)

Rails 7 chuyển sang Hotwire (Turbo + Stimulus)

Nhưng UJS là nền móng để hiểu:

• Turbo Drive
• Turbo Frames
• Turbo Streams

9. Kết luận

• UJS giúp Rails:

  • Ít JS hơn
  • Code gọn hơn
  • Dễ maintain hơn

• Không phải dự án nào cũng cần SPA

• Rails + UJS vẫn là combo cực mạnh cho:

  • Startup
  • Admin
  • Internal tool

“Đừng vội thêm framework JS, khi Rails đã cho bạn quá nhiều sẵn có.”