คอมโพเนนต์เว็บจะเปลี่ยนทุกอย่างที่คุณคิดว่าเกี่ยวกับการสร้างเว็บ นี่เป็นครั้งแรกที่เว็บจะมี API ระดับต่ำ ซึ่งช่วยให้เราสร้างแท็ก HTML ของเราเองได้เท่านั้น แต่ยังห่อหุ้มตรรกะและ CSS ด้วย ไม่มีโค้ด Soup หรือรหัสต้นแบบทั่วโลกอีกต่อไปแล้ว! โลกใบใหม่ที่มีความกล้าหาญที่ทุกสิ่งล้วนเป็นองค์ประกอบหนึ่ง
ในการพูดคุยจาก DotJS ฉันได้แนะนำเกี่ยวกับประโยชน์ของ Web Elements และวิธีการสร้างโดยใช้เครื่องมือที่ทันสมัย ผมจะแสดงกระบวนการทำงานของเครื่องมือ Yeoman ที่จะช่วยเพิ่มประสิทธิภาพในการสร้างเว็บแอปโดยใช้ Polymer ซึ่งเป็นไลบรารีโพลีฟิลและน้ำตาลในการพัฒนาแอปที่ใช้คอมโพเนนต์เว็บในเบราว์เซอร์สมัยใหม่
สร้างองค์ประกอบที่กำหนดเองและติดตั้งองค์ประกอบที่ผู้อื่นสร้าง
ในการพูดคุยนี้ คุณจะได้เรียนรู้เรื่องต่อไปนี้
- เกี่ยวกับข้อกำหนด 4 ประการที่ประกอบขึ้นเป็นคอมโพเนนต์ของเว็บ ได้แก่ องค์ประกอบที่กำหนดเอง เทมเพลต Shadow DOM และการนำเข้า HTML
- วิธีกำหนดองค์ประกอบที่กำหนดเองของคุณ และติดตั้งองค์ประกอบที่ผู้อื่นสร้างขึ้นโดยใช้ Bower
- ใช้เวลาเขียน JavaScript น้อยลงและมีเวลาสร้างหน้าเว็บมากขึ้น
- ใช้เครื่องมือส่วนหน้าที่ทันสมัย (Yeoman) เพื่อร่างแอปพลิเคชันโดยใช้ Polymer ด้วยเครื่องกำเนิดไฟฟ้าโพลิเมอร์
- วิธีที่ Super Polymer เปลี่ยนแปลงในการสร้างคอมโพเนนต์ของเว็บ
ตัวอย่างเช่น หากต้องการติดตั้งโพลีฟิลสำหรับคอมโพเนนต์เว็บของ Polymer และตัวไลบรารีเอง คุณสามารถเรียกใช้บรรทัดเดียวนี้
bower install --save Polymer/platform Polymer/polymer
การดำเนินการนี้จะเพิ่มโฟลเดอร์ bower_components และเพิ่มแพ็กเกจข้างต้น --save จะเพิ่มลงในไฟล์ bower.json ของแอป
หากต้องการติดตั้งองค์ประกอบแอคคอร์เดียนของ Polymer ในภายหลัง คุณก็เรียกใช้ได้โดยทำดังนี้
bower install --save Polymer/polymer-ui-accordion
แล้วนำเข้าไปยังแอปพลิเคชันของคุณ ดังนี้
<link rel="import" href="bower_components/polymer-ui-accordion/polymer-ui-accordion.html">
เพื่อเป็นการประหยัดเวลา คุณสามารถออกแบบแอป Polymer ใหม่ที่มีทรัพยากร Dependency ทั้งหมดที่คุณต้องการ การใช้โค้ดต้นแบบและเครื่องมือสำหรับการเพิ่มประสิทธิภาพแอปก็สามารถทำได้ด้วย Yeoman โดยใช้บทสรุปสั้นๆ นี้
yo polymer
คำแนะนำพิเศษแบบทีละขั้น
และได้บันทึกคำแนะนำโบนัส 30 นาทีในแอป Polymer Jukebox ที่ฉันแสดงในบทสนทนาด้วย
ในวิดีโอโบนัสมีอธิบายเพิ่มเติมดังนี้
- สวดมนต์ "ทุกอย่างเป็นองค์ประกอบ" มีความหมายว่าอย่างไร
- วิธีใช้ Bower ในการติดตั้งโพลีฟิลและองค์ประกอบสำหรับแพลตฟอร์มของ Polymer
- การสร้างนั่งร้านแอป Jukebox ด้วยเครื่องกำเนิดไฟฟ้า Yeoman และเครื่องกำเนิดไฟฟ้าย่อย
- การทำความเข้าใจเกี่ยวกับฟีเจอร์ต่างๆ ของแพลตฟอร์มที่สร้างขึ้นผ่านต้นแบบ
- วิธีถ่ายโอนแอป Angular ไปยัง Polymer
นอกจากนี้ เรายังใช้เครื่องกำเนิดไฟฟ้าย่อยของ Yeoman เพื่อประกอบองค์ประกอบโพลิเมอร์ใหม่ของเรา เช่น เพื่อสร้างต้นแบบสำหรับองค์ประกอบ foo ที่เราใช้งาน ดังนี้
yo polymer:element foo
ซึ่งจะแจ้งให้เราทราบว่าต้องการให้นำเข้าองค์ประกอบโดยอัตโนมัติหรือไม่ จำเป็นต้องมีตัวสร้างหรือไม่ และสำหรับค่ากำหนดอื่นๆ อีกสองสามอย่าง
แหล่งข้อมูลล่าสุดสำหรับแอปที่แสดงในการเสวนาทั้ง 2 แบบได้พร้อมให้ใช้งานแล้วใน GitHub ฉันได้ปรับโครงสร้างมาอีกเล็กน้อยเพื่อให้เป็นระเบียบมากขึ้นและอ่านง่ายยิ่งขึ้น
ตัวอย่างแอป
อ่านเพิ่มเติม
กล่าวโดยสรุปคือ Polymer คือไลบรารี JavaScript ที่ทำให้ตอนนี้คอมโพเนนต์เว็บใช้งานได้ในเว็บเบราว์เซอร์สมัยใหม่ เพราะเรารอให้มีการติดตั้งใช้งานในเครื่องก่อน เครื่องมือที่ทันสมัยสามารถช่วยปรับปรุงเวิร์กโฟลว์ให้ดีขึ้นด้วยการใช้เครื่องมือดังกล่าว และคุณก็สามารถทดลองใช้ Yeoman และ Bower ได้เมื่อพัฒนาแท็กของคุณเอง
บทความอื่นๆ อีกสองสามบทความที่ควรตรวจสอบในเรื่องนี้: