Htmx là gì và nó có thể đơn giản hóa trang web của tôi như thế nào?

Maya Patel included in Programming Web Development Javascript Html

2024-01-22 2006 words 10 minutes

Contents

Đường dẫn nhanh

⭐Htmx là gì?

⭐Cách bạn có thể sử dụng htmx trong ứng dụng web đơn giản

⭐Lợi ích và hạn chế của htmx

Bài học chính

Htmx là một thư viện JavaScript cải tiến được thiết kế để hợp lý hóa quy trình quản lý các yêu cầu HTTP thông qua việc sử dụng các thuộc tính HTML tiện lợi, cung cấp cho người dùng quyền truy cập đơn giản vào các chức năng thường được sử dụng trong lĩnh vực này.

Việc kết hợp tập lệnh htmx trong ứng dụng web của bạn được tạo điều kiện thuận lợi bằng cách kết hợp siêu liên kết hướng đến phiên bản được lưu trữ của tập lệnh trên Mạng phân phối nội dung (CDN).

Việc sử dụng htmx cho phép các khả năng điều hướng liền mạch như phân trang, xác thực biểu mẫu và chỉnh sửa theo thời gian thực trong ứng dụng của bạn mà không yêu cầu phải viết bất kỳ mã JavaScript nào.

Cuộc thảo luận gần đây trong cộng đồng phát triển web về htmx đã thu hút được sự quan tâm, tuy nhiên bản chất thực sự của nó vẫn tương đối đơn giản. Tuy nhiên, bất chấp sự đơn giản của nó, tiện ích và tác động tiềm tàng của htmx đã tạo ra tiếng vang đáng kể.

##Htmx là gì?

Htmx là một khung JavaScript phức tạp tập trung vào một bộ chức năng cụ thể, cho phép truy cập thuận tiện vào các khả năng đó thông qua các thuộc tính HTML. Một minh họa thô sơ có thể được tìm thấy dưới đây:

 <a href="/about" hx-get="/about">About</a>

Mã được cung cấp thể hiện việc sử dụng thuộc tính HTML được tùy chỉnh, cụ thể là “hx-get”. Khi được nhấp vào, thư viện htmx tạo điều kiện thực hiện yêu cầu AJAX, dẫn đến việc tải trang web được nhắm mục tiêu một cách liền mạch mà không phải làm mới hoàn toàn nội dung của trình duyệt.

Ngoài chức năng chính, HTMX còn có một tính năng tùy chọn cho phép người dùng gửi yêu cầu thông qua giao diện được chỉ định.

Được chế tạo tỉ mỉ từ những nguồn vượt ra ngoài ranh giới thông thường của sự tồn tại thông thường, những sáng tạo của chúng tôi vượt qua những điều trần tục để đạt được những đỉnh cao phi thường.

Trong tất cả các trường hợp không liên quan đến việc nhấp chuột hoặc gửi, điều quan trọng là phải lưu ý đến chúng.

Việc kết hợp các phương thức giao thức HTTP ngoài các phương pháp GET và POST thông thường là một phương pháp được khuyến nghị để nâng cao chức năng và bảo mật của ứng dụng web.

Thay vì thay thế toàn bộ trang web, một số công cụ có khả năng cập nhật các phần hoặc thành phần cụ thể bên trong trang web đó.

Mặc dù Tiện ích mở rộng phương tiện HTML5 (HTMX) hỗ trợ các công nghệ tiên tiến như hoạt ảnh CSS và WebSockets, nhưng nó chủ yếu tập trung vào việc hợp lý hóa quy trình quản lý các yêu cầu HTTP.

Cách bạn có thể sử dụng htmx trong ứng dụng web đơn giản

HTMX tập trung vào các chức năng cụ thể được tìm thấy trong các ứng dụng web và trang web, trái ngược với việc bao gồm hoạt động tổng thể của một ứng dụng hoàn chỉnh.

Một tính năng đáng chú ý của thư viện này là tính đơn giản trong việc bắt đầu sử dụng. Người dùng có tùy chọn tải xuống và cài đặt một bản sao theo ý mình; tuy nhiên, vì nó thiếu bất kỳ sự phụ thuộc bên ngoài nào nên việc thêm tham chiếu đến tập lệnh thông qua Mạng phân phối nội dung (CDN) là đủ để bắt đầu:

 <script
  src="https://unpkg.com/[email protected]"
  integrity="sha384-D1Kt99CQMDuVetoL1lrYwg5t\+9QdHe7NLX/SoJYkXDFfX37iInKRy5xLSi8nO7UC"
  crossorigin="anonymous"></script>

