HTML ในระบบการออกแบบ

ระบบการออกแบบคือคลังส่วนกลางของคอมโพเนนต์ โทเคน รูปแบบ และแนวทางปฏิบัติที่ใช้ร่วมกันในผลิตภัณฑ์ต่าง ๆ ขององค์กร ส่วน HTML ของระบบจะรวบรวมแนวทางการเขียนมาร์กอัปไว้ ทำให้ผลิตภัณฑ์ทุกตัวเรนเดอร์โครงสร้างปุ่ม หน้าต่างโมดัล แบบฟอร์ม และการ์ดได้อย่างสอดคล้องกัน

โทเคนคือค่าการออกแบบระดับอะตอม (สี: blue-500, ระยะห่าง: 16px) คอมโพเนนต์คือหน่วย HTML+CSS+JS ที่นำกลับมาใช้ซ้ำได้ (Button, Modal, TextField) ส่วนรูปแบบคือการประกอบระดับสูงขึ้น (แบบฟอร์มเข้าสู่ระบบ การ์ดเนื้อหาที่มีรูปประจำตัว) โครงสร้าง HTML จะถูกกำหนดตายตัวในระดับคอมโพเนนต์ ส่วนรูปแบบจะนำคอมโพเนนต์มาประกอบกัน

คอมโพเนนต์จะบรรจุแนวทางปฏิบัติที่ดีไว้ เช่น Button ทุกตัวใช้เอลิเมนต์ <button> (ไม่ใช่ div) พร้อมแอตทริบิวต์ type ที่ถูกต้อง Modal ทุกตัวจะจำกัดโฟกัส รองรับ Escape และมีบทบาท ARIA ที่ถูกต้อง การใช้คอมโพเนนต์ช่วยหลีกเลี่ยงการนำความสามารถด้านการเข้าถึงกลับมาสร้างใหม่สำหรับฟีเจอร์แต่ละอย่าง

Storybook จะแสดงผลคอมโพเนนต์แต่ละตัวแยกกัน โดยใช้พร็อพและรูปแบบต่าง ๆ นักออกแบบและผู้จัดการผลิตภัณฑ์จึงเห็นคอมโพเนนต์ที่มีให้ใช้โดยไม่ต้องอ่านโค้ด ส่วนนักพัฒนาก็เห็นตัวอย่างการใช้งานโดยไม่ต้องค้นหาในซอร์สโค้ด จึงถือเป็นมาตรฐานโดยพฤตินัยสำหรับเอกสารระบบการออกแบบ

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

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

โทเคนช่วยให้กำหนดธีมได้ เพียงสลับแผนผังโทเคนสี คอมโพเนนต์ทุกตัวก็จะใช้ชุดสีใหม่ การใช้แบรนด์ของลูกค้า (แบรนด์ต่างกันที่ใช้คอมโพเนนต์ร่วมกันแต่มีรูปลักษณ์ต่างกัน) ทำได้ง่ายเมื่อทุกอย่างขับเคลื่อนด้วยโทเคน และคอมโพเนนต์อ้างอิงโทเคนแทนค่าที่ฝังตายตัว

สำหรับองค์กรที่ใช้หลายเฟรมเวิร์ก (React, Vue, Angular) เว็บคอมโพเนนต์ช่วยให้มีการใช้งานเพียงชุดเดียวที่ทำงานได้ทุกที่ สร้างด้วย Lit, FAST หรือโค้ดพื้นฐาน แล้วนำไปใช้ในเฟรมเวิร์กใดก็ได้ในลักษณะเดียวกัน โครงสร้าง HTML คือข้อตกลง ไม่ใช่เฟรมเวิร์ก

ระบบการออกแบบจะบรรจุความสามารถด้านการเข้าถึงไว้ในคอมโพเนนต์ทุกตัวเพียงครั้งเดียว เช่น การจัดการแป้นพิมพ์ บทบาท ARIA การจัดการโฟกัส และความต่างสี ทีมผลิตภัณฑ์ที่นำระบบไปใช้จะได้รับความสามารถด้านการเข้าถึงโดยไม่ต้องสร้างฟีเจอร์แต่ละอย่างใหม่ตั้งแต่ต้น ซึ่งช่วยลดข้อผิดพลาดด้านการเข้าถึงทั่วทั้งบริษัทได้อย่างวัดผลได้

ติดตามว่าผลิตภัณฑ์ใดใช้ระบบการออกแบบเวอร์ชันใด เครื่องมืออย่างแค็ตตาล็อกคอมโพเนนต์ของ Backstage บอต Slack ที่สร้างขึ้นเองซึ่งตรวจสอบ package.json หรือแดชบอร์ดภายในแบบง่าย ๆ จะช่วยเปิดเผยว่าผลิตภัณฑ์ใดยังไม่ได้ใช้เวอร์ชันล่าสุด ตัวชี้วัดการนำไปใช้ช่วยสนับสนุนการลงทุนอย่างต่อเนื่อง

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

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

เหตุใดจึงนิยมใช้โทเคนการออกแบบ (เช่น สี: blue-500, ระยะห่าง: 16px) แทนค่าที่ฝังตายตัวไว้ภายในคอมโพเนนต์

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