Giới Thiệu

Trong thời đại phát triển của các ứng dụng web hiện đại, tốc độ và tính tương tác cao là yêu cầu thiết yếu. Truyền thống, các nhà phát triển thường phải dựa vào các framework front-end như React hoặc Vue. Nhưng đối với các nhà phát triển Ruby on Rails (RoR), có một lựa chọn sạch hơn: Turbo trong Rails.

Turbo, một phần của ngăn xếp Hotwire, mang lại tốc độ tương tự như ứng dụng một trang (SPA) trong khi vẫn giữ được các giá trị cốt lõi của Rails với việc render phía máy chủ. Chỉ với một vài điều chỉnh, bạn có thể biến đổi trải nghiệm người dùng của ứng dụng của mình mà không cần một khối lượng JavaScript phức tạp.

Trong bài viết này, chúng ta sẽ tìm hiểu những điều cơ bản: Turbo Drive, Turbo Frames và Turbo Streams, cũng như thời điểm sử dụng từng tính năng.

Turbo Drive: Tăng Tốc Điều Hướng, Phong Cách Rails

Turbo Drive thay thế các lần tải lại trang đầy đủ bằng cách cập nhật từng phần. Thay vì trình duyệt phải xây dựng lại toàn bộ trang, Turbo Drive sẽ chặn các liên kết và gửi biểu mẫu, lấy phản hồi qua fetch, và chỉ cập nhật <body> và <title>.

Điều này có nghĩa là:

Tải trang cảm giác ngay lập tức.
Bố cục và ngữ cảnh JavaScript vẫn được giữ nguyên.
Bạn có điều hướng giống như SPA mà không cần phải áp dụng một framework SPA đầy đủ.

Tính năng này đã được tích hợp sẵn với gem turbo-rails, vì vậy không cần thiết lập gì thêm. Một điều cần lưu ý là các script phụ thuộc vào việc tải lại trang có thể cần phải được khởi tạo lại.

Turbo Frames trong Rails: Làm Mới Những Gì Quan Trọng

Một Turbo Frame trong Rails hoạt động như một cửa sổ độc lập trên trang của bạn. Thay vì làm mới toàn bộ, bạn chỉ làm mới frame mục tiêu.

Một số trường hợp sử dụng tuyệt vời bao gồm:

Chỉnh sửa inline (thay đổi tiêu đề bài viết mà không rời khỏi trang).
Các thanh bên hoặc bảng điều khiển có thể tải lại độc lập.
Các modal và pop-up.

Với Turbo Frames, bạn có thể giữ các tương tác được giới hạn và nhanh chóng mà không cần phải vẽ lại toàn bộ giao diện.

Turbo Streams trong Rails: Thời Gian Thực Không Phức Tạp

Nếu bạn từng muốn ứng dụng Rails của mình có cảm giác thời gian thực, Turbo Streams chính là câu trả lời. Bằng cách sử dụng HTML được tạo từ máy chủ qua WebSockets (thông qua ActionCable) hoặc polling, streams cho phép bạn phát tán cập nhật trực tiếp vào DOM.

Dưới đây là những gì điều này trông như thế nào trong thực tế:

Các bài viết mới xuất hiện trong feed ngay khi chúng được tạo.
Các bình luận xuất hiện trong thời gian thực cho mọi người dùng.
Các phần tử có thể được thêm, cập nhật hoặc xóa ngay lập tức.

Streams hoạt động mượt mà với các hành động CRUD tiêu chuẩn của Rails. Bằng cách tạo các view .turbo_stream.erb, bạn có thể phát tán các thay đổi mà không cần động đến JavaScript.

Sự Khác Biệt Giữa Turbo Frames và Turbo Streams

Đây là một câu hỏi phổ biến: sự khác biệt giữa Turbo Frames và Turbo Streams là gì?

Turbo Frames tập trung vào điều hướng trong trang. Chúng cập nhật một phần cụ thể của trang (như modal hoặc biểu mẫu inline).
Turbo Streams xử lý các cập nhật trực tiếp. Chúng đưa các thay đổi từ máy chủ đến tất cả người dùng kết nối trong thời gian thực.

Cả hai đều có thể đồng tồn tại trong cùng một ứng dụng Rails. Ví dụ, bạn có thể chỉnh sửa một bài viết inline với Turbo Frames, trong khi các bài viết mới xuất hiện ngay lập tức trong danh sách nhờ Turbo Streams.

Cách Drive, Frames và Streams Hoạt Động Cùng Nhau

Hãy hình dung quy trình này trong ứng dụng Rails của bạn:

Một người dùng mở chỉ mục bài viết - Turbo Drive giúp nó tải ngay lập tức.
Họ nhấp vào “Chỉnh sửa” - chỉ khu vực bài viết đó được cập nhật qua Turbo Frame.
Họ nhấn lưu - cùng một frame tự động làm mới.
Một người dùng khác thêm một bài viết - nó xuất hiện trong thời gian thực, nhờ Turbo Streams.

Ba tính năng này bổ sung cho nhau một cách hoàn hảo: Drive tăng tốc độ điều hướng, Frames giới hạn các cập nhật, và Streams xử lý việc phát sóng trực tiếp.

Khi Nào Không Nên Sử Dụng Turbo

Bạn có thể bỏ qua Turbo trong những tình huống như:

Ứng dụng cần quản lý trạng thái phía khách hàng phức tạp.
Các tính năng phụ thuộc vào các widget JS bên thứ ba mà không tái khởi tạo tốt.
Giao diện tương tác cao hơn phù hợp hơn với các framework SPA.

Trong những trường hợp đó, Stimulus hoặc một ngăn xếp SPA đầy đủ có thể là lựa chọn phù hợp hơn.

Khắc Phục Sự Cố Turbo Trong Ứng Dụng Ruby on Rails Của Bạn

Nếu Turbo không hoạt động như mong đợi, đây là một vài mẹo:

Mở Chrome DevTools → tab Network → lọc theo “fetch.”
Thêm data-turbo="false" để vô hiệu hóa nó cho các liên kết hoặc biểu mẫu cụ thể.
Sử dụng Turbo.session.drive = false để tắt Drive trên toàn cầu (mặc dù hiếm khi cần).

Kết Luận

Turbo mang đến cho các nhà phát triển Rails một cách để xây dựng các ứng dụng cảm giác hiện đại mà không từ bỏ triết lý của Rails. Với Turbo Drive, Turbo Frames và Turbo Streams, bạn có thể cung cấp:

Điều hướng ngay lập tức.
Cập nhật mượt mà, được giới hạn.
Hợp tác thời gian thực.

Tất cả đều đến từ HTML được render từ máy chủ.

Tại RailsFactory, chúng tôi đã làm việc với Rails hơn 19 năm, và Turbo là một trong những sự tiến hóa thú vị nhất của framework này. Nếu bạn đang tìm cách mang lại tốc độ và tính tương tác như vậy vào các dự án Rails của riêng bạn, chúng tôi sẽ rất vui lòng giúp đỡ.

Turbo trong Rails: Hướng Dẫn Đầy Đủ về Drive, Frames và Streams