Polymer 3.0 Preview; npm, ES6 Module

Polymer 3.0

ในงาน Polymer Summit 2017 ปีนี้มีโชว์ Polymer 3.0 ให้ดูด้วยว่าจะมีอะไรเปลี่ยนแปลงบ้างครับ

Bower → npm

Yarn + npm = npm with flat dependency tree

อย่างแรกเลย เปลี่ยนจากเอา Element ต่างๆไว้บน Bower มาอยู่บน npm แทน

ต้องเท้าความกันก่อนเลยว่าสาเหตุที่ของ Polymer และ element ต่างๆไปอยู่บน Bower ในตอนแรกเพราะ Bower รองรับ flat dependency แต่ตัว Bower เองเนี่ยไม่ได้รับการพัฒนาต่อแล้วและก็ไม่ค่อยมีคนใช้แล้วด้วย

ทางทีม Polymer เลยตัดสินใจย้ายไป npm เลยดีกว่าเพราะน่าจะทำให้คนเข้าถึง Web Component ได้เยอะขึ้นด้วย community ขนาดใหญ่ของ npm แต่ทางทีม Polymer เองก็ต้องหาทางทำให้ dependency ที่ติดมากับ package นั้นอยู่ในรูปแบบของ flat dependency ด้วย ซึ่งตอนนี้ก็มีท่าของ yarn เองที่สามารถทำ flat dependency ได้

HTML Import → ES6 Module

Es Module for loading custom component

Polymer เองใช้วิธีการโหลด dependency ตัวอื่นด้วย HTML Import ซึ่งตัว HTML Import เองเนี่ยมีฟีเจอร์เจ๋งๆตามนี้เลย

• Web-native loading mechanism. คือไม่ต้องใช้เครื่องมืออื่นช่วยในการโหลดโค้ดเลย
• Transitive loading of dependencies with ordered evaluation. คือการโหลด dependency ตามลำดับครับ เช่น ถ้าใน A โหลด B และใน B โหลด C แปลว่า C และ B จะถูกโหลดก่อน A
• Deduplication of dependencies by URL. ป้องกันการโหลด dependency ซ้ำครัช ถ้ามีการโหลด dependency ตัวเดิมหลายๆครังมันจะถูกโหลดแค่ครั้งเดียว
• Native HTML parsing. ตามชื่อเลยครับ parse HTML แบบ native ด้วย browser เอง

แต่ตัว HTML Import เองนี่ไม่ได้รับการตอบรับจากทางเหล่าชุมชน web standard และเหล่าเบราเซอร์ ถ้าจะรอให้ได้รับการยอมรับจากทุกคนนี่คงรออีกนานหลายปีเลยครับ

ในทางกลับกันตัว ES6 Module นี่ได้รับการตอบรับจากทุกเบราเซอร์ และทุก Browser ก็รองรับ ES6 Module ซึ่งตัว ES6 Module เองนี่มีฟีเจอร์คล้ายกับ HTML Import จะขาดก็แต่แค่ฟีเจอร์ Native HTML parsing

ทางทีม Polymer เลยเห็นว่าคงเป็นการดีกว่าที่จะย้ายไปใช้ ES6 Module ในการช่วยโหลด Element ข้อดีอีกอย่างคือจะทำให้สามารถใช้งานกับ JS Library หรือ framework ตัวอื่นได้ง่ายขึ้นด้วย

แล้วจะมาเมื่อไหร่

กำหนดการอย่างคร่าวๆของ Polymer 3.0

ตอนนี้สามารถลองใช้ 3.0 Preview ได้ที่ branch 3.0-preview ของ repo Polymer เลยครับ แต่ยังห่างไกลจากการที่จะเอาไปใช้บน production จริงนะครับ มีอีกหลายอย่างที่ทีม Polymer ต้องทำ ซึ่งอาจจะมีการเปลี่ยนแปลงอีกเรื่อยๆ

สำหรับใครที่ใช้ 2.0 อยู่ไม่ต้องห่วงนะครับ ทางทีม Polymer การันตีว่าจะสามารถย้ายไป 3.0 ได้อย่างง่ายดาย

อ่าน Blog ต้นฉบับได้ที่นี่ครับ
https://www.polymer-project.org/blog/2017-08-22-npm-modules

Polymer 3.0 preview: npm and ES6 Modules - Polymer Project