Thay thế JavaScript chỉ bằng HTML

• Giới thiệu các cách mới nhất để thay thế những chức năng phụ thuộc JS trên web bằng HTML/CSS
• Tận dụng các phần tử chuẩn như details·summary, datalist, popover để triển khai accordion, tự động hoàn thành, modal và điều hướng off-screen
• Cách tiếp cận này giúp giảm tải xuống, đánh giá và mức dùng bộ nhớ, từ đó cải thiện hiệu năng và trải nghiệm người dùng
• Với từng chức năng đều có kèm ví dụ CodePen, tài liệu MDN và thông tin tương thích trình duyệt
• Chỉ dùng JS ở những phần thật sự cần thiết và tích cực tận dụng các khả năng đã phát triển của HTML/CSS

---

Thay thế chức năng JS bằng HTML và CSS

• Trong thời gian dài, JavaScript đã đảm nhiệm những chức năng mà HTML và CSS không thể triển khai
  • Tuy nhiên, khi khả năng của HTML và CSS ngày càng mở rộng, một số chức năng của JS nay có thể được thay thế bằng công nghệ web native
• Vì JS cần được tải xuống, giải nén, đánh giá và duy trì trong bộ nhớ, nên việc chuyển những chức năng có thể làm được sang HTML/CSS là hiệu quả hơn
• Bài viết đưa ra định hướng: để JS tập trung vào logic phức tạp, còn phần điều khiển UI đơn giản thì giao cho HTML/CSS

Accordion / bảng nội dung mở rộng

• Có thể triển khai accordion mà không cần JS bằng các phần tử details và summary
  • Có thể nhấp để mở và đóng nội dung, đồng thời dùng thuộc tính open để đặt trạng thái mặc định
  • Khi dùng cùng một thuộc tính name, chỉ một bảng được mở
• Cũng có thể tạo kiểu bằng CSS hoặc điều khiển trạng thái mở/đóng bằng JS
• Tài liệu liên quan: tài liệu MDN về details, ví dụ CodePen, bảng tương thích trình duyệt

Ô nhập gợi ý tự động hoàn thành

• Kết hợp input và datalist để triển khai dropdown tự động lọc
  • Khi nhập, danh sách gợi ý sẽ tự động được lọc
  • Hỗ trợ nhiều kiểu nhập khác nhau ngoài văn bản như number, time
• Firefox hiện chỉ hỗ trợ các kiểu nhập dựa trên văn bản, và có hạn chế về khả năng truy cập trên di động
• Tài liệu liên quan: tài liệu MDN về datalist, hướng dẫn SitePoint, bảng tương thích trình duyệt

Modal / popover

• Có thể triển khai modal và popover không cần JS bằng thuộc tính popover và popovertarget
  • Cung cấp ba chế độ: auto, hint, manual
  • auto sẽ đóng khi nhấp bên ngoài hoặc nhấn ESC, còn manual chỉ đóng khi thao tác thủ công
• Firefox và iOS không hỗ trợ chế độ hint
• Tài liệu liên quan: tài liệu MDN về popover, blog Chrome, ví dụ CodePen, video về accessibility

Điều hướng / nội dung off-screen

• Có thể tận dụng tính năng popover để triển khai menu điều hướng off-screen
  • Dùng phần tử nav để mang ý nghĩa ngữ nghĩa, và dùng CSS translate để di chuyển vào/ra màn hình
  • Sẽ đóng khi nhấp bên ngoài, và có thể đặt đóng thủ công bằng popover="manual"
  • Có thể dùng pseudo-element ::backdrop để làm nền bán trong suốt
• Tài liệu liên quan: MDN Popover API, blog Chrome, ví dụ CodePen

Kết luận

• Thừa nhận sức mạnh của JS, nhưng chỉ nên dùng ở nơi cần thiết
• Với sự phát triển gần đây của HTML/CSS, nhiều lựa chọn thay thế không cần JS đã xuất hiện
• Có thể xem thêm ví dụ trong bài blog của tác giả “Replace JS with No-JS or Lo-JS Options”
• Nhấn mạnh việc giảm thiểu JS và tối ưu hiệu năng để cải thiện trải nghiệm người dùng

[labeldock]

Những thử nghiệm kiểu này đôi khi giúp tôi tự nhìn lại xem mình có đang over-engineering hay không, nhưng từ góc nhìn công việc thực tế với nhiều yêu cầu phong phú thì nó gần như chỉ là một màn biểu diễn kỹ năng.

