Xây dựng nhanh các ứng dụng Rails tương tác với Hotwire:Hướng dẫn cho người mới bắt đầu

Hotwire là một chủ đề nóng hiện nay đối với mọi nhà phát triển Rails. Nếu bạn làm việc với Rails, rất có thể bạn đã nghe nhiều về nó.

Hotwire là một cách hoàn toàn mới để thêm tính tương tác vào ứng dụng của bạn với rất ít dòng mã và nó hoạt động rất nhanh bằng cách truyền HTML qua dây. Điều đó có nghĩa là bạn có thể tránh xa hầu hết các khung Ứng dụng Trang Đơn (SPA). Bạn cũng có thể giữ logic kết xuất của mình tập trung trên máy chủ, trong khi vẫn duy trì thời gian tải trang và khả năng tương tác nhanh chóng.

Trong bài đăng này, chúng ta sẽ xem xét các thành phần chính của Hotwire và cách sử dụng nó trong ứng dụng Rails của bạn. Nhưng trước tiên:Hotwire là gì và tại sao bạn nên sử dụng nó?

Hotwire là gì?

Hotwire không phải là một thư viện đơn lẻ mà là một cách tiếp cận mới để xây dựng các ứng dụng web và thiết bị di động bằng cách gửi HTML qua mạng. Nó bao gồm Turbo, Stimulus và Strada (ra mắt vào cuối năm nay). Chúng ta sẽ thảo luận chi tiết từng thư viện này trong phần tiếp theo.

Ghi chú bên lề :Mặc dù Hotwire được liên kết chặt chẽ với Rails nhưng nó hoàn toàn không phụ thuộc vào ngôn ngữ nên nó có thể hoạt động tốt với các ứng dụng khác. Tôi đã sử dụng Stimulus trong quá trình sản xuất trên một số ứng dụng không phải Rails và một số trang web tĩnh. Bạn cũng có thể sử dụng Turbo mà không cần Rails.

Nhưng bây giờ chúng ta hãy quay lại thế giới Rails.

Tại sao nên sử dụng Hotwire trong ứng dụng Rails của bạn?

Vậy khi nào bạn nên sử dụng Hotwire? Câu trả lời là bất cứ nơi nào bạn muốn thêm tính tương tác vào ứng dụng của mình. Ví dụ:nếu bạn muốn:

• Một số nội dung được hiển thị/ẩn có điều kiện dựa trên tương tác của người dùng (ví dụ:biểu mẫu địa chỉ trong đó danh sách các tiểu bang tự động thay đổi dựa trên quốc gia đã chọn).
• Để cập nhật một số nội dung trong thời gian thực (ví dụ:nguồn cấp dữ liệu như Twitter nơi các Tweet mới tự động được thêm vào trang).
• Để tải từng phần một số trang trên trang của bạn (ví dụ:bên trong đàn accordion, bạn có thể tải tiêu đề và đánh dấu các chi tiết là tải từng phần để tăng tốc thời gian tải).

Thành phần dây nóng

Như đã đề cập trước đó, Hotwire là tập hợp các kỹ thuật mới (và một số cũ) để xây dựng ứng dụng web.

Hãy thảo luận từng vấn đề này trong một số phần tiếp theo.

Tăng áp

HTML thúc đẩy Turbo ở cốt lõi. Turbo cung cấp một số kỹ thuật để xử lý dữ liệu HTML truyền qua mạng và hiển thị dữ liệu đó trên ứng dụng của bạn mà không cần thực hiện tải lại toàn bộ trang. Nó bao gồm:

• Truyền động tăng áp

  Nếu trước đây bạn đã sử dụng Turbolinks thì bạn sẽ cảm thấy như ở nhà với Turbo Drive. Về cốt lõi, một số mã JS chặn các sự kiện JavaScript trên ứng dụng của bạn, tải HTML không đồng bộ và thay thế các phần trong đánh dấu HTML của bạn.

