Chrome Dev Summit 2014 - โพลีเมอร์ - รัฐสหภาพ

ร็อบ ดอดสัน
ร็อบ ดอดสัน

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

ในการพูดคุยของเขาที่งาน Chrome Dev Summit Matt McNulty ผู้จัดการฝ่ายวิศวกรรมของทีม Polymer ได้อธิบายว่า Polymer คืออะไร รวมถึงได้อธิบายแผนกลยุทธ์ของ Polymer 1.0 เอาไว้ด้วย

โพลิเมอร์คืออะไร

อันดับแรก คำว่า Polymer คืออะไร

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

Polymer ช่วยให้นักพัฒนาซอฟต์แวร์สร้างแอปพลิเคชันได้เร็วขึ้น

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

Polymer ช่วยให้ Web Components มีคุณภาพดีขึ้น

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

การทดลองพอลิเมอร์

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

ต้องปรับปรุงการ์ดรายงานพอลิเมอร์

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

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

การเปลี่ยนแปลงที่กำลังจะเกิดขึ้น

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

เลเยอร์

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

โพลิเมอร์ได้รับการรีแฟคเตอร์เป็นชั้นๆ

การเชื่อมโยงข้อมูลอย่างง่าย

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

ทำให้การเชื่อมโยงข้อมูลง่ายขึ้น

DOM เงาเงา

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

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

ชิมเงาที่ไวขึ้นมาก

Polyfill ที่มีอยู่จะยังทำงานต่อไปในคอมโพเนนต์เว็บทั่วไปที่ไม่ใช่ Polymer

กำลังย้ายไปยัง webcomponents.org

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

เพื่อทำให้ความแตกต่างนี้ชัดเจนยิ่งขึ้น โพลีฟิลล์จะถูกย้ายไปยัง webcomponents.org และตอนนี้ได้เปลี่ยนชื่อเป็น webcomponents.js

Polyfill กำลังย้ายไปยัง webcomponents.org

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

ผลลัพธ์

แล้วผลลัพธ์จากการเปลี่ยนแปลงทั้งหมดนี้เป็นอย่างไรบ้าง

ความเร็ว

ตอนนี้ Polymer เร็วขึ้น 5 เท่าใน Chrome และใน Safari ก็มีความเร็วเพิ่มขึ้น 8 เท่า

Polymer ทำงานเร็วขึ้น 8 เท่าใน Safari

ขนาดไฟล์

ขนาดไฟล์ยังลดลง 87% จาก 123 KB เป็น 15 KB (บีบอัดเป็น 6 KB)

ตอนนี้ Polymer มีขนาดเล็กลง 87%

แผนการใช้งาน

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

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

แผนกลยุทธ์ของ Polymer, รุ่นเบต้าในไตรมาส 1, เวอร์ชัน 1.0 ในไตรมาสที่ 2

พรีวิว 0.8 มีให้บริการแล้วในรูปแบบของ GitHub (แต่ยังอยู่ในระหว่างการพัฒนาอย่างต่อเนื่องและยังไม่มีเอกสารประกอบ) รุ่นเบต้าอย่างเป็นทางการ 0.9 วางแผนไว้สำหรับไตรมาสที่ 1 ปี 2015 โดยจะมีเวอร์ชัน 1.0 เกิดขึ้นในช่วงไตรมาสที่ 2

การทดสอบสิ้นสุดแล้ว

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