[skageektp]

Có thể triển khai accordion mà không cần JS bằng các phần tử ** và **

Có vẻ như nội dung đã bị cắt mất rồi

[xguru]

Đã chỉnh sửa rồi~!

[shakespeares]

Rõ ràng là có những giới hạn, và một khi AI được kích hoạt.. liệu có cần phải làm kiểu refactoring này không? Bạn đã cân nhắc những phần như chặn nội dung JS chưa?

[GN⁺]

Ý kiến trên Hacker News

• Thật tiếc là tác giả không đưa tất cả ví dụ vào inline
  Nếu thay vì chỉ đặt link CodePen mà chèn trực tiếp các ví dụ thay thế HTML ngay trên trang thì có lẽ bài viết đã thuyết phục hơn nhiều
  • Hoàn toàn đồng ý. Nhiều khi bấm vào mấy thứ kiểu FooMaker v1.0 thì lại không thấy ví dụ dùng thông thường đâu, chỉ toàn ca ngoại lệ kỳ quặc
  • Ban đầu tôi còn tưởng đây là bài từ 25 năm trước. Mấy ảnh GIF dithered đúng kiểu hoài cổ luôn
  • Tôi cũng thấy bứt rứt vì không có ví dụ inline, nhưng nếu đây là một bài blog khách mời thì cũng phần nào hiểu được
• Tiềm năng của thẻ <details> / <summary> thực sự rất lớn
  Có thể làm được gần như mọi thứ, nhưng đa số thư viện component lại bỏ qua nó
  Không cần cả thuộc tính aria và khả năng truy cập cũng có sẵn mặc định
  • Trước đây nhược điểm là tìm kiếm bằng cmd+f không tìm được văn bản bên trong details đang đóng, nhưng giờ có thể xử lý bằng thuộc tính hidden="until-found" và event
  • Tuy vậy, phần xử lý animation vẫn khá khó. Trình duyệt không hỗ trợ sẵn transition cho việc chuyển đổi display
  • Tìm bằng ctrl+f cũng có tính năng tự động mở details
  • <details> còn hoạt động trên các trang dùng Markdown như GitHub. Có thể gấp các log dài lại để đăng cho gọn gàng
  • Cũng có thể làm bằng CSS thuần. Ví dụ trong tài liệu Go101 có thể bấm dấu “+” để mở rộng. Ngoài ra còn có demo tab panel. Đây là minh chứng cho sức mạnh của Modern CSS
• Điểm cốt lõi không phải là “no JavaScript”, mà là HTML vốn đã xử lý được nhiều tính năng bị lãng quên (form, dialog, validation, navigation, v.v.)
  Khi viết cuốn “You Don’t Need JavaScript”, điều tôi nhận ra là JS trong nhiều trường hợp chỉ đang bổ trợ các khả năng sẵn có của nền tảng hơn là thêm tính năng hoàn toàn mới
  • Mong là sẽ có thêm nhiều cuốn sách như vậy. Điều cần thiết là sách tập trung vào giải quyết vấn đề, chứ không chỉ dạy framework
  • Trước đây hỗ trợ trình duyệt còn kém nên lập trình viên phải tạo đường vòng, rồi dần dần chúng lại thành chuẩn ngầm. Gần đây tốc độ ra mắt tính năng CSS nhanh hơn nhiều, đến cả bố cục masonry cũng đã vào giai đoạn thử nghiệm
• Phần lớn tính năng HTML đều rất tốt, nhưng <input> và <datalist> thì chưa đủ để dùng thực tế
  Người dùng kỳ vọng những thứ như chấp nhận lỗi gõ, văn bản phụ trợ, UX di động, nhưng datalist lại không đáp ứng được
  • Điều bất tiện nhất là trong datalist không thể tách phần văn bản hiển thị với giá trị thực tế (value)
  • Trong đa số trường hợp select phù hợp hơn, nhưng select lại không có chức năng tìm kiếm
  • Style mặc định quá thô và xấu
  • Trên Android thì dropdown thậm chí còn không hiện ra
  • Mỗi thiết bị lại hoạt động khác nhau nên cuối cùng vẫn phải thêm JS. Chỉ với HTML thì sẽ rơi vào địa ngục tương thích