giao thức không đáp ứng được các yêu cầu AJAX.

Một ví dụ đơn giản sử dụng cuộn vô hạn

Ví dụ này có sẵn để tải xuống trên kho lưu trữ GitHub của chúng tôi, nơi cung cấp vị trí thuận tiện và dễ tiếp cận để lấy các tệp cần thiết để triển khai.

Cuộn vô hạn là một chiến lược phổ biến được các nền tảng như Twitter sử dụng để tạo điều kiện cho trải nghiệm duyệt web liên tục. Khi một người duyệt qua một danh sách, khi đạt đến đỉnh điểm, cuộn vô hạn sẽ tự động truy xuất các mục bổ sung để xem xét liền mạch.

Việc sử dụng JavaScript là cần thiết để xác định vị trí cuộn hiện tại của trang web và cập nhật động nội dung của trang web mà không cần tải lại toàn bộ trang, đó chính xác là những gì htmx được thiết kế để thay mặt bạn thực hiện.

Hãy xem xét việc trình bày một loạt các mục, trong đó mỗi mục được kèm theo một yếu tố trực quan dưới dạng hình ảnh:

 <ol>
    <li><img src="http://placekitten.com/420/300" /></li>
    <li><img src="http://placekitten.com/400/320" /></li>
    <li><img src="http://placekitten.com/440/300" /></li>
    <li><img src="http://placekitten.com/420/340" /></li>
    <li><img src="http://placekitten.com/300/200" /></li>
</ol>

Hãy xem xét tình huống trong đó bạn sở hữu nhiều tệp chứa thông tin về nhiều chủ đề khác nhau, chẳng hạn như “feed1.html”, “feed2.html”, v.v. Các tệp này được thiết kế để hiển thị chế độ xem hạn chế về nội dung tương ứng của chúng, cho phép người dùng cuộn qua chúng để biết thêm chi tiết.

Một giải pháp thay thế là sử dụng các liên kết “trang tiếp theo” để điều hướng giữa các trang; tuy nhiên, việc triển khai cơ chế cuộn vô hạn cũng là một lựa chọn khả thi. Để đạt được điều này, chỉ cần sửa đổi phần tử cuối cùng trong khối mã như sau:

 <li hx-trigger="revealed" hx-get="feed2.html" hx-select="li" hx-swap="afterend">
    <img src="http://placekitten.com/300/200" />
</li>

Việc kết hợp bốn đặc điểm này sẽ dẫn đến việc triển khai chức năng cuộn vô hạn cho một mục danh sách. Cho phép tôi làm sáng tỏ ý nghĩa tương ứng của chúng:

Thuộc tính

Giá trị

Nghĩa

—|—|—

kích hoạt hx

tiết lộ

Khi phần tử này xuất hiện lần đầu trên màn hình…

hx-get

nguồn cấp dữ liệu2.html

Thật vậy, một yêu cầu HTTP GET sẽ được gửi đi để truy xuất nội dung của “feed2.html”.

hx-chọn

lý

Truy xuất các phần tử trong phản hồi bằng cách sử dụng chiến lược lựa chọn nhắm mục tiêu vào các thành phần HTML cụ thể này.

trao đổi hx

sau cùng

… và thêm chúng sau phần tử này.

Khi một người đi qua kho lưu trữ, điều đáng chú ý là trang web sẽ tải lại dữ liệu bổ sung một cách liền mạch. Điều này có thể được xác minh bằng cách kiểm tra thanh cuộn và kiểm tra các công cụ phát triển của trình duyệt để kiểm tra thêm.

Thật vậy, điều đáng chú ý là trong cấu hình trang web cơ bản này, tệp “feed2.html” kết hợp phần tử kết luận chứa thuộc tính “hx-get” hướng tới “feed3.html” và tương tự, các lần lặp tiếp theo sẽ dẫn đến các liên kết trỏ tương ứng đến các trang tiếp theo. Ngoài ra, điều đáng nói là HTMX đã triển khai một cách chu đáo trình xử lý sự kiện cuộn để nâng cao trải nghiệm người dùng.

Các ứng dụng tiềm năng khác của htmx

Đối với nhiều tương tác tiêu chuẩn khác nhau, chẳng hạn như những tương tác thường gặp trong cuộc sống hàng ngày, HTMX có thể áp dụng và linh hoạt.

