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

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

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

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

คำถามแรกคือโพลิเมอร์คืออะไร

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

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

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

Polymer ทำให้คอมโพเนนต์เว็บทำงานได้ดียิ่งขึ้น

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

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

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

ต้องปรับปรุงการ์ดรายงาน Polymer

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

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

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

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

เลเยอร์

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

พอลิเมอร์เปลี่ยนโครงสร้างเป็นชั้นๆ แล้ว

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

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

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

Leaner Shadow DOM

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

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

Shim shadowdom ทำงานได้เร็วขึ้นมาก

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

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

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

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

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

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

ผลลัพธ์

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

ความเร็ว

เมื่อใช้ Chrome Polymer เร็วขึ้น 5 เท่า และใน Safari คุณเร่งความเร็วขึ้น 8 เท่า

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

ขนาดไฟล์

นอกจากนั้นไฟล์ยังได้ลดขนาดลง 87% จากขนาด 123 KB เหลือเพียง 15 KB (ซิป 6 KB แบบ gzip)

ตอนนี้พอลิเมอร์มีขนาดเล็กลง 87%

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

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

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

แผนกลยุทธ์สำหรับ Polymer รุ่นเบต้าในไตรมาส 1, 1.0 ใน Q2

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

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

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