• Gần đây tôi đã đi phỏng vấn nhiều vị trí frontend, nhưng họ vẫn chỉ đánh giá kỹ năng JS xoay quanh React
  Hầu như không ai quan tâm đến việc dùng HTML đúng ngữ nghĩa hay khả năng truy cập
  • Nếu team dùng React thì người thích làm việc trực tiếp với DOM API có thể bị loại vì không hợp với team
  • Dùng file CSS riêng thì component sạch sẽ hơn nhiều. Tailwind không tệ, nhưng tôi không muốn dùng nó trong phỏng vấn
  • Ngoài HN ra thì gần như không có mấy người quan tâm đến chủ nghĩa thuần HTML
• Việc chỉ gắn link CodePen mà không đưa ví dụ trực tiếp lên trang khiến tôi thấy khó chịu
  Bài viết nói về “làm bằng HTML thôi” mà lại phụ thuộc vào dịch vụ bên ngoài thì nghe hơi mâu thuẫn
  • Cá nhân tôi thấy cũng ổn. CodePen tiện cho bookmark và tô sáng cú pháp. Chỉ là có rủi ro link rot
  • Dù vậy, giá mà họ cung cấp cả ví dụ inline lẫn link CodePen thì tốt hơn
  • Nhấn mạnh HTML thuần mà lại bắt tải UI CodePen nặng 2MB thì đúng là một nghịch lý về UX
• Tôi đang mong chờ tính năng select có thể tùy biến sắp ra mắt
  Nó đang ở WHATWG stage 3 và có vẻ có thể thay thế phần triển khai dropdown bằng JS vốn ác mộng bấy lâu nay
  Tham khảo bài viết trên blog Chrome
• HTML thuần thì quen thuộc và dễ chịu, nhưng để làm web app giàu tính năng trong thời nay thì vẫn có giới hạn
  Tôi cũng đã thử các lựa chọn như HTMX hay Phoenix LiveView, nhưng chúng không phải lời giải hoàn chỉnh
  Cuối cùng tôi thấy chấp nhận JS hiện đại là thực tế hơn
  • Chỉ cần dùng một chút JS thôi cũng đi xa hơn nhiều so với chỉ dùng HTML. Web hiện nay đang bị lạm dụng JS đến mức suy giảm khả năng sử dụng nghiêm trọng
  • Có vẻ nhiều người đang nghĩ HTMX phức tạp quá mức. Nếu dựa trên trạng thái server và tận dụng hx-select / hx-target thì vẫn giữ được sự đơn giản
  • Thẻ <marquee> từng rất hợp để làm cuộn ngang trong các trang mua sắm, còn giờ người ta phải gò ép làm bằng JS. Tôi mong HTML tự hỗ trợ nhiều mẫu UI hơn
  • Tôi từng tốn khá nhiều token để cố làm hiệu ứng marquee trong React. Kết quả cũng chẳng phải vòng lặp hoàn hảo, chỉ là mẹo animation thôi
  • Nếu dùng Elixir và Phoenix thì Gleam cũng là một lựa chọn đáng cân nhắc. Nó biên dịch sang JS
• HTML và JS là các công cụ có mục đích khác nhau
  Web app phức tạp thì JS là bắt buộc, nhưng vẫn có rất nhiều phần có thể làm chỉ với HTML
  • Những thứ như Google Earth thì dĩ nhiên cần JS, nhưng tôi nghĩ tầm Gmail thì HTML cũng có thể làm được. Xu hướng và cường điệu từ các nhà cung cấp trình duyệt đang cản trở sự phát triển của HTML
  • htmx có quan hệ bổ trợ với JS. Cốt lõi là trao đổi hypertext có cấu trúc thay vì JSON. Thực tế tôi đã nhanh chóng làm được những ứng dụng khá phức tạp chỉ với htmx + một ít JS
  • HTML nên cung cấp sẵn nhiều tính năng hơn nữa. Ví dụ như hỗ trợ HTTP verbs, cải thiện input control, v.v.
  • Nhiều trang nặng JS thực ra chỉ cần htmx là đủ để thay thế. Chọn công cụ thường chỉ là vấn đề thói quen
• Tôi đồng ý với ý rằng “JS không cần phải quản lý accordion hay menu điều hướng”
  Nhưng giờ JS đã trở thành công cụ cốt lõi cho thu thập dữ liệu và theo dõi quảng cáo
  Tôi khá tò mò liệu không có JS thì Big Tech còn có thể triển khai mức độ giám sát và dịch vụ quảng cáo tương tự hay không
  Suy cho cùng, sự ác cảm với JS không chỉ là vấn đề kỹ thuật mà còn xuất phát từ sự mất niềm tin vào hệ sinh thái quảng cáo