มีอะไรใหม่ใน Polymer 2.0 บ้าง

เมื่อวานในงาน Polymer Summit 2016 ที่ london ได้มีการเปิดตัว Polymer 2.0 ออกมา ซึ่ง จริงๆก็ปล่อย Preview มาซักพักนึงก่อนแล้ว สิ่งที่เปลี่ยนหลักๆก็มีตามนี้ครับ

Custom element v1

ใน Polymer version นี้ เปลี่ยนมาใช้ API ของ Custom element V1 แทน V0 ที่ deprecate ไปแล้ว ซึ่งยังไม่ได้มีการเทสว่า V0 กับ V1 ต่างกันเยอะมั้ยในเชิง ประสิทธิภาพ แต่ว่าใช้เชิงการใช้งาน function หลายๆอย่างเปลี่ยนรวมถึง lifecycle เปลี่ยนไป ทำให้ polymer ก็เปลี่ยน lifecycle ตามไปด้วย

Shadow dom v1

จริงๆส่วนสำคัญที่เปลี่ยนมาใช้ Custom element V1 ก็เพราะ Shadow dom V1 ที่ช่วยให้การจัดการ CSS ใน Scope ทำงานดีขึ้น (ถ้าใครไม่รู้ Polymer ก็สามารถทำ css ที่มีผลเฉพาะใน component ได้) ซึ่ง ตัว Shadow DOM เอง ก็จะช่วยให้ component render DOM ได้ดีขึ้นเพราะว่า ไม่ได้ใช้ DOM API เดิม เหมือนใน Polymer version เก่า ที่ต้อง add polyfill ในการจัดการ DOM มาเพื่อให้ switch กลับไปใช้ DOM API ได้ในกรณีที่ Browser ไม่ support แต่ใน Polymer 2.0 Polymer.dom สามารถจัดการ DOM API ได้ด้วยตัวเองแล้ว

ES6

ใน Version นี้ Polymer เปลี่ยนมาใช้ ES6 อย่างจริงจังแล้ว จะได้ดูเป็น standard มากขึ้น เพราะสุดท้ายแล้ว Polymer ก็ต้อง complie กลับเป็น ES ก่อนอยู่ดีถ้า create จาก polymer command line

Syntax

จาก Version 1 มา Polymer เปลี่ยนไม่เยอะมาก หลักๆคือเรื่อง ES6 ทำให้เราไม่ต้องกังวลเรื่องการอัพเกรดเลย แถม Ploymer ยังบอกว่า จะออก tools สำหรับ upgrade มาให้เราด้วยก่อนที่จะ Release version 2.0 ตัวจริง ซึ่งทำให้เราสะดวกมากๆ ในการเปลี่ยน Version

Performance

เท่าที่ทดสอบดู พื้นฐาน Polymer 2.0 ไม่ได้เร็วไปกว่า Polymer 1.0 มากนัก แต่เอาเข้าจริงๆ Version นี้ก็ยังเป็นแค่ Preview ซึ่ง ใน Network ยังโหลดไฟล์อยู่หลายไฟล์มาก ต้องดูกันอีกทีตอนเสร็จแล้ว ว่าจะเร็วกว่ามากมั้ย

แล้ว Component เก่าทำยังไง

ใน Polymer 2.0 จะมี Hybrid mode ซึ่งจะสามารถใช้ Component ของ 1.0 รวมกับ 2.0 ได้เลย เพียงแค่ต้อง Remove polyfill เดิมออก เพราะว่าใน 2.0 ไม่ต้องใช้แล้ว ส่วน component ก็ยังใช้งานได้เหมือนเดิม บอกเลยว่า สบายมากๆ รวมถึง Component เดิมของ polymer ไม่ว่าจะเป็น paper iron ก็จะทำงานบน Hybrid mode เหมือนกัน

ถ้าใครอยากจะลองดูว่า Polymer 2.0 มีอะไรอยู่บ้าง ก็ลองไปดูได้ที่ https://www.polymer-project.org/2.0/docs/about_20 จะมีรายละเอียดอยู่ หวังว่า ใกล้ๆจะมี อะไรออกมามากขึ้น เพราะตอนนี้ Doc ก็ยังไม่ออกเลย

อ้างอิง

Shadow DOM — https://developer.mozilla.org/en-US/docs/Web/Web_Components/Shadow_DOM

Custom Element — https://developer.mozilla.org/en-US/docs/Web/Web_Components/Custom_Elements