โครงการ Open UI มีความคืบหน้าในการพัฒนาคอมโพเนนต์พื้นฐานของเบราว์เซอร์

ชุมชนนักพัฒนาเว็บต้องเผชิญกับข้อจำกัดของการควบคุมฟอร์ม HTML แบบดั้งเดิมมาเป็นเวลานาน ทำให้มักต้องพึ่งพาเฟรมเวิร์ก JavaScript ที่มีความซับซ้อนเพื่อสร้างส่วนติดต่อผู้ใช้ที่ทันสมัย โครงการ Open UI ซึ่งเป็นกลุ่มชุมชนของ W3C มีเป้าหมายที่จะแก้ไขช่องว่างนี้โดยการสร้างมาตรฐานรูปแบบ UI ทั่วไปและช่วยให้นักพัฒนาสามารถปรับแต่งสไตล์และขยายคอมโพเนนต์เว็บที่มีอยู่แล้ว

ข้อเสนอที่ผ่านการรับรองแล้วเริ่มปรากฏในเบราว์เซอร์

หลายคอมโพเนนต์จากโครงการ Open UI ได้ถูกนำไปใช้ในเบราว์เซอร์สมัยใหม่แล้ว Popover API, Exclusive Accordion (ใช้องค์ประกอบ details พร้อมกับแอตทริบิวต์ name) และ Invoker Commands (ใช้แอตทริบิวต์ commandfor) ได้รับการสนับสนุนใน Chrome และเบราว์เซอร์อื่นๆ ในระดับที่แตกต่างกัน นอกจากนี้ องค์ประกอบ select ที่สามารถปรับแต่งได้ก็ได้ถูกนำมาใช้ใน Chrome แล้ว ซึ่งแก้ไขปัญหาหนึ่งในคอมโพเนนต์ที่ถูกสร้างใหม่บ่อยที่สุดบนเว็บ

การนำไปใช้เหล่านี้แสดงถึงความก้าวหน้าที่สำคัญในการแก้ปัญหาที่มีมายาวนานในการพัฒนาเว็บ ดังที่สมาชิกชุมชนคนหนึ่งได้กล่าวไว้:

คอมโพเนนต์ทั่วไปส่วนใหญ่ที่ระบุไว้ควรเป็นมาตรฐานในบางจุด ปัญหาหลักยังคงเป็นเพราะเว็บถูกออกแบบมาสำหรับเอกสาร ไม่ใช่แอปพลิเคชัน ความยุ่งเหยิงในปัจจุบันส่วนหนึ่งเกิดจากผู้ผลิตระบบปฏิบัติการไม่ได้ตกลงกันเรื่องมาตรฐาน API ส่วนติดต่อผู้ใช้แบบข้ามแพลตฟอร์ม จึงต้องทำผ่านเว็บแทน

ข้อเสนอ Graduated Open UI

• Exclusive Accordion

  • การนำไปใช้: องค์ประกอบ HTML <details> พร้อมแอตทริบิวต์ name
  • การรองรับของเบราว์เซอร์: https://caniuse.com/mdn-html_elements_details_name

• Invoker Commands

  • การนำไปใช้: แอตทริบิวต์ commandfor บนปุ่ม
  • การรองรับของเบราว์เซอร์: https://caniuse.com/mdn-html_elements_button_commandfor

• Popover API

  • การนำไปใช้: แอตทริบิวต์ popover บนองค์ประกอบ HTML
  • การรองรับของเบราว์เซอร์: https://caniuse.com/mdn-api_htmlelement_popover

• Popover Hint

  • การนำไปใช้: ค่าแอตทริบิวต์ popover="hint"
  • การรองรับของเบราว์เซอร์: https://caniuse.com/mdn-api_htmlelement_popover_hint

• Customizable Select

  • สถานะ: ถูกนำไปใช้ใน Chrome เท่านั้น
  • อ้างอิง: https://open-ui.org/components/customizableselect/

การแก้ไขปัญหาการพึ่งพาเฟรมเวิร์ก

นักพัฒนาหลายคนหันไปใช้ React, Angular หรือเฟรมเวิร์ก JavaScript อื่นๆ เป็นหลักเพราะพวกเขาต้องการคอมโพเนนต์ UI ที่ HTML ไม่มีให้โดยตรง ตัวเลือกหลายรายการ, ดรอปดาวน์ที่ค้นหาได้, ตัวเลือกปฏิทินที่มีฟีเจอร์ขั้นสูง และรูปแบบทั่วไปอื่นๆ ทำให้นักพัฒนาต้องสร้างโซลูชันเองหรือนำเข้าไลบรารีขนาดใหญ่

