Tại sao bạn nên chọn HTMX cho dự án phụ dựa trên web tiếp theo của mình - và bỏ qua MPA cũ kỹ và SPA phức tạp

Tôi xây dựng rất nhiều dự án bên cạnh, vì vậy tôi luôn tìm kiếm các công nghệ và mô hình cho phép tôi xây dựng chúng nhanh hơn và rẻ hơn với chất lượng tương tự. Trong vài tháng qua, tôi đã thử nghiệm xây dựng ứng dụng web với các công cụ low-js như HTMX và Alpine.

Trong bài viết này, tôi sẽ chia sẻ lý do tại sao tôi nghĩ HTMX là một lựa chọn tuyệt vời để xây dựng ứng dụng web nhanh hơn và rẻ hơn, và tại sao nó hiện nay là một phần cốt lõi trong công nghệ của tôi - The HAM Stack.

MPA vs SPA
MPA vs SPA

Ứng dụng Đa Trang (MPA)
Trong những ngày đầu, chúng tôi có các Ứng dụng Đa Trang (MPA).

Mỗi URL dẫn đến một trang web
Trang web này được hiển thị phía máy chủ và gửi trở lại cho người dùng
Nếu bạn cần cập nhật điều gì đó trên trang ( vì một người dùng thay đổi điều gì đó hoặc trang cần làm mới ) thì toàn bộ trang cần phải tải lại.
Điều này hoạt động tốt nhưng mang lại cảm giác rất chậm chạp / cồng kềnh vì bạn cần phải tải lại MỌI THỨ mỗi khi có một điều gì đó trên trang thay đổi. Một ví dụ cho điều này - hãy nghĩ đến một trang web của chính phủ tiểu bang, hầu hết trong số đó vẫn là MPAs kiểu cũ và chúng cảm thấy cũ kỹ và cồng kềnh so với hầu hết các ứng dụng hiện đại.

Ưu và nhược điểm của MPA

Ưu điểm: Dễ dàng xây dựng
Nhược điểm: Cảm giác chậm và cồng kềnh do việc làm mới.
Ứng dụng một trang (SPA)
Để giải quyết điều này, Ứng dụng Một trang (SPA) đã được tạo ra.

Một URL tải một khối lượng JS lớn chứa một loạt logic ứng dụng
JS này đảm nhận việc render trang
Nó sử dụng trạng thái nội bộ để xác định trang nên trông như thế nào và thực hiện chuyển dữ liệu trong nền, vì vậy nó chỉ cần cập nhật những phần của trang cần thay đổi.
Điều này mang lại cảm giác tốt hơn cho người dùng vì các thay đổi cảm thấy nhanh hơn. Trang chỉ cập nhật những nơi cần thiết và chúng ta không cần làm mới toàn bộ trang để thay đổi dữ liệu. Hầu hết các ứng dụng / trang web ngày nay đều cảm thấy như vậy vì nó thường cung cấp trải nghiệm người dùng tốt hơn.

Ưu điểm: Trải nghiệm người dùng "hiện đại" phong phú
Nhược điểm: Phức tạp khi mở rộng - xử lý các chuyển dữ liệu (graphQL được xây dựng cho điều này), các trừu tượng và kích thước tải trọng logic ứng dụng.
Vì vậy, nói chung:

Ứng dụng đa trang (MPA) - Dễ xây dựng nhưng khó có được trải nghiệm người dùng "hiện đại" phong phú
Ứng dụng một trang (SPA) - Phức tạp để xây dựng nhưng có thể đạt được trải nghiệm người dùng "hiện đại" phong phú
MPA vs HTMX vs SPA
MPA vs HTMX vs SPA

Cảm hứng hình ảnh từ u/Abhilash26 trên r/htmx.

HTMX đã xuất hiện được vài năm nhưng thực sự đã thu hút được sự quan tâm lớn trong khoảng một năm qua. Sự quan tâm này không phải là không có căn cứ - nó thường cho phép bạn xây dựng các ứng dụng web hiện đại nhanh hơn và rẻ hơn so với một SPA.

HTMX về cơ bản mở rộng HTML để nó có thể thực hiện tải lại một phần trang.

Bất kỳ phần tử nào có thể chỉ định cách thức nó có thể truy xuất dữ liệu cập nhật và khi nào nó nên làm như vậy.
Phần tử sau đó có thể chỉ định phải làm gì với dữ liệu mới - thay thế chính nó hoặc các phần tử khác trên trang
Nếu chúng ta nhìn lại sự so sánh giữa MPA và SPA, chúng ta có thể thấy rằng việc thiếu các tải lại trang một phần thực sự là điều chính kìm hãm MPAs. Vì vậy, việc thêm khả năng này vào một MPA phần lớn cho phép bạn có được hầu hết những trải nghiệm người dùng "hiện đại" phong phú của một SPA với mức độ phức tạp của một MPA.

HTMX cho Dự án Bên
Mục tiêu của một dự án phụ thường chỉ là xây dựng nó. Có thể bạn không có một đội ngũ kỹ sư hoặc một kho tiền đầu tư mạo hiểm để làm điều đó - chỉ có bạn và máy tính của bạn.

Vì vậy, việc giảm chi phí xây dựng - về thời gian và tiền bạc - là rất quan trọng để làm cho một dự án phụ trở nên thành công.

Theo quan điểm của tôi, HTMX cung cấp một sự cân bằng tuyệt vời giữa việc cho phép bạn xây dựng các ứng dụng hiện đại với độ phức tạp rất thấp ( và do đó là chi phí thời gian và tiền bạc ). Do đó, nó đã trở thành một phần cốt lõi trong công nghệ của tôi - HAM Stack.

Tiếp theo
Md Saidur Rahman