Micro-Frontends และ Design System Drift: ทำให้ UI สอดคล้องกันทั่วทั้งทีม
วิธีที่ทีมที่ใช้ไมโครฟรอนต์เอนด์รักษา UI ที่สอดคล้องกัน: โทเค็นและส่วนประกอบที่ใช้ร่วมกันเป็นแพ็คเกจเวอร์ชัน การแยก CSS นโยบายการอัปเกรด และการตรวจสอบการถดถอยด้วยภาพ
หลัก Takeaway
ส่วนหน้าแบบไมโครช่วยให้ทีมปรับใช้ส่วนต่างๆ ของผลิตภัณฑ์ได้อย่างอิสระ ซึ่งทำให้ UI มีแนวโน้มเคลื่อนไป: เวอร์ชันของส่วนประกอบที่แตกต่างกัน CSS ที่ขัดแย้งกัน และรูปแบบที่ซ้ำกัน รักษาความสอดคล้องด้วยการแชร์โทเค็นการออกแบบและส่วนประกอบเป็นแพ็คเกจเวอร์ชัน แยก CSS ของแต่ละทีม ยอมรับนโยบายการอัปเกรด และตรวจจับความแตกต่างด้วยการทดสอบ Visual Regression
เหตุใดจึงเกิดการดริฟท์
เว็บไซต์ของ Martin Fowler อธิบายว่าไมโครฟรอนต์เอนด์เป็นแอปพลิเคชันฟรอนต์เอนด์ที่สามารถส่งมอบได้อย่างอิสระ ซึ่งประกอบขึ้นเป็นภาพรวมที่ยิ่งใหญ่กว่า โดยมีการปรับใช้อย่างอิสระเป็นคุณประโยชน์หลัก ความเป็นอิสระแบบเดียวกันทำให้เกิดการเบี่ยงเบน: ทีมอัปเกรดระบบการออกแบบในเวลาที่ต่างกัน คัดลอกส่วนประกอบเพื่อให้เคลื่อนที่เร็วขึ้น และเขียน CSS ที่รั่วไหลไปยังส่วนอื่น ๆ ของหน้า บทความนี้ยังเตือนด้วยว่าการใช้งานบางอย่างซ้ำซ้อนการขึ้นต่อกัน และ CSS ซึ่งเป็นแบบสากลและแบบเรียงซ้อนนั้นจำเป็นต้องแยกออกจากกันโดยเจตนา
แชร์ระบบเป็นแพ็คเกจ
เผยแพร่โทเค็นและส่วนประกอบเป็นแพ็คเกจตามเวอร์ชัน ไม่ใช่โค้ดที่คัดลอกและวาง โทเค็นในรูปแบบมาตรฐาน เช่น รูปแบบ W3C DTCG สามารถสร้างได้สำหรับทุกเฟรมเวิร์กที่ทีมใช้ ดังนั้นทีม React และทีม Vue ยังคงมีสี ระยะห่าง และการเคลื่อนไหวเหมือนกัน
แยก CSS
ป้องกันไม่ให้สไตล์รั่วไหลระหว่างทีมด้วยแนวทางที่สอดคล้องกัน: รูปแบบการตั้งชื่อ เช่น BEM, CSS Modules, CSS-in-JS หรือ Shadow DOM สำหรับส่วนประกอบของเว็บ เลือกแบบแผนเดียวสำหรับผลิตภัณฑ์ทั้งหมดและขุยสำหรับมัน
นโยบายการอัพเกรด
ตกลงกันว่าทีมจะตามหลังอยู่มากเพียงใด เช่น ไม่เกินเวอร์ชันหลักหนึ่งเวอร์ชัน และใช้การกำหนดเวอร์ชันเชิงความหมายเพื่อให้ทีมทราบเมื่อมีการเปลี่ยนแปลงเกิดขึ้น ติดตามเวอร์ชันที่แต่ละไมโครฟรอนต์เอนด์ใช้ในแดชบอร์ดที่ใช้ร่วมกัน
จับดริฟท์โดยอัตโนมัติ
การทดสอบการถดถอยของภาพบนหน้าจอหลัก กฎผ้าสำลีที่ห้ามค่าสีและระยะห่างแบบดิบ และการตรวจสอบการออกแบบบนพื้นผิวที่ใช้ร่วมกัน (ส่วนหัว การนำทาง การชำระเงิน) จะตรวจจับความไม่สอดคล้องกันก่อนที่ผู้ใช้จะมองเห็น
คีย์ Principles ที่ต้องจำ
- การใช้งานแบบอิสระทำให้ UI เลื่อนลอยไป
- แชร์โทเค็นและส่วนประกอบเป็นแพ็คเกจเวอร์ชัน
- แยก CSS ด้วยวิธีเดียวที่สอดคล้องกัน
- ยอมรับนโยบายการอัปเกรดและติดตามเวอร์ชัน
- ใช้การทดสอบการถดถอยด้วยการมองเห็นและกฎการใช้ผ้าสำลี
คำถามที่พบบ่อย
แหล่งที่มา
- Micro Frontends — martinfowler.com
- Design Tokens Community Group — designtokens.org
- Semantic Versioning 2.0.0 — เซมเวอร์.org