คอมโพเนนต์ของเว็บ: ส่วนประกอบลับที่ช่วยขับเคลื่อนเว็บ

Web Components ในงาน I/O 2019

เผยแพร่: 18 มิถุนายน 2019

ในงาน Google I/O 2019 Kevin Schaaf จากโปรเจ็กต์ Polymer และ Caridy Patiño จาก Salesforce ได้พูดถึงสถานะของคอมโพเนนต์เว็บ

คอมโพเนนต์ของเว็บได้รับความนิยมมากน้อยเพียงใด

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

คุณจะเห็นคอมโพเนนต์ของเว็บในเว็บไซต์ที่คุณอาจใช้ทุกวัน เช่น YouTube และ GitHub นอกจากนี้ ยังใช้ในเว็บไซต์ข่าวและการเผยแพร่จำนวนมากที่สร้างด้วย AMP ด้วย โดยคอมโพเนนต์ AMP ก็เป็นคอมโพเนนต์เว็บเช่นกัน และองค์กรหลายแห่งก็ใช้คอมโพเนนต์เว็บด้วยเช่นกัน

คอมโพเนนต์เว็บคืออะไร

แล้วคอมโพเนนต์ของเว็บคืออะไร ข้อกำหนดของคอมโพเนนต์บนเว็บมีชุด API ระดับต่ำที่ช่วยให้คุณขยายชุดแท็ก HTML ในตัวของเบราว์เซอร์ได้ คอมโพเนนต์เว็บมีข้อดีดังนี้

• วิธีการทั่วไปในการสร้างคอมโพเนนต์ (ใช้ DOM API มาตรฐาน)
• วิธีทั่วไปในการรับและส่งข้อมูล (โดยใช้พร็อพเพอร์ตี้/เหตุการณ์)

นอกเหนือจากอินเทอร์เฟซมาตรฐานดังกล่าว มาตรฐานไม่ได้ระบุถึงวิธีการติดตั้งใช้งานคอมโพเนนต์จริง

• เครื่องมือการแสดงผลที่ใช้สร้าง DOM
• วิธีอัปเดตตัวเองตามการเปลี่ยนแปลงพร็อพเพอร์ตี้หรือแอตทริบิวต์

กล่าวคือ Web Component จะบอกเบราว์เซอร์เมื่อใดและที่ใดให้สร้าง คอมโพเนนต์ แต่ไม่ได้บอกวิธีสร้าง

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

คอมโพเนนต์เว็บเหมาะกับอะไร

ความแตกต่างที่สำคัญระหว่างคอมโพเนนต์ของเว็บกับระบบคอมโพเนนต์ที่เป็นกรรมสิทธิ์คือการทำงานร่วมกัน เนื่องจากมีอินเทอร์เฟซมาตรฐาน คุณจึงใช้คอมโพเนนต์ของเว็บได้ทุกที่ที่ใช้องค์ประกอบในตัว เช่น <input> หรือ <video>

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

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

ใครกำลังใช้คอมโพเนนต์ของเว็บอยู่

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

เว็บไซต์เนื้อหา

Web Components เป็นเทคโนโลยีที่เหมาะอย่างยิ่งสำหรับการปรับปรุงเนื้อหาแบบค่อยเป็นค่อยไป เนื่องจากระบบ CMS จำนวนมากสามารถแสดงผลเป็น HTML มาตรฐานได้อยู่แล้ว

AMP เป็นตัวอย่างที่ยอดเยี่ยมที่แสดงให้เห็นว่าคอมโพเนนต์เว็บสามารถผสานรวมเข้ากับโครงสร้างพื้นฐานของอุตสาหกรรมการเผยแพร่เพื่อแสดงเนื้อหาได้อย่างรวดเร็วและง่ายดายเพียงใด

ระบบการออกแบบ

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

บ่อยครั้งที่นักออกแบบต้องทำงานร่วมกับทีมต่างๆ ที่สร้างคอมโพเนนต์ของระบบการออกแบบเวอร์ชันของตนเองบน React, Angular และเฟรมเวิร์กอื่นๆ ทั้งหมด แทนที่จะมีคอมโพเนนต์มาตรฐานเพียงชุดเดียว

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

บริษัทต่างๆ เช่น ING, EA และ Google กำลังใช้ภาษาการออกแบบของบริษัทในคอมโพเนนต์ของเว็บ

Enterprise: Web Components ที่ Salesforce

นอกจากนี้ คอมโพเนนต์เว็บยังได้รับความนิยมอย่างมากภายในองค์กรในฐานะเทคโนโลยีที่ปลอดภัยและพร้อมรับการอัปเดตในอนาคตเพื่อใช้เป็นมาตรฐาน Caridy Patiño สถาปนิกแพลตฟอร์ม UI ของ Salesforce อธิบายเหตุผลที่สร้างแพลตฟอร์ม UI โดยใช้คอมโพเนนต์ของเว็บ

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

Salesforce ระบุความต้องการของลูกค้าแพลตฟอร์มได้ดังนี้

• โซลูชันมาตรฐานแทนที่จะเป็นโซลูชันที่เป็นกรรมสิทธิ์ จึงค้นหานักพัฒนาที่มีประสบการณ์ได้ง่ายขึ้น และเพิ่มประสิทธิภาพให้นักพัฒนาใหม่ได้เร็วขึ้น
• รูปแบบคอมโพเนนต์ทั่วไปเพื่อให้การปรับแต่งแอปพลิเคชัน Salesforce ใดก็ตามทํางานในลักษณะเดียวกัน

นอกจากนี้ ยังพบว่าลูกค้าไม่ต้องการสิ่งต่อไปนี้

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

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

เริ่มต้นใช้งานคอมโพเนนต์ของเว็บ

การเริ่มต้นใช้งาน Web Components ทำได้หลายวิธี

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

• Google จำหน่ายระบบ Material Design ของตนเองเป็นคอมโพเนนต์ของเว็บ ซึ่งก็คือ Material Web Components
• องค์ประกอบแบบมีสายเป็นชุดคอมโพเนนต์ของเว็บที่ยอดเยี่ยมซึ่งมีลักษณะเป็นภาพร่างที่วาดด้วยมือ
• มีคอมโพเนนต์ของเว็บแบบพิเศษที่ยอดเยี่ยม เช่น <model-viewer> ซึ่งคุณสามารถวางลงในแอปใดก็ได้เพื่อเพิ่มเนื้อหา 3 มิติ

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

หากต้องการเริ่มต้นสร้างคอมโพเนนต์ของคุณเอง คุณสามารถดู LitElement ซึ่งเป็นคลาสฐานของ Web Component ที่พัฒนาโดย Google ซึ่งมีประสบการณ์การแสดงผลที่ใช้งานได้ดีคล้ายกับ React

เครื่องมือและไลบรารีอื่นๆ ที่ควรพิจารณา

• Stencil เป็นเฟรมเวิร์กที่ใช้คอมโพเนนต์เว็บเป็นอันดับแรก ซึ่งรวมถึงฟีเจอร์ยอดนิยมของเฟรมเวิร์กหลายอย่าง เช่น JSX และ TypeScript
• Angular Elements มีวิธีห่อหุ้มคอมโพเนนต์ Angular เป็นคอมโพเนนต์เว็บ
• Wrapper คอมโพเนนต์เว็บของ Vue.js ช่วยให้คุณแพ็กเกจคอมโพเนนต์ Vue เป็นคอมโพเนนต์เว็บได้

ทรัพยากรเพิ่มเติม:

• open-wc.org มีข้อมูลเริ่มต้นใช้งานที่ยอดเยี่ยม รวมถึงเคล็ดลับและการกำหนดค่าเริ่มต้นสำหรับเครื่องมือบิลด์และการพัฒนา
• หลักพื้นฐานในการทำเว็บไซต์มีข้อมูลเบื้องต้นเกี่ยวกับ API ของคอมโพเนนต์เว็บพื้นฐาน และแนวทางปฏิบัติแนะนำสำหรับการออกแบบคอมโพเนนต์เว็บ
• MDN มีเอกสารอ้างอิงสำหรับ API ของคอมโพเนนต์เว็บ รวมถึงบทแนะนำบางส่วน