Một nhà phát triển đã chia sẻ hành trình từ việc áp dụng HTMX đến tạo ra framework riêng có tên MESH (Modular Element SSR with Hydration), làm nổi bật những cuộc tranh luận đang diễn ra về các phương pháp tốt nhất trong phát triển web hiện đại. Câu chuyện này tiết lộ cả tiềm năng và hạn chế của các giải pháp HTML-over-the-wire khi xây dựng các ứng dụng tương tác phức tạp.
 |
|---|
| Một nhà phát triển đang suy ngẫm về sự phát triển của các công nghệ web, cân nhắc sự cân bằng giữa tính đơn giản và phức tạp trong các ứng dụng hiện đại |
Vấn đề cấu trúc của HTMX dẫn đến giải pháp mới
Nhà phát triển ban đầu yêu thích triết lý của HTMX về việc làm nhiều hơn với các thuộc tính HTML thay vì JavaScript, nhưng nhanh chóng xác định được điều họ coi là một lỗ hổng quan trọng. Họ mô tả HTMX như jQuery khai báo và lo lắng về sự phức tạp mã không thể tránh khỏi sẽ xuất hiện nếu không có cấu trúc được thực thi. Mối quan tâm này đã thúc đẩy họ thử nghiệm với phương pháp riêng của mình nhằm duy trì các lợi ích của HTMX trong khi bổ sung kỷ luật tổ chức mà họ cảm thấy đang thiếu.
MESH hoạt động trên một nguyên tắc đơn giản: một component bằng một endpoint. Thiết kế này cho phép các nhà phát triển viết mã backend HTML-first có cảm giác tương tự như xây dựng Single Page Application (SPA), nhưng với các lợi ích của server-side rendering. Framework sử dụng Declarative Shadow DOM và custom elements để tạo ra các component modular có thể được cập nhật độc lập.
Lưu ý: Server-side rendering (SSR) có nghĩa là các trang web được xây dựng trên server trước khi được gửi đến trình duyệt, thay vì được lắp ráp bởi JavaScript trong trình duyệt.
Các tính năng chính của MESH Framework:
- Kiến trúc một component = một endpoint
- Render phía server với hydration phía client
- Sử dụng Declarative Shadow DOM để đóng gói component
- Cập nhật out-of-band thông qua Server-Sent Events (SSE)
- Được xây dựng bằng Go và templating Templ
Cộng đồng chia rẽ về độ phức tạp của Framework
Phản ứng của cộng đồng nhà phát triển tiết lộ sự phân chia cơ bản trong triết lý phát triển web. Một số nhà phát triển đánh giá cao tính linh hoạt của HTMX và cho rằng việc thêm cấu trúc sẽ làm mất đi mục đích của nó. Những người khác chia sẻ những thất vọng tương tự với khả năng mở rộng của HTMX cho các ứng dụng phức tạp. Một thành viên cộng đồng lưu ý rằng HTMX hoạt động tốt nhất cho các ứng dụng đa trang truyền thống nhưng gặp khó khăn với các tính năng tương tác cao như chức năng kéo và thả.
Cuộc thảo luận cũng làm nổi bật các phương pháp thay thế đang được chú ý. Một số nhà phát triển đề cập đến Phoenix LiveView và Blazor như những giải pháp trưởng thành hơn cho các giao diện điều khiển từ server. Những framework này cung cấp các lợi ích tương tự như HTMX nhưng với các cấu trúc có quan điểm rõ ràng hơn mà một số nhà phát triển ưa thích cho các dự án lớn hơn.
Các Framework Thay Thế Được Đề Cập:
- Phoenix LiveView ( Elixir ) - Giao diện thời gian thực được điều khiển từ server
- Blazor ( C ) - Có thể biên dịch thành WebAssembly hoặc chạy phía server
- Datastar - Phương pháp ưu tiên SSE được xây dựng bởi kỹ sư Go
- Leptos ( Rust ) - Biên dịch thành WASM với hiệu suất tốt hơn Blazor
Những thách thức kỹ thuật thúc đẩy sự đổi mới
Việc triển khai MESH đã gặp phải những trở ngại kỹ thuật đáng kể, đặc biệt là với tính tương thích Shadow DOM. HTMX không hoạt động tự nhiên qua các ranh giới shadow root, buộc nhà phát triển phải tạo ra các giải pháp JavaScript tùy chỉnh. Trải nghiệm này minh họa một thách thức rộng lớn hơn trong phát triển web: cân bằng giữa mong muốn có các công nghệ đơn giản, tiêu chuẩn với nhu cầu về các tính năng tương tác phức tạp.
HTMX để lại cho nhà phát triển việc áp đặt kỷ luật lên mã của họ, theo cách họ thấy phù hợp.
Hiện tượng mệt mỏi với framework tiếp tục thúc đẩy việc thử nghiệm. Trong khi một số nhà phát triển chỉ trích việc tạo ra thêm một framework nữa, những người khác đánh giá cao việc khám phá các phương pháp khác nhau cho cùng những vấn đề cơ bản. Cuộc thảo luận tiết lộ rằng nhiều nhà phát triển đang tìm kiếm các giải pháp kết hợp lợi ích của server-side rendering với tính tương tác phía client mà không có độ phức tạp của các framework JavaScript truyền thống.
Những hạn chế của HTMX đã được xác định:
- Thiếu cấu trúc mã được thực thi nghiêm ngặt cho các ứng dụng phức tạp
- Không thể vượt qua ranh giới Shadow DOM mà không cần các giải pháp thay thế
- Hành vi hoán đổi innerHTML mặc định có thể không phù hợp với tất cả các trường hợp sử dụng
- Yêu cầu các giải pháp tùy chỉnh để giao tiếp giữa các component với nhau
Nhìn về tương lai
MESH đại diện cho nỗ lực của một nhà phát triển nhằm tìm ra điểm cân bằng giữa sự đơn giản của HTMX và cấu trúc cần thiết cho các ứng dụng phức tạp. Liệu nó có được chấp nhận rộng rãi hay không vẫn còn phải xem, nhưng dự án này làm nổi bật sự phát triển liên tục trong các phương pháp phát triển web. Cuộc thảo luận cộng đồng cho thấy rằng các công cụ khác nhau hoạt động tốt hơn cho các trường hợp sử dụng khác nhau, và việc tìm kiếm giải pháp phát triển web hoàn hảo tiếp tục thúc đẩy sự đổi mới và thử nghiệm.
Tham khảo: MESH: I tried HTMX, then ditched it