Quá trình cập nhật nội dung thông qua việc sử dụng phân trang bao gồm việc tải và thay thế các thành phần trang khi người dùng tương tác với các liên kết phân trang, đảm bảo điều hướng liền mạch giữa các trang khác nhau trong khi vẫn duy trì chức năng và trình bày trực quan nhất quán trên tất cả các phiên bản của trang web.

Khi gửi biểu mẫu, bạn nên hiển thị thông báo xác nhận hoặc hiển thị phiên bản thu gọn của biểu mẫu gốc. Quá trình này được gọi là"xác nhận mẫu".

Có thể đạt được cập nhật định kỳ cho giá trị của thanh tiến trình bằng cách sử dụng phản hồi ping làm cơ sở để xác định trạng thái tiến trình của nó.

Quá trình chỉnh sửa nội tuyến bao gồm việc thay thế một phần tử HTML cụ thể trên trang web bằng trường nhập văn bản, chứa nội dung hoặc giá trị của phần tử được thay thế. Điều này cho phép người dùng chỉnh sửa và sửa đổi nội dung trực tiếp trong ngữ cảnh của trang web mà không cần phải điều hướng khỏi nó.

Bằng cách sử dụng JavaScript tiêu chuẩn, việc xây dựng tất cả các phiên bản đó là khả thi. Tuy nhiên, htmx đơn giản hóa quá trình này một cách đáng kể.

Lợi ích và hạn chế của htmx

Những lợi ích

HTMX có khả năng hợp lý hóa đáng kể các tác vụ định kỳ trong các ứng dụng và trang web khác nhau bằng cách cung cấp phương tiện đơn giản hóa để thêm chức năng mà không cần kiến thức sâu rộng về JavaScript. Tính năng này đặc biệt có lợi cho những người tham gia vào việc tạo hoặc quản lý các trang web giao diện người dùng, vì nó giúp họ giảm bớt nhu cầu thành thạo ngôn ngữ lập trình này.

Thông qua quá trình khái quát hóa, HTMX tạo điều kiện thuận lợi cho sự thống nhất giữa các công việc khác nhau và giữa chúng. Hoạt động cuộn vô hạn vẫn nhất quán trên tất cả các trang, bất kể nhà phát triển nào đã giới thiệu nó.

Trọng tâm chính của chức năng của HTMX nằm ở việc thúc đẩy cách tiếp cận khai báo, trái ngược với cách tiếp cận bắt buộc, do đó mang lại khả năng hiểu và lập luận logic dễ dàng hơn.

Nhược điểm

Mặc dù HTMX cung cấp một cách thuận tiện để bỏ qua việc sử dụng JavaScript trong nhiều tình huống khác nhau nhưng đó không phải là liều thuốc chữa bách bệnh giải quyết mọi vấn đề. Điều quan trọng là phải nhận ra rằng sẽ có những trường hợp cần phải lập trình tùy chỉnh để giải quyết các quy tắc kinh doanh cụ thể và các chức năng cấp thấp hơn.

Việc sử dụng HTMX cho nhiều tác vụ khác nhau có nghĩa là nó xử lý hầu hết các khía cạnh chức năng, từ đó hạn chế mức độ mà người dùng có thể điều chỉnh hành vi của nó theo yêu cầu cụ thể của họ. Mặc dù điều này có thể được coi là một sự thỏa hiệp có lợi trong nhiều trường hợp, nhưng điều cần thiết là phải thừa nhận rằng việc từ bỏ quyền kiểm soát đối với một số yếu tố nhất định là cố hữu của việc áp dụng các giải pháp hợp lý như vậy.

HTML cung cấp khả năng sử dụng JavaScript mà không cần viết nó một cách rõ ràng, tuy nhiên, điều quan trọng là phải nhận ra rằng mã JavaScript hoạt động bí mật ở chế độ nền. Người ta có thể bị lôi kéo sử dụng thuộc tính “hx-get” trên mỗi siêu liên kết thay vì sử dụng thuộc tính “href” thông thường. Tuy nhiên, cách tiếp cận này thiết lập sự phụ thuộc vào JavaScript; bất kỳ lỗi nào trong việc thực thi tập lệnh sẽ khiến người dùng có liên kết không hoạt động. Để tránh những tình huống khó khăn như vậy, việc thực hành nâng cao lũy tiến rất được khuyến khích.