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

คอมโพเนนต์เว็บที่ I/O 2019

Arthur Evans

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

องค์กร: คอมโพเนนต์เว็บใน Salesforce

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

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

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

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

นอกจากนี้ ยังระบุสิ่งที่ลูกค้าไม่ต้องการด้วย

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

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

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

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

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

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

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

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

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

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

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

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

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

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