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

คอมโพเนนต์เว็บในงาน I/O 2019

Arthur Evans

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

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

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

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

ส่วนประกอบของเว็บคืออะไร

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

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

นอกเหนือจากอินเทอร์เฟซมาตรฐานนั้น มาตรฐานดังกล่าวไม่ได้กล่าวถึงการนำคอมโพเนนต์ไปใช้จริงแต่อย่างใด

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

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

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

องค์ประกอบเว็บมีประโยชน์อย่างไร

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

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

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

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

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

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

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

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

ระบบออกแบบ

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

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

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

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

Enterprise: คอมโพเนนต์เว็บของ Salesforce

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

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

Salesforce พบชุดความต้องการจากลูกค้าที่ใช้แพลตฟอร์มนี้

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

และยังระบุสิ่งที่ลูกค้าไม่ต้องการ เช่น

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

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

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

การเริ่มต้นใช้คอมโพเนนต์ของเว็บทำได้หลายวิธี

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

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

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

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

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

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

แหล่งข้อมูลเพิ่มเติมมีดังต่อไปนี้

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

รูปภาพหลักโดย Jason Tuinstra ใน Unsplash

หมายเหตุของผู้แก้ไข: แผนภูมิการใช้งานองค์ประกอบที่กำหนดเองได้รับการอัปเดตให้แสดงข้อมูลการใช้งานรายเดือนแบบเต็มตามที่รายงานใน chromestatus.com โพสต์เวอร์ชันก่อนหน้านี้มีกราฟแบบละเอียดเป็นเวลา 6 เดือน โดยไม่มีเดือนล่าสุด ซีรีส์ V0 และ V1 ในแผนภูมิดั้งเดิมจะเรียงซ้อนกัน แต่ตอนนี้จะแสดงแบบไม่ซ้อนกันโดยมีเส้นรวมเพื่อตัดความกำกวมออก การเพิ่มขึ้นอย่างฉับพลันในช่วงปลายปี 2017 เกิดจากการเปลี่ยนแปลงระบบเก็บรวบรวมข้อมูลของ chromestatus.com การเปลี่ยนแปลงนี้ส่งผลกระทบต่อสถิติสำหรับฟีเจอร์แพลตฟอร์มเว็บทั้งหมด และส่งผลให้มีการวัดผลที่แม่นยำยิ่งขึ้นในอนาคต