Turbolinks, một công cụ tuyệt vời giúp điều hướng ứng dụng web của bạn nhanh hơn, không còn được phát triển tích cực nữa. Nó đã được thay thế bởi một khung mới có tên là Turbo, là một phần của ô Hotwire.
Nhóm đằng sau nó hiểu rằng những thứ khác có thể áp dụng các khái niệm tương tự được trích xuất từ Turbolinks để tuân thủ web nhanh hơn, chẳng hạn như khung, gửi biểu mẫu và ứng dụng gốc.
Bài viết này nhằm mục đích cung cấp hướng dẫn cho khung Turbo, công cụ thay thế mới cho Turbolinks, bao gồm hướng dẫn di chuyển thực tế sẽ giải thích cách sử dụng các phần Turbolinks quan trọng và được sử dụng phổ biến nhất trong Turbo.
Để hiểu rõ hơn những gì chúng ta sẽ nói đến, điều cần thiết là phải có một số kiến thức về Turbolinks. Bạn có thể đọc thêm về nó ở đây và ở đây.
Giới thiệu Turbo
Turbo là tập hợp một số kỹ thuật để tạo các ứng dụng web hiện đại và nhanh chóng với ít JavaScript hơn. Nó làm như vậy bằng cách cho phép máy chủ xử lý tất cả logic sẽ được phân phối dưới dạng HTML trực tiếp đến trình duyệt. Đổi lại, trách nhiệm duy nhất của trình duyệt là xử lý HTML thuần túy.
Để làm được điều này, Turbo tự chia thành bốn phần chính:
- Turbo Drive , trung tâm của Turbo, tránh tải lại toàn bộ trang thông qua việc tự động chặn tất cả các nhấp chuột vào liên kết và biểu mẫu của bạn, ngăn trình duyệt gọi nó, thay đổi URL qua API Lịch sử, yêu cầu trang ẩn thông qua Ajax và hiển thị phản hồi một cách thích hợp.
- Khung Turbo xử lý các tập hợp con / khung của trang bằng cách sáng tạo lại cách các nhà phát triển front-end xử lý các khung để xử lý các tập con của một trang một cách độc lập. Nó phân tách các trang thành các nhóm ngữ cảnh độc lập với các phạm vi riêng biệt và khả năng tải chậm.
- Luồng Turbo giúp thay thế các bản cập nhật từng phần phổ biến của trang thông qua phân phối không đồng bộ qua các ổ cắm web bằng một bộ thẻ vùng chứa CRUD đơn giản. Với chúng, bạn có thể gửi các đoạn HTML qua cùng một cổng web và yêu cầu trang hiểu và xử lý lại giao diện người dùng.
- Turbo Native cung cấp tất cả các công cụ cần thiết để đối phó với Turbo trong các ứng dụng web được nhúng cho các shell gốc nếu bạn đang sử dụng phiên bản gốc trên iOS / Android.
Thiết lập dự án
Để giúp đẩy nhanh tiến độ, tôi đã quyết định cung cấp cho bạn một dự án ứng dụng Rails sẵn sàng sử dụng với luồng biểu mẫu bài đăng có khung được nhúng bên trong nó, cùng với Bootstrap để tạo kiểu.
Điều này sẽ giúp bạn không mất thời gian thiết lập mọi thứ, cũng như cung cấp cho bạn một dự án hoạt động với các Turbolinks tự động được thêm vào. Nếu bạn đã có một dự án của riêng mình, điều đó cũng ổn; bạn vẫn có thể theo dõi bài viết.
Bạn cũng có thể tạo một ứng dụng Rails có cấu trúc mới với rails lệnh.
Bạn có thể tìm thấy liên kết GitHub của kho lưu trữ tại đây. Đảm bảo sao chép cục bộ và chạy lệnh bundle install để cài đặt tất cả các phụ thuộc Rails.
Khi mọi thứ đã thiết lập xong, hãy khởi động máy chủ Rails qua rails s ra lệnh và kiểm tra /posts URI, như được hiển thị bên dưới:
Bài đăng CRUD trong Rails
Để xem các tính năng của Turbolinks đang hoạt động, chỉ cần điều hướng qua các liên kết để tạo bài đăng mới hoặc hiển thị một mục. Bạn sẽ thấy rằng URL thay đổi mà không cần tải lại trang.
Các bước di chuyển
Hãy bắt đầu với việc cài đặt gói Node thích hợp. Vì bạn không cần turbolinks nữa , chúng ta có thể chỉ cần xóa nó khỏi danh sách Node của mình và thêm phần phụ thuộc turbo-rails, như được hiển thị trong hai lệnh bên dưới:
yarn remove turbolinks
yarn add @hotwired/turbo-rails
Một cách tuyệt vời khác để đảm bảo mọi thứ được cài đặt đúng cách, nếu bạn đang làm việc với Rails, là chạy lệnh sau:
rails turbo:install
Điều này sẽ cài đặt Turbo thông qua npm nếu Webpacker được cài đặt trong ứng dụng. Lệnh này cũng cố gắng xóa tất cả các phụ thuộc cũ của Turbolinks khỏi dự án của bạn trong trường hợp bạn bỏ lỡ điều gì đó.
Sau đó, mở app / javascript / pack / application.js tập tin và định vị các dòng mã sau:
import Turbolinks from "turbolinks";
Turbolinks.start();
Lưu ý rằng quá trình nhập có thể thay đổi một chút tùy thuộc vào phiên bản ứng dụng Rails của bạn (các phiên bản cũ hơn được sử dụng require thay vì import ). Tuy nhiên, quá trình này giống nhau cho cả hai.
Sau đó, thay thế chúng bằng những thứ tương ứng sau:
import "@hotwired/turbo-rails";
Có, chỉ một lần nhập duy nhất; không cần phải bắt đầu bất cứ thứ gì theo cách thủ công. Turbo phiên bản được tự động gán cho window.Turbo đối tượng khi nhập, dễ quản lý hơn.
Để kiểm tra và xem liệu chúng ta có đang tìm kiếm Turbo chứ không phải Turbolinks nữa hay không, hãy thêm đoạn mã sau vào cuối tệp:
$(document).on("turbolinks:load", () => {
console.log("turbolinks!");
});
$(document).on("turbo:load", () => {
console.log("turbo!");
});
Sau khi tải lại trang trong trình duyệt của bạn, hãy kiểm tra nhật ký bảng điều khiển để xem những gì được in:
Kiểm tra nhật ký sự kiện tải Turbo
Có một thay đổi khác mà chúng tôi cần thực hiện đối với app / views / layouts / application.html.erb , về cơ bản là thay đổi các thuộc tính dữ liệu Turbolinks cũ thành tương đương của Turbo. Tìm hai thẻ bằng cách sử dụng data-turbolinks-* và thay thế chúng bằng các thuộc tính sau:
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbo-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbo-track': 'reload' %>
Điều này sẽ rất quan trọng để cho phép Turbo tự động theo dõi tất cả các nội dung đã nhập trong head gắn thẻ và đảm bảo tải lại chúng trong trường hợp chúng thay đổi. Điều này áp dụng cho tất cả các tệp, bao gồm tất cả các tập lệnh và kiểu bạn đã thêm vào đó.
Khám phá các tính năng của Turbo
Vì Turbo tự động chặn tất cả các liên kết trong ứng dụng của bạn để gọi chúng mà không cần tải lại, ví dụ:nếu bạn cần tắt chức năng đó cho một liên kết cụ thể, bạn phải viết mã này một cách rõ ràng.
Hãy kiểm tra bằng cách cập nhật nút “Bài đăng mới” trong app / views / posts / index.html.erb tập tin vào phần sau:
<%= link_to 'New Post', new_post_path, :class => "btn btn-primary btn-sm", "data-turbo" => "false" %>
Lưu ý rằng chúng tôi đang thêm thuộc tính dữ liệu mới data-turbo một cách rõ ràng , để yêu cầu Turbo không tìm kiếm liên kết cụ thể này khi nó được nhấp vào.
Nếu bạn tải lại ứng dụng của mình và nhấp vào nút “Bài đăng mới”, bạn sẽ thấy rằng trang hiện đang tải lại hoàn toàn như thường xảy ra trong các ứng dụng thông thường.
Đó cũng là một cách tuyệt vời để kiểm tra xem Turbo có được thiết lập và hoạt động trong ứng dụng của bạn hay không.
Điều này cũng xảy ra với các biểu mẫu của bạn. Turbo tự động xử lý tất cả các lần gửi biểu mẫu, vì vậy chúng diễn ra không đồng bộ. Nếu bạn muốn tắt nó cho biểu mẫu trong app / views / posts / _form.html.erb tệp, bạn nên thay đổi nút gửi thành sau:
<div class="actions">
<%= form.submit class: "btn btn-primary btn-sm", "data-turbo" => false %>
</div>
Tải lại ứng dụng và thử nghiệm! Bạn sẽ thấy hành vi tương tự khi tạo một bài đăng mới.
Gửi biểu mẫu
Nói về các biểu mẫu, Turbo xử lý chúng theo cách rất giống với các liên kết. Tuy nhiên, không phải lúc nào yêu cầu biểu mẫu cũng kết thúc thành công.
Hãy xem nó trong thực tế! Trước tiên, hãy thêm một số xác thực để chuyển name của bài đăng và title thuộc tính bắt buộc. Đối với điều này, hãy mở app / models / post.rb và thay đổi nó thành như sau:
class Post < ApplicationRecord
validates :name, presence: true
validates :title, presence: true
end
Tải lại ứng dụng và thử thêm bài đăng mới ngay bây giờ, để trống tất cả các trường. Bạn sẽ lưu ý rằng không có gì xảy ra. Nếu bạn kiểm tra bảng điều khiển trình duyệt của mình, bạn sẽ thấy một cái gì đó giống như sau:
Phản hồi của biểu mẫu phải chuyển hướng đến một vị trí khác
Để khắc phục điều đó, chúng tôi có hai cách tiếp cận khả thi. Việc đầu tiên bao gồm thêm status cho từng hành động có thể cập nhật của bộ điều khiển bài đăng (POST, PUT, v.v.) và làm cho nó nhận đối tượng thực thể không thể xử lý làm giá trị của nó.
Dưới đây, bạn có thể tìm thấy các thay đổi mã cho cả create và update ( post_controller.rb ) phương pháp:
# def create
format.html { render :new, status: :unprocessable_entity }
# def update
format.html { render :edit, status: :unprocessable_entity }
Lưu các chỉnh sửa của bạn và kiểm tra lại biểu mẫu. Bạn sẽ thấy rằng các lỗi được hiển thị chính xác lần này:
Hiển thị lỗi xác thực trong giao diện người dùng
Cách thứ hai để thực hiện việc này là qua turbo_frame_tag . Trong một ứng dụng Rails sử dụng Turbo, các Khung Turbo mà chúng ta đã nói đến được hiển thị bằng thẻ này.
Đó là một tài nguyên tuyệt vời khi bạn muốn tách một phần trang của mình và mở một đường hầm trực tiếp bằng ứng dụng phụ trợ để Turbo có thể đính kèm các yêu cầu và phản hồi vào khung cụ thể này.
Để kiểm tra, trước tiên, bạn cần bao gồm toàn bộ nội dung của _ form.html.erb tệp trong thẻ này:
<%= turbo_frame_tag post do %>
...
<% end %>
Bài đăng ở đó vì những lý do rõ ràng trong trường hợp biểu mẫu. Khi bạn quay lại trình duyệt của mình và kiểm tra lại, các lỗi xác thực tương tự sẽ hiển thị như mong đợi.
Một điều thú vị khác cần lưu ý ở đây là HTML được tạo cho biểu mẫu đó. Hãy xem:
<turbo-frame id="new_post">
<form action="/posts" accept-charset="UTF-8" method="post">
...
</form>
</turbo-frame>
Phần tử HTML tùy chỉnh này là cách Turbo phân biệt khung với các hành động trên toàn trang.
Thanh tiến trình
Thông thường, khi bạn xóa cơ chế tải mặc định của trình duyệt, bạn sẽ cung cấp một cơ chế khác cho các trường hợp trang tải chậm.
Turbo đã cung cấp một thanh tiến trình dựa trên CSS được tích hợp sẵn ở đầu trang, rất giống với những thanh được cung cấp bởi các thư viện lớn như Bootstrap và Material Design.
Nó được đặt để chỉ hiển thị khi các yêu cầu mất hơn 500 mili giây để xử lý, điều này không đủ lâu cho dự án thử nghiệm của chúng tôi.
Nếu bạn sẵn sàng thay đổi kiểu hoặc thậm chí xóa hoàn toàn, bạn có thể sử dụng .turbo-progress-bar Lớp CSS, như được hiển thị bên dưới:
.turbo-progress-bar {
height: 15px;
background-color: gold;
}
Để kiểm tra, bạn cần giảm độ trễ của thanh tiến trình trong application.js tệp với mã sau:
window.Turbo.setProgressBarDelay(1);
Thời gian được cung cấp tính bằng mili giây. Dưới đây, bạn có thể tìm thấy biểu diễn kiểu được cập nhật cho thanh tiến trình.
Hiển thị thanh tiến trình đã cập nhật
Kết thúc
Còn nhiều điều cần thảo luận về Turbo và các tính năng tuyệt vời của nó, chẳng hạn như Luồng và mô-đun Gốc. Tuy nhiên, để giữ cho bài viết tập trung, chúng tôi sẽ tuân theo các bước ban đầu này.
Như mọi khi, tôi không thể tránh đề xuất Sổ tay Turbo chính thức, vì nó rất hữu ích khi tôi bắt đầu với toàn bộ quá trình di chuyển này. Ở đó, bạn sẽ tìm thấy tất cả các tài liệu bạn cần để đối phó với các điều kiện đặc biệt mà dự án của bạn yêu cầu.
Ví dụ:nếu ứng dụng của bạn đang sử dụng Devise, rất có thể bạn sẽ cần một số bản điều chỉnh. May mắn thay, nhóm Turbo đã cung cấp một hướng dẫn tuyệt vời về chủ đề này để giúp bạn giải đáp những thắc mắc nhỏ nhất về Devise với Turbo.