htmz - framework HTML siêu nhỏ gọn

 (leanrada.com)
21 điểm bởi GN⁺ 2024-02-21 | 3 bình luận | Chia sẻ qua WhatsApp
  • Một microframework HTML theo phong cách tối giản, cho phép tạo giao diện web mô-đun và động theo cách đơn giản như HTML thuần
  • Chỉ làm đúng một việc: có thể tải tài nguyên HTML từ mọi phần tử trên trang
    • Nhờ cho phép chỉ cập nhật một phần của trang, nó có thể thay thế các mảnh của trang
  • Tổng kích thước chỉ 166 byte, chỉ dùng HTML thuần, không có dependency, không cần JS bundle hay backend, cũng không cần thuộc tính đặc biệt, DSL hoặc custom element
  • Tương tác với DOM thực, không dùng VDOM, click listener, AJAX, fetch v.v.
  • Chỉ cần thêm một đoạn HTML inline dạng iframe là xong
<iframe hidden name=htmz onload="setTimeout(()=>document.querySelector(this.contentWindow.location.hash||null)?.replaceWith(...this.contentDocument.body.childNodes))"></iframe>

Cách dùng cơ bản

  • Để dùng htmz, cần một hyperlink (hoặc form) có thuộc tính href trỏ tới URL tài nguyên (hoặc action của form) và bộ chọn ID đích.
  • Trông giống như đang tái sử dụng URL fragment làm bộ chọn ID đích, và đúng là như vậy, vì trong ngữ cảnh này URL fragment không được dùng cho mục đích khác nên có thể tái sử dụng.

Chính xác thì nó làm gì?

  • htmz cung cấp một chức năng duy nhất: cho phép tải tài nguyên HTML vào bên trong bất kỳ phần tử nào trên trang.
  • Ý tưởng này không mới; việc chia một trang web thành các phần có thể được tải lại độc lập đã tồn tại từ giữa những năm 1990.
  • htmz là sự khái quát hóa của HTML frame, có thể tải tài nguyên HTML vào từ bất kỳ phần tử nào trong trang.

Cách dùng nâng cao

  • Hiện tại trong HTML5, chỉ có phần tử a và form mới có thể chỉ định đích và gọi htmz.
  • Có thể dùng phần tử base để đặt htmz làm đích mặc định cho mọi liên kết tương đối.
  • Nếu muốn dùng đúng giá trị đích thực tế, có thể dùng một mẹo cho phép viết bộ chọn ID đích ngay trong thuộc tính target.

Scripting / Tương tác

  • Nếu cần tương tác nhiều hơn, có thể dùng JavaScript, ngôn ngữ scripting đồng hành với htmz.
  • htmz không loại trừ việc viết JS hay dùng thư viện UI, và với htmz vẫn có thể gửi giá trị form dưới dạng HTTP form thông thường.

Khả năng mở rộng

  • Nếu cần selector nâng cao, xử lý lỗi, nhiều đích v.v., nhà phát triển có thể tự mở rộng theo nhu cầu.

FAQ

  • htmz là một iframe có tên là htmz, và được gọi bằng cách tải URL thông qua iframe đó.
  • htmz hoạt động như một proxy target, chuyển tiếp phản hồi đến đích đã chỉ định.
  • htmz không liên tục parse DOM, không tìm kiếm thuộc tính hay cú pháp đặc biệt, cũng không gắn listener vào DOM.
  • htmz là một microframework HTML, chỉ dùng lượng JS tối thiểu.
  • htmz là một snippet, viết tắt của 'Html with Targeted Manipulation Zones'.
  • Dự án này bắt đầu như một phản ứng với htmx, đồng thời là một thử nghiệm xem liệu có thể triển khai chức năng load-link-target trên web hiện tại mà không dùng htmx hay không.
  • Dù rất nhỏ gọn, htmz vẫn tạo cảm giác mạnh mẽ; hạn chế chính là mỗi phản hồi chỉ có thể có một đích duy nhất.

Ý kiến của GN⁺

  • Cách tiếp cận đổi mới: htmz mang đến một cách tiếp cận mới mẻ trong phát triển web, giảm bớt sự phức tạp của framework và xây dựng giao diện web bằng HTML thuần. Điều này đồng nghĩa với một phương thức phát triển web mà ngay cả kỹ sư phần mềm mới vào nghề cũng dễ tiếp cận.
  • Sự kết hợp giữa hiệu năng và tính đơn giản: kích thước cực nhẹ 166 byte cùng cấu trúc không dependency có thể cải thiện đáng kể hiệu năng trang web. Đồng thời, nó mang lại sự đơn giản để tạo ra các trang web hiệu quả mà không cần học những framework JavaScript phức tạp.
  • Tương lai của phát triển web: htmz đem đến một góc nhìn thú vị về tương lai của phát triển web. Nó cho thấy sự tiến hóa của các tiêu chuẩn và công nghệ web có thể mang lại cho lập trình viên những công cụ đơn giản và hiệu quả hơn như thế nào.

