Sáng kiến Open UI đạt được tiến triển với các thành phần gốc của trình duyệt

Cộng đồng phát triển web từ lâu đã phải đối mặt với những hạn chế của các điều khiển biểu mẫu HTML gốc, thường phải sử dụng các framework nặng về JavaScript để tạo giao diện người dùng hiện đại. Sáng kiến Open UI, một Nhóm Cộng đồng W3C, nhằm giải quyết khoảng cách này bằng cách tiêu chuẩn hóa các mẫu giao diện người dùng phổ biến và cho phép các nhà phát triển tùy chỉnh kiểu dáng và mở rộng các thành phần web tích hợp sẵn.

Các đề xuất đã được chấp nhận đang được triển khai trên các trình duyệt

Một số thành phần từ sáng kiến Open UI đã được tích hợp vào các trình duyệt hiện đại. Popover API, Exclusive Accordion (sử dụng phần tử details với thuộc tính name), và Invoker Commands (sử dụng thuộc tính commandfor) hiện đã được hỗ trợ ở mức độ khác nhau trong Chrome và các trình duyệt khác. Một phần tử select có thể tùy chỉnh cũng đã được triển khai trong Chrome, giải quyết một trong những thành phần thường xuyên được tái triển khai nhất trên web.

Những triển khai này thể hiện tiến bộ đáng kể trong việc giải quyết một vấn đề dai dẳng trong phát triển web. Như một thành viên cộng đồng đã nhận xét:

Hầu hết các thành phần thông dụng được liệt kê nên trở thành tiêu chuẩn tại một thời điểm nào đó. Vấn đề chính vẫn là Web được thiết kế cho tài liệu, không phải cho ứng dụng. Sự lộn xộn hiện tại một phần là do các nhà cung cấp hệ điều hành không thống nhất về một API giao diện người dùng tiêu chuẩn đa nền tảng, vì vậy nó đã được thực hiện thông qua Web.

Các Đề xuất Open UI đã được Triển khai

• Exclusive Accordion

  • Triển khai: Phần tử HTML <details> với thuộc tính name
  • Hỗ trợ trình duyệt: https://caniuse.com/mdn-html_elements_details_name

• Invoker Commands

  • Triển khai: Thuộc tính commandfor trên các nút bấm
  • Hỗ trợ trình duyệt: https://caniuse.com/mdn-html_elements_button_commandfor

• Popover API

  • Triển khai: Thuộc tính popover trên các phần tử HTML
  • Hỗ trợ trình duyệt: https://caniuse.com/mdn-api_htmlelement_popover

• Popover Hint

  • Triển khai: Giá trị thuộc tính popover="hint"
  • Hỗ trợ trình duyệt: https://caniuse.com/mdn-api_htmlelement_popover_hint

• Customizable Select

  • Trạng thái: Đã triển khai chỉ trên Chrome
  • Tham khảo: https://open-ui.org/components/customizableselect/

Giải quyết vấn đề phụ thuộc vào Framework

Nhiều nhà phát triển hiện nay chuyển sang React, Angular, hoặc các framework JavaScript khác chủ yếu vì họ cần các thành phần UI mà HTML không cung cấp sẵn. Các bộ chọn đa lựa chọn, dropdown có thể tìm kiếm, bộ chọn lịch với các tính năng nâng cao, và các mẫu phổ biến khác buộc các nhà phát triển phải tự xây dựng giải pháp tùy chỉnh hoặc nhập các thư viện nặng.

Sự phụ thuộc vào các framework này đã tạo ra một vòng lặp trong đó các nhà phát triển mới học các phương pháp tiếp cận đặc thù cho framework thay vì các tiêu chuẩn web. Kết quả thường là các trang web cồng kềnh, kém truy cập, tiêu thụ nhiều năng lượng hơn và tiềm ẩn lỗ hổng bảo mật. Bằng cách tiêu chuẩn hóa các mẫu phổ biến này ở cấp độ trình duyệt, Open UI nhằm giảm sự phụ thuộc này đồng thời cải thiện hiệu suất và khả năng truy cập.

Cân bằng giữa tiêu chuẩn hóa và tùy biến

Một thách thức chính đối với sáng kiến Open UI là cân bằng giữa tiêu chuẩn hóa và nhu cầu tùy biến trực quan. Nhiều doanh nghiệp yêu cầu các thành phần UI phản ánh thương hiệu của họ, điều này theo truyền thống đã đẩy họ xa rời các phần tử gốc hướng đến các triển khai tùy chỉnh.

Sáng kiến này đặc biệt giải quyết vấn đề này bằng cách tập trung vào việc làm cho các phần tử gốc có thể tùy chỉnh kiểu dáng hơn. Thay vì buộc các nhà phát triển phải lựa chọn giữa khả năng truy cập và thương hiệu, Open UI nhằm cung cấp các thành phần có thể được tùy chỉnh về mặt hình ảnh trong khi vẫn duy trì lợi ích về khả năng truy cập và hiệu suất của các triển khai gốc.

Một số thành viên cộng đồng đã bày tỏ sự hoài nghi về việc liệu các doanh nghiệp có áp dụng các thành phần tiêu chuẩn hóa hay không, lưu ý rằng sự khác biệt là một chiến lược kinh doanh cốt lõi. Tuy nhiên, những người khác lập luận rằng sự khác biệt thông qua các thành phần UI mang lại ít giá trị và người dùng thực sự thích các giao diện quen thuộc hơn.

Hướng phát triển trong tương lai và phản hồi từ cộng đồng

Mặc dù sáng kiến Open UI đã đạt được tiến bộ, một số thành viên cộng đồng đã chỉ trích tài liệu và cách trình bày của chính dự án. Trang web thiếu các ví dụ rõ ràng và các bản demo tương tác sẽ giúp các nhà phát triển hiểu các thành phần được đề xuất.

Việc sáng kiến tập trung vào phát triển dựa trên nghiên cứu—ghi lại các mẫu trên các framework phổ biến trước khi đề xuất tiêu chuẩn—cho thấy một phương pháp tiếp cận có phương pháp có thể mất thời gian để thực hiện đầy đủ. Tuy nhiên, các đề xuất đã được chấp nhận cho thấy công việc này đã bắt đầu mang lại kết quả.

Khi các trình duyệt tiếp tục triển khai các tiêu chuẩn này, chúng ta có thể thấy một sự chuyển dịch trở lại các trang web nhẹ hơn, dễ tiếp cận hơn mà không yêu cầu các framework JavaScript khổng lồ cho chức năng UI cơ bản. Điều này có thể đặc biệt có lợi cho người dùng trên các thiết bị có hiệu suất thấp hơn hoặc kết nối chậm hơn, nơi JavaScript nặng có thể ảnh hưởng đáng kể đến hiệu suất.

Tham khảo: Open UI Charter