การพึ่งพาเฟรมเวิร์กนี้ได้สร้างวงจรที่ทำให้นักพัฒนาใหม่เรียนรู้วิธีการเฉพาะของเฟรมเวิร์กแทนที่จะเป็นมาตรฐานเว็บ ผลลัพธ์มักเป็นเว็บไซต์ที่มีขนาดใหญ่ การเข้าถึงที่ด้อยลง ใช้พลังงานมากขึ้น และอาจมีช่องโหว่ด้านความปลอดภัย โดยการสร้างมาตรฐานรูปแบบทั่วไปเหล่านี้ในระดับเบราว์เซอร์ Open UI มีเป้าหมายที่จะลดการพึ่งพานี้ในขณะที่ปรับปรุงประสิทธิภาพและการเข้าถึง

การสร้างสมดุลระหว่างมาตรฐานกับการปรับแต่ง

ความท้าทายสำคัญสำหรับโครงการ Open UI คือการสร้างสมดุลระหว่างมาตรฐานกับความต้องการในการปรับแต่งภาพ ธุรกิจหลายแห่งต้องการคอมโพเนนต์ UI ที่สะท้อนแบรนด์ของพวกเขา ซึ่งในอดีตทำให้พวกเขาหลีกเลี่ยงองค์ประกอบพื้นฐานและหันไปใช้การพัฒนาแบบกำหนดเอง

โครงการนี้แก้ไขปัญหาโดยเฉพาะโดยมุ่งเน้นไปที่การทำให้องค์ประกอบพื้นฐานสามารถปรับแต่งสไตล์ได้มากขึ้น แทนที่จะบังคับให้นักพัฒนาต้องเลือกระหว่างการเข้าถึงและแบรนดิ้ง Open UI มีเป้าหมายที่จะให้คอมโพเนนต์ที่สามารถปรับแต่งภาพได้ในขณะที่ยังคงรักษาประโยชน์ด้านการเข้าถึงและประสิทธิภาพของการใช้งานพื้นฐาน

สมาชิกชุมชนบางคนแสดงความสงสัยว่าธุรกิจจะนำคอมโพเนนต์มาตรฐานมาใช้หรือไม่ โดยสังเกตว่าการสร้างความแตกต่างเป็นกลยุทธ์ทางธุรกิจหลัก อย่างไรก็ตาม คนอื่นๆ โต้แย้งว่าการสร้างความแตกต่างผ่านคอมโพเนนต์ UI เพิ่มมูลค่าเพียงเล็กน้อย และผู้ใช้จริงๆ แล้วชอบอินเทอร์เฟซที่คุ้นเคยมากกว่า

ทิศทางในอนาคตและการตอบสนองของชุมชน

ในขณะที่โครงการ Open UI มีความก้าวหน้า สมาชิกชุมชนบางคนวิจารณ์เอกสารและการนำเสนอของโครงการ เว็บไซต์ขาดตัวอย่างที่ชัดเจนและการสาธิตแบบโต้ตอบที่จะช่วยให้นักพัฒนาเข้าใจคอมโพเนนต์ที่นำเสนอ

การมุ่งเน้นของโครงการในการพัฒนาที่ขับเคลื่อนด้วยการวิจัย—การบันทึกรูปแบบจากเฟรมเวิร์กยอดนิยมก่อนที่จะเสนอมาตรฐาน—แสดงถึงวิธีการที่เป็นระบบซึ่งอาจใช้เวลาในการบรรลุผลอย่างเต็มที่ อย่างไรก็ตาม ข้อเสนอที่ผ่านการรับรองแล้วแสดงให้เห็นว่างานนี้กำลังเกิดผล

เมื่อเบราว์เซอร์ยังคงนำมาตรฐานเหล่านี้ไปใช้ เราอาจเห็นการเปลี่ยนแปลงกลับไปสู่เว็บไซต์ที่เบาและเข้าถึงได้มากขึ้น ซึ่งไม่จำเป็นต้องใช้เฟรมเวิร์ก JavaScript ขนาดใหญ่สำหรับฟังก์ชัน UI พื้นฐาน สิ่งนี้อาจเป็นประโยชน์โดยเฉพาะกับผู้ใช้บนอุปกรณ์ที่มีประสิทธิภาพต่ำหรือการเชื่อมต่อที่ช้ากว่า ซึ่ง JavaScript ที่หนักอาจส่งผลกระทบต่อประสิทธิภาพอย่างมีนัยสำคัญ

อ้างอิง: Open UI Charter