Xây dựng trang web siêu nhanh với Hotwire: Tạm biệt việc tải lại trang

Hotwire https://hotwired.dev/ đơn giản hóa phát triển web bằng cách gửi các cập nhật HTML nhỏ để tải trang nhanh như chớp và mang lại trải nghiệm người dùng mượt mà. Bộ khung ba phần này (Turbo, Stimulus, Strada) cung cấp các trang web nhanh hơn, sử dụng ít dữ liệu hơn và có cảm giác giống như ứng dụng, rất lý tưởng cho mạng xã hội, thương mại điện tử và bất kỳ trang web nào cần cập nhật theo thời gian thực.

Hotwire là gì?

Hotwire là một cách mới thú vị để xây dựng các trang web khiến chúng trở nên nhanh hơn và mượt mà hơn. Nó là viết tắt của "HTML Over The Wire" và tất cả là về việc gửi các đoạn HTML nhỏ từ máy chủ đến trình duyệt web của bạn thay vì toàn bộ trang.
Đây là cách nó hoạt động:

• Bạn nhấp vào một nút hoặc liên kết trên trang web.
• Thay vì tải lại toàn bộ trang, chỉ phần cần thay đổi được cập nhật.
• Điều này diễn ra siêu nhanh, khiến trang web có cảm giác giống như một ứng dụng di động.

Hotwire có ba phần chính

Turbo

Tăng tốc tải trang và gửi biểu mẫu.

Ví dụ: Hãy tưởng tượng bạn nhấp vào nút "Like" trên một bài viết blog.
Không có Turbo:

• Toàn bộ trang tải lại
• Chậm, sử dụng nhiều dữ liệu hơn

Có Turbo:

• Chỉ số lượt thích được cập nhật
• Nhanh, sử dụng ít dữ liệu hơn

Mã Ruby (Rails controller):

def like
  @post = Post.find(params[:id])
  @post.increment!(:likes_count)
  
  respond_to do |format|
    format.turbo_stream { render turbo_stream: turbo_stream.update("likes_count", @post.likes_count) }
  end
end

Stimulus

Thêm tính tương tác vào HTML của bạn với một chút JavaScript.

Ví dụ: Một menu thả xuống hiển thị/ẩn khi được nhấp vào.

HTML:

<div data-controller="dropdown">
  <button data-action="click->dropdown#toggle">Menu</button>
  <div data-dropdown-target="menu" class="hidden">
    <a href="#">Item 1</a>
    <a href="#">Item 2</a>
  </div>
</div>

JavaScript (Stimulus controller):

import { Controller } from "stimulus"

export default class extends Controller {
  static targets = [ "menu" ]

  toggle() {
    this.menuTarget.classList.toggle("hidden")
  }
}

Strada

Giúp các ứng dụng web hoạt động tốt hơn với các ứng dụng di động.

Ví dụ: Chia sẻ nội dung từ ứng dụng web của bạn lên mạng xã hội.

• Web: Sử dụng hộp thoại chia sẻ tiêu chuẩn
• Ứng dụng di động: Sử dụng các tính năng chia sẻ gốc

Lợi ích chính

• Trang web nhanh hơn: Các trang cập nhật ngay lập tức
• Sử dụng ít dữ liệu hơn: Chỉ gửi HTML cần thiết
• Trải nghiệm mượt mà hơn: Cảm giác giống như ứng dụng gốc
• Dễ dàng phát triển: Mã đơn giản hơn, vòng lặp phát triển nhanh hơn

Tại sao sử dụng Hotwire thay vì AJAX?

Hotwire đơn giản hóa phát triển bằng cách giảm mã JavaScript, đảm bảo hiệu suất tốt hơn và cung cấp trải nghiệm người dùng liền mạch với ít phức tạp hơn so với AJAX.

Mặc dù Ajax cũng có thể đạt được chức năng tương tự, nhưng Hotwire mang lại một số lợi thế riêng biệt:

Sự đơn giản

• Hotwire yêu cầu ít mã JavaScript hơn so với Ajax.
• Nó hoạt động trực tiếp với HTML được render từ máy chủ, giảm độ phức tạp.

Hiệu suất

• Hotwire được tối ưu hóa để gửi các đoạn HTML nhỏ, có thể giảm kích thước tải.
• Nó bao gồm bộ nhớ đệm trang tự động và prefetching.

Progressive enhancement

• Hotwire hoạt động mà không cần JavaScript, cải thiện khả năng truy cập.
• Các trang web hoạt động giảm dần một cách êm thấm trên các trình duyệt cũ hơn.

Trải nghiệm giống ứng dụng gốc

• Cung cấp các chuyển đổi mượt mà giữa các trạng thái.
• Mang lại cảm giác giống như ứng dụng mà không cần xây dựng một ứng dụng đơn trang (SPA) hoàn chỉnh.

Năng suất của nhà phát triển

• Cho phép các nhà phát triển backend tạo trải nghiệm tương tác mà không cần kiến thức sâu rộng về JavaScript.
• Tích hợp liền mạch với các framework phía server như Ruby on Rails.

Giảm tải cho máy chủ

• Cập nhật trang một phần có thể ít tốn kém cho máy chủ hơn so với tải lại toàn bộ trang.

Thực tiễn tốt nhất tích hợp

• Bao gồm các mẫu để xử lý gửi biểu mẫu, chuyển hướng và cập nhật trang ngay từ đầu.

Mặc dù Ajax rất mạnh mẽ, Hotwire hướng đến việc đơn giản hóa quy trình phát triển và cải thiện hiệu suất theo mặc định. Nó đặc biệt có lợi trong các hệ sinh thái như Ruby on Rails, nơi nó được tích hợp sâu.

Tuy nhiên, việc lựa chọn giữa Hotwire và Ajax phụ thuộc vào nhu cầu cụ thể của dự án, chuyên môn của đội ngũ và technology stack hiện có của bạn.

Hotwire lý tưởng cho

• Nền tảng mạng xã hội. Ví dụ: Ứng dụng chia sẻ ảnh giống như Instagram
  • Khi người dùng thích một bức ảnh, số lượt thích được cập nhật ngay lập tức mà không cần tải lại trang.
  • Các bình luận xuất hiện trong thời gian thực khi người dùng đăng chúng.
  • Bảng tin làm mới với các bài viết mới mà không làm gián đoạn việc cuộn của người dùng.
• Trang web thương mại điện tử. Ví dụ: Cửa hàng quần áo trực tuyến
  • Tình trạng sản phẩm cập nhật theo thời gian thực khi các mặt hàng hết hàng.
  • Thêm mặt hàng vào giỏ không cần tải lại trang.
  • Giá và tổng số tiền được tính toán ngay lập tức khi thay đổi số lượng.
• Hệ thống quản lý nội dung. Ví dụ: Trang web tin tức
  • Lượt xem bài viết và số lượt chia sẻ được cập nhật trực tiếp.
  • Phần bài viết liên quan làm mới dựa trên lịch sử đọc của người dùng mà không cần tải lại trang.
  • Các phần bình luận cập nhật theo thời gian thực khi có bình luận mới.
• Bất kỳ trang web nào cần cập nhật theo thời gian thực. Ví dụ: Trình theo dõi điểm số thể thao trực tiếp
  • Điểm số trò chơi cập nhật ngay lập tức khi thay đổi.
  • Thống kê của cầu thủ làm mới theo thời gian thực trong trận đấu.
  • Bảng tin bình luận trực tiếp cập nhật mà không cần làm mới trang thủ công.

Bắt đầu với Hotwire trong bất kỳ framework nào https://hotwire.io/frameworks

Bằng cách áp dụng Hotwire, các nhà phát triển có thể xây dựng các trang web hiện đại, phản hồi và hấp dẫn, cuối cùng dẫn đến người dùng hài lòng hơn và sự hiện diện trực tuyến thành công hơn.