Rails for Beginners: Turbolinks and Problems

Chào các bạn! Hôm nay mình sẽ chia sẽ với các bạn về Turbolinks Đã có nhiều bài viết nói về Turbolinks rồi, nhưng mình muốn truyền đạt tới các bạn New Members mới tham gia vào cộng đồng Ruby on Rails (RoR) một cách nhanh chóng và đỡ vã nhất. Các bạn có đóng góp bổ sung (chỉnh sửa) gì có thể liên lạc với mình qua email hoặc comment phía dưới.

1. Giới thiệu

Như câu đầu đề Homepage của Gem này mở đầu như sau:

"Turbolinks makes navigating your web application faster" - Trích từ HomePage của Turbolinks

Turbolinks giúp cho việc di chuyển giữa các page trong trang web của bạn nhanh hơn.

2. Cơ chế hoạt động

Làm sao trang web của chúng ta nhanh hơn khi áp dụng turbolinks. Lý do là vì sau khi áp dụng turbolink thì khi các bạn click vào một link nào đó thuộc trang web của mình (links to the same domain), thì nó sẽ chỉ load lại phần body và merge header lại. Ở trong các tutorial các bạn thường thấy javascript hay css của các page hay để trong file common (chẳng hạn như application.js hay custom.scss…), đều đó thật không tốt. Nhưng nếu áp dụng turbolinks thì cũng chỉ mất có 1 lần tải lúc access vào trang thôi, nên các lần sau page load càng nhanh. (khi bạn để con trỏ trên ô URL và ENTER, hay Ctrl + F5 thì nó sẽ load lại tất cả resource của page đấy nhé, không có dùng cơ chế của turbolinks nữa).

3. Phương pháp install

Khi bạn new 1 project mới thì nó đã tự động được add vào Gemfile rồi, nên không cần thêm dòng gem sau đây vào Gemfile gem "turbolinks" Và, cũng có sẵn require file javascript trong app/assets/javascripts/application.js //= require turbolinks

Cách tốt nhất để tránh các problems là bạn remove nó khỏi Gemfile ngay khi tạo project và bỏ dòng require khỏi file application.js. Sau đó, hãy viết js và css ra từng file theo màn hình, đừng bỏ tất cả vào file common nữa.

4. Xử lý problems thường gặp khi sử dụng turbolinks.

1. Cách khắc phụ phổ thông: Trước hết nếu gặp các vấn đề về turbolinks thì hãy xoá nó đi, đừng dùng turbolinks nữa.

2. Còn sau đây cách fix cho từng trường hợp nếu bạn muốn giữ lại gem turbolinks

Hiện tượng: Các function javascript trong $(document).ready(function() {...}) và $(window).on("load", function(){...}) không hiệu nghiệm, không chạy. Nguyên nhân: Vì dùng turbolinks (nó không load lại page khi di chuyển trang, nên hàm trên không được chạy, khi dùng turbolinks thì cơ chế load page kiểu ajax, gọi ajax để thay thế body và merge header thôi) Cách đối ứng: a) Chuyển sang dùng $(document).on('turbolinks:load', function() {...})

b) Sử dụng gem jquery-turbolinks, chi tiết các bạn xem ở Home page của Gem này.

c) Nếu bạn chỉ muốn disable turbolinks cho một link nào đó thì bạn sử dụng data-turbolinks="false"

• Ví dụ:

<%= link_to new_admin_category_word_path(category), "data-turbolinks": false do %>
    <%= t :add_a_word %>
<% end %>

<%= link_to t(".cancel"), admin_employees_path, data: {turbolinks: false} %>

Có thể để data-turbolinks="false" ở thẻ cha, thì các link bên trong cũng sẽ bị disable turbolinks

<div data-turbolinks="false">
  <%= link_to new_admin_category_word_path(category),
    class: "btn btn-success btn-xs" do %>
    <span class="glyphicon glyphicon-plus-sign"></span>
    <%= t :add_a_word %>
  <% end %>
  <%= link_to [:admin, category], class: "btn btn-info btn-xs" do %>
    <span class="glyphicon glyphicon-eye-open"></span>
    <%= t :details %>
  <% end %>
</div>

5. Kết

Bạn nên cân nhắc sử dụng turbolinks, vì nếu không mang nhiều lợi ích thì nó sẽ không được chọn default gem khi tạo project đâu. Nên hãy hiểu rõ nó rồi đưa ra quyết định sử dụng hay không sử dụng, disable hay không disable. Hy vọng bài viết này giúp ích cho các bạn mới làm quen về RoR.

Website đã tham khảo:

1. https://github.com/turbolinks/turbolinks