Bài viết liên quan

3 bình luận

 
joyfui 2024-03-06

Wow, cái này mới lạ thật nhé haha. Ở link còn tự nói rằng bản thân nó không phải là library hay framework gì cả, mà chỉ là một snippet thôi... hehe
 
savvykang 2024-02-21

Cách dùng nâng cao: trong HTML5 hiện tại, có vẻ chỉ các phần tử và là không áp dụng escaping HTML Có vẻ việc escaping HTML chưa được áp dụng
 
GN⁺ 2024-02-21
Ý kiến trên Hacker News

  • Tóm tắt bình luận đầu tiên:

    • Phản hồi tích cực với ý tưởng dùng iframe được đặt tên và form có target cho các trang render phía máy chủ và widget có phạm vi style.
    • Có vẻ htmz đã triển khai tốt ý tưởng này.
    • Nhấn mạnh không nên từ bỏ ý tưởng hay, mà cần tập trung vào độ hoàn thiện và sự xuất sắc, đồng thời truyền đạt ý tưởng thật tốt.
    • Được đánh giá là một màn hack tuyệt vời cho thấy trình duyệt có thể cung cấp SPA theo mặc định.
    • Một màn trình diễn ấn tượng từ người thực sự hiểu rõ nền tảng.
    • Cho rằng web thuần nên đơn giản và mạnh mẽ.
    • Đánh giá tích cực về việc tận dụng tối đa những gì web vốn có.
    • Khen ngợi khả năng giao tiếp và marketing của tác giả.

  • Tóm tắt bình luận thứ hai:

    • Một cách hack cho thấy trình duyệt có thể cung cấp SPA theo mặc định.
    • Chỉ cần thêm vài thuộc tính là có thể tránh dùng iframe.
    • Có thể hữu ích hơn trong việc chứng minh luận điểm hơn là như một công cụ thực tế.
    • Chỉ ra rằng nó quá phức tạp so với những gì htmx cung cấp.

  • Tóm tắt bình luận thứ ba:

    • Chia sẻ kinh nghiệm phát triển ứng dụng email client dựa trên HTML vào khoảng năm 2001.
    • Dùng iframe ẩn để tải dữ liệu từ máy chủ và thao tác DOM.
    • Khi đó hỗ trợ trình duyệt chưa đủ tốt, nhưng cơ chế cơ bản là giống nhau.
    • Đánh giá tích cực việc nó được triển khai dưới dạng một gói gọn gàng mà không cần nhiều thư viện.
    • Có thể phù hợp với phần lớn trường hợp sử dụng hơn so với các framework frontend như React đang được dùng nhiều hiện nay.

  • Tóm tắt bình luận thứ tư:

    • Khẳng định mạnh mẽ rằng việc thay thế DOM bằng phản hồi nên trở thành một phần của nền tảng.
    • Đề xuất như một bước đầu tiên về một phần tử có thể tải nội dung bên ngoài vào trang theo cách khai báo.
    • Nhắc rằng HTML nên hỗ trợ các phần tử có thể trở thành đích của liên kết.

  • Tóm tắt bình luận thứ năm:

    • Khen đây là màn trình diễn ấn tượng của người thực sự hiểu nền tảng.
    • Dù khả năng dùng thực tế có thể thấp, nhưng vẫn được đánh giá là rất xuất sắc.

  • Tóm tắt bình luận thứ sáu:

    • Đề xuất bỏ this. trong inline event listener để giảm thêm kích thước mã.
    • Đưa ra mẹo tiết kiệm 10 byte trong snippet.

  • Tóm tắt bình luận thứ bảy:

    • Chỉ ra rằng việc dùng target có thể khiến nó không suy giảm duyên dáng như htmx khi JS bị vô hiệu hóa.
    • Thể hiện góc nhìn mang tính lý tưởng về tình huống JS bị tắt.

  • Tóm tắt bình luận thứ tám:

    • Chỉ ra rằng việc tái sử dụng phần tử <slot> theo cách này là một ý tưởng tồi.
    • Trong trình duyệt, <slot> có hành vi rất đặc thù, và dù thư viện làm gì thì nó cũng bị thay thế bằng các phần tử con của host element.
    • Nhắc rằng phần tử <output> đã tồn tại cho kiểu tình huống này.

  • Tóm tắt bình luận thứ chín:

    • Chỉ ra rằng phần demo cần được cải thiện.
    • Khi nhấp vào "tab" để đổi mã ví dụ, sự kiện history được thêm vào nhưng URL không được cập nhật.
    • Chỉ trích việc tuyên bố là "chỉ đơn thuần HTML" trong khi lại vi phạm các quy tắc cơ bản của web/UX.

  • Tóm tắt bình luận thứ mười:

    • Gợi nhớ đến sự tương đồng với pjax, vốn dùng XHR thay vì iframe và mặc định dùng pushState để nút quay lại hoạt động.