Web Components กำลังจะเปลี่ยนแปลงทุกสิ่งที่คุณคิดว่ารู้เกี่ยวกับการสร้างเว็บไซต์ เป็นครั้งแรกที่เว็บจะมี API ระดับล่าง ซึ่งช่วยให้เราสร้างแท็ก HTML ของเราเองได้ และยังรวมตรรกะและ CSS ไว้ด้วย หมดปัญหาเกี่ยวกับไฟล์สไตล์ชีตส่วนกลางหรือโค้ด Boilerplate โลกใบใหม่นี้ทุกอย่างเป็นองค์ประกอบ
ในการบรรยายจาก DotJS เราได้อธิบายสิ่งที่คอมโพเนนต์ของเว็บมีให้และวิธีสร้างโดยใช้เครื่องมือสมัยใหม่ เราจะแสดง Yeoman ซึ่งเป็นเวิร์กโฟลว์ของเครื่องมือที่จะช่วยสร้างเว็บแอปโดยใช้ Polymer ได้อย่างมีประสิทธิภาพยิ่งขึ้น โดยไลบรารีนี้ประกอบด้วย polyfill และ Sugar สำหรับการพัฒนาแอปโดยใช้คอมโพเนนต์ของเว็บในเบราว์เซอร์สมัยใหม่ในปัจจุบัน
สร้างองค์ประกอบที่กำหนดเองและติดตั้งองค์ประกอบที่สร้างโดยผู้อื่น
คุณจะได้เรียนรู้สิ่งต่อไปนี้จากการบรรยายนี้
- เกี่ยวกับข้อกำหนด 4 ข้อที่แตกต่างกันซึ่งประกอบกันเป็น Web Components ได้แก่ องค์ประกอบที่กำหนดเอง เทมเพลต Shadow DOM และ HTML Imports
- วิธีกำหนดองค์ประกอบที่กำหนดเองของคุณเองและติดตั้งองค์ประกอบที่สร้างโดยผู้อื่นโดยใช้ Bower
- เขียน JavaScript น้อยลงและมีเวลาสร้างหน้าเว็บมากขึ้น
- ใช้เครื่องมือเฟรมเวิร์กหน้าเว็บสมัยใหม่ (Yeoman) เพื่อสร้างโครงสร้างแอปพลิเคชันโดยใช้ Polymer ด้วย generator-polymer
- วิธีที่ Polymer Super เปลี่ยนแปลงการสร้างคอมโพเนนต์เว็บ
เช่น หากต้องการติดตั้ง polyfill ของ Web Component และไลบรารีของ Polymer ให้เรียกใช้บรรทัดคำสั่งนี้
bower install --save Polymer/platform Polymer/polymer
ซึ่งจะเพิ่มโฟลเดอร์ bower_components
และเพิ่มแพ็กเกจข้างต้น --save
จะเพิ่มไปยังไฟล์ bower.json ของแอป
หากต้องการติดตั้งองค์ประกอบ Accordion ของ 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
คำแนะนำแบบทีละขั้นสำหรับโบนัส
นอกจากนี้ เรายังได้บันทึกวิดีโอแนะนำแอป Polymer Jukebox ความยาว 30 นาทีไว้ให้ด้วย
เนื้อหาในวิดีโอโบนัส
- ความหมายของคําขวัญ "ทุกอย่างคือองค์ประกอบ"
- วิธีใช้ Bower เพื่อติดตั้ง polyfill และองค์ประกอบของแพลตฟอร์ม Polymer
- การสร้างโครงสร้างพื้นฐานของแอป Jukebox ด้วยเครื่องมือสร้าง Yeoman และเครื่องมือสร้างย่อย
- ทำความเข้าใจฟีเจอร์ของแพลตฟอร์มที่สร้างผ่านบอยเลอร์เพลต
- วิธีพอร์ตแอป Angular ไปยัง Polymer
นอกจากนี้ เรายังใช้เครื่องมือสร้างย่อยของ Yeoman เพื่อสร้างโครงสร้างพื้นฐานขององค์ประกอบ Polymer ใหม่ เช่น หากต้องการสร้างไฟล์ต้นฉบับสำหรับองค์ประกอบ foo
เราจะเรียกใช้คำสั่งต่อไปนี้
yo polymer:element foo
ซึ่งจะแจ้งให้เราทราบว่าต้องการนำเข้าองค์ประกอบโดยอัตโนมัติหรือไม่ จำเป็นต้องใช้คอนสตรัคเตอร์หรือไม่ และค่ากําหนดอื่นๆ อีก 2-3 อย่าง
แหล่งที่มาล่าสุดของแอปที่แสดงในทั้ง 2 เวอร์ชันพร้อมให้ใช้งานแล้วใน GitHub เราได้ปรับแต่งเพิ่มเติมอีกเล็กน้อยเพื่อให้เป็นระเบียบและอ่านง่ายขึ้น
ตัวอย่างแอป
อ่านเพิ่มเติม
โดยสรุปแล้ว Polymer คือไลบรารี JavaScript ที่เปิดใช้คอมโพเนนต์เว็บในเว็บเบราว์เซอร์สมัยใหม่ในตอนนี้ขณะที่เรารอให้คอมโพเนนต์เว็บใช้งานได้โดยค่าเริ่มต้น เครื่องมือสมัยใหม่จะช่วยปรับปรุงเวิร์กโฟลว์ของคุณได้ และคุณอาจลองใช้ Yeoman และ Bower เมื่อพัฒนาแท็กของคุณเอง
บทความอื่นๆ เกี่ยวกับเรื่องนี้ที่ควรอ่านมีดังนี้