• Khung Turbo

  Turbo Frames tách các phần đánh dấu của bạn thành các phần khác nhau có thể tải độc lập.

  Ví dụ:nếu bạn có một ứng dụng blog, nội dung bài đăng và nhận xét của bạn là hai phần có liên quan nhưng độc lập của trang. Bạn có thể tách chúng ra để điều hướng hoạt động độc lập hoặc thậm chí tải chúng không đồng bộ với khung turbo.

• Dòng Turbo

  Turbo Streams cung cấp các tiện ích để dễ dàng đưa dữ liệu thời gian thực vào ứng dụng của bạn. Ví dụ:giả sử bạn đang xây dựng một nguồn cấp tin tức như Twitter. Bạn muốn kéo các tweet mới vào nguồn cấp dữ liệu của người dùng ngay khi chúng được đăng mà không cần tải lại trang. Turbo Streams cho phép bạn thực hiện việc này mà không cần viết một dòng JS nào.

• Turbo gốc

  Turbo Native cho phép bạn xây dựng trình bao bọc gốc xung quanh ứng dụng web của mình. Bạn sẽ cảm thấy tự nhiên khi điều hướng và tương tác mà không cần phải làm lại tất cả các màn hình.

  Bạn sẽ tiếp tục cung cấp phần còn lại của ứng dụng thông qua web. Bằng cách đó, bạn có thể tập trung vào các phần thực sự có tính tương tác trong ứng dụng của mình và thực hiện đúng cách.

Sự kích thích

Kích thích là một khung JavaScript để viết bộ điều khiển tương tác với HTML của bạn.

Giả sử chúng ta cần thêm một số thuộc tính JavaScript như data-controller , data-action , và data-target tới các phần tử trên một trang. Chúng ta sẽ viết một bộ điều khiển kích thích có quyền truy cập vào các phần tử nhận sự kiện dựa trên các thuộc tính đó. Dưới đây là ví dụ:

Rất dễ dàng để biết được chức năng của nó mà không cần đọc bộ điều khiển Kích thích liên quan.

Đây là bộ điều khiển đi kèm với HTML:

Đó là cốt lõi của Kích thích:giữ mọi thứ đơn giản và có thể tái sử dụng.

Bây giờ, nếu bạn cần nút sao chép vào khay nhớ tạm trên một trang khác, bạn có thể sử dụng lại bộ điều khiển đó. Thêm data-* các thuộc tính trên đánh dấu để mọi thứ hoạt động.

Đi lang thang

Thật không may, chúng tôi chưa biết nhiều về Strada. Nhưng nó sẽ cho phép ứng dụng web giao tiếp (và có thể thực hiện các hành động) với ứng dụng gốc bằng cách sử dụng thuộc tính cầu nối HTML.

Cách sử dụng Hotwire trong ứng dụng Ruby on Rails của bạn

Tôi không muốn dành quá nhiều thời gian để thảo luận về việc cài đặt Hotwire hoặc trường hợp sử dụng cơ bản. Nhóm Hotwire đã thực hiện rất xuất sắc điều đó trong bản ghi hình Hotwire của họ. Để biết hướng dẫn đầy đủ, hãy xem turbo-rails cài đặt và cài đặt Kích thích.

Hãy đi thẳng vào một số trường hợp sử dụng Hotwire phổ biến.

Cuộn giấy vô tận

Sử dụng Turbo Frames, chúng ta có thể dễ dàng tạo một trang có tính năng phân trang tự động khi người dùng cuộn. Để làm được điều này, chúng ta cần làm hai việc:

1. Hiển thị mỗi "trang" bên trong khung riêng của nó bằng cách thêm số trang vào id khung (ví dụ:turbo_frame_tag "posts_#{@posts.current_page}" ).
2. Sử dụng lazy khung cho trang tiếp theo để nó không tự động tải trừ khi nó được hiển thị.

Lưu ý rằng ví dụ này sử dụng các phương thức từ Kaminari, nhưng bạn có thể điều chỉnh nó cho phù hợp với bất kỳ phương pháp phân trang nào khác.

Chúng tôi không cần bất cứ điều gì đặc biệt trong bộ điều khiển. Một index tiêu chuẩn phương pháp hoạt động:

Mẹo ở đây là chúng ta sử dụng các khung lồng nhau, với khung cho trang tiếp theo được lồng bên trong khung của trang trước. Bằng cách đó, khi trang đầu tiên tải, khung của trang tiếp theo sẽ được đặt ở cuối. Khi người dùng cuộn đến khung đó, nó sẽ được thay thế bằng nội dung của trang thứ hai. Khung lười cho trang thứ ba hiển thị ở cuối.

Biểu mẫu động

Bạn có thể dễ dàng triển khai các biểu mẫu động bằng Hotwire mà không cần logic tùy chỉnh để chuyển đổi các trường ở giao diện người dùng. Điều này phức tạp hơn một chút so với trường hợp sử dụng cuộn vô tận vì nó bao gồm việc sử dụng cả Turbo Stream và Stimulus.

Trước tiên hãy bắt đầu với biểu mẫu của chúng tôi.

Biểu mẫu đủ đơn giản — chúng tôi hiển thị kind chọn với News và Blog options.Chúng tôi muốn thay đổi giá trị của các danh mục có sẵn dựa trên loại được chọn (giả sử rằng categories_for_kind(@post.kind) trả về danh sách các danh mục cho loại nhất định).

Nếu để ý kỹ hơn, bạn sẽ thấy rằng chúng tôi đã thêm một số thuộc tính dữ liệu vào biểu mẫu. data-target sẽ liên kết phần tử biểu mẫu với RefreshFormController form của Bộ điều khiển Kích thích target.Và data-action với giá trị là change->refresh-form#refreshForm sẽ gọi tới refreshForm phương pháp trên Bộ điều khiển kích thích được liên kết mỗi khi kind lựa chọn đã thay đổi.

Hãy xem Bộ điều khiển kích thích của chúng tôi:

Trên tất cả refreshForm cuộc gọi, chúng tôi chỉ thực hiện một PUT mới yêu cầu tới URL của bộ điều khiển (được đặt bằng data-refresh-form-url trên cùng một phần tử có data-controller="refresh-form" ).Phần quan trọng ở đây là responseKind được đặt thành turbo-stream .@rails/request thư viện hiểu phản hồi này và thực hiện các hướng dẫn dựa trên luồng phản hồi.

Bây giờ tất cả những gì còn lại là trả về luồng chính xác từ refresh_form của chúng tôi kêu gọi Turbo hiểu và cập nhật biểu mẫu của chúng tôi.

Chỉ cần cập nhật các thuộc tính trên bài đăng và đánh dấu rằng bạn muốn phản hồi bằng turbo_stream định dạng (để nó tra cứu refresh_form.turbo_stream.erb ).

Trong bước này, chúng tôi đang sử dụng lại form của mình một phần, gói nó bên trong turbo_stream với replace hành động.

Và đó là tất cả những gì bạn cần để biểu mẫu động hoạt động. Tôi biết điều này có vẻ hơi nâng cao, nhưng refresh bộ điều khiển kích thích là một phần được chia sẻ mà giờ đây bạn có thể sử dụng cho tất cả các biểu mẫu động của mình bằng cách thêm data-* chính xác thuộc tính. Về cơ bản, bây giờ bạn có thể làm mới biểu mẫu động phía máy chủ mà không cần viết bất kỳ JS mới nào cho các biểu mẫu khác. Khá tuyệt vời phải không?

Thêm nội dung vào các trang mà không cần tải lại

Trường hợp sử dụng tiếp theo mà Hotwire thực hiện dễ dàng là truyền phát HTML qua kết nối WebSocket và cập nhật một trang có nội dung mới khi nó xuất hiện. Một ví dụ điển hình về điều này là phần nhận xét GitHub. Bạn có thể thực hiện điều này rất dễ dàng bằng cách sử dụng Turbo Streams.

Có hai phần ở đây.

Đầu tiên, chúng tôi nhúng trình nghe luồng turbo trên trang danh sách để mở kết nối WebSocket tới máy chủ và lắng nghe các sự kiện.

Tiếp theo, chúng tôi cập nhật mô hình để phát các nhận xét mới lên luồng.

Bạn không cần bất cứ điều gì khác. Turbo sẽ tự động hiển thị app/views/comments/_comment.html.erb một phần cho mỗi nhận xét mới và gửi nó qua kết nối WebSocket. Nó sẽ được JS của Turbo chọn và thêm vào mục tiêu với id comments .

Hãy đi trước một bước và thêm chỉ báo cho tất cả nhận xét mới được thêm bằng Bộ điều khiển kích thích nhỏ.

Đầu tiên, sửa đổi chương trình phát sóng và comment một phần để bao gồm bộ điều khiển có điều kiện.

Bộ điều khiển Kích thích nhỏ này thêm một lớp đánh dấu đặc biệt vào kết nối trong 3 giây rồi xóa nó.

Lưu ý :Bạn cũng cần cập nhật phần tô sáng CSS dựa trên sự hiện diện của lớp đó.

Sau khi bộ điều khiển này hoàn tất, bạn có thể sử dụng lại nó trên bất kỳ thứ gì yêu cầu lớp đánh dấu. Bạn thậm chí có thể sửa đổi nó để lấy thời lượng và tên lớp từ các thuộc tính dữ liệu nếu bạn cần sự linh hoạt đó.

Đó là điều tuyệt vời về Hotwire — bạn phải mất một chặng đường dài và không cần phải nhúng tay vào JS. Khi bạn cần viết một số JS, Stimulus sẽ cung cấp cho bạn các công cụ để xây dựng các bộ điều khiển chung nhỏ có thể tái sử dụng.

Tóm lại và đọc thêm

Cộng đồng Rails thực sự hào hứng với sự ra mắt của Hotwire và đúng như vậy.

Trong bài đăng này, chúng tôi đã xem xét các thành phần chính của Hotwire và cách sử dụng Hotwire trong ứng dụng Rails của bạn. Chúng tôi đã đề cập đến cách bạn có thể làm cho ứng dụng của mình trở nên sống động bằng cách sử dụng Turbo và Stimulus.

Phần giới thiệu video màn hình Hotwire chính thức và tài liệu Turbo là những nơi tuyệt vời để xem Hotwire và Turbo có thể làm gì cho bạn.

Để sử dụng nâng cao, tôi khuyên bạn nên truy cập kho lưu trữ GitHub của turbo-rails. Đáng buồn thay, tài liệu hơi thưa thớt, nhưng nếu bạn không sợ bẩn tay, hãy đọc mã và nhận xét nội tuyến trong:

1. Turbo::FramesHelper dành cho Khung Turbo .
2. Turbo::Broadcastable để phát tới Dòng Turbo từ mã.
3. Turbo::Streams::TagBuilder để phát tới Dòng Turbo như một phần của hành động của bộ điều khiển nội tuyến.

Chúc bạn viết mã vui vẻ!

Tái bút. Nếu bạn muốn đọc các bài đăng của Ruby Magic ngay khi chúng được đăng tải, hãy đăng ký nhận bản tin Ruby Magic của chúng tôi và không bao giờ bỏ lỡ một bài đăng nào!

Sapan Diwakar

Tác giả khách mời Sapan Diwakar của chúng tôi là một nhà phát triển full-stack. Anh ấy viết về sở thích của mình trên blog và là người rất yêu thích việc giữ mọi thứ đơn giản trong cuộc sống cũng như trong lập trình. Khi không làm việc với công nghệ, anh ấy thích dành thời gian trong vườn, đi bộ đường dài quanh rừng và chơi thể thao ngoài trời.

Tất cả bài viết của Sapan Diwakar