Polymer เป็นประตูสู่อนาคตอันน่าทึ่งของคอมโพเนนต์เว็บ เราต้องการให้การใช้งานและสร้างองค์ประกอบที่กำหนดเองเป็นเรื่องง่าย ในปีที่ผ่านมา ทีมได้ทำงานอย่างหนักเพื่อออกแบบโพลีฟิลล์ให้ตรงตามข้อกำหนดที่เปลี่ยนแปลงอยู่เสมอ ยิ่งไปกว่านั้น เราได้สร้างไลบรารีการน้ำตาลที่สะดวกสบายขึ้นเพื่อให้สร้างองค์ประกอบต่างๆ ของเว็บได้ง่ายขึ้น ขั้นตอนสุดท้าย เรากำลังสร้างชุดองค์ประกอบ UI และยูทิลิตีเพื่อนำมาใช้ใหม่ในแอปของคุณ ในงาน Chrome Dev Summit ปี 2013 ผมได้พูดถึงส่วนต่างๆ ของ Polymer และหลักปรัชญาที่อยู่เบื้องหลังคติเรื่อง "ทุกอย่างคือองค์ประกอบ"
สไลด์: http://html5-demos.appspot.com/static/cds2013/index.html
"ทุกอย่างเป็นองค์ประกอบ" (ตั้งแต่ <select> ถึงองค์ประกอบที่กำหนดเอง)
สไลด์: http://html5-demos.appspot.com/static/cds2013/index.html#6
การสร้างหน้าเว็บในช่วงทศวรรษ 1990 นั้นมีข้อจำกัด แต่มีประสิทธิภาพ เรามีองค์ประกอบเพียงไม่กี่อย่าง ส่วนที่มีประสิทธิภาพนั้นก็คือ...ทุกสิ่งทุกอย่างล้วนแจ้งมาแล้ว การสร้างหน้าเว็บ เพิ่มตัวควบคุมแบบฟอร์ม และสร้าง "แอป" นั้นทำได้ง่ายมาก โดยไม่ต้องเขียน JavaScript
ใช้องค์ประกอบ <select> ที่เรียบง่าย องค์ประกอบนี้มีฟังก์ชันการทำงานมากมายอยู่แล้ว เพียงประกาศฟีเจอร์นี้
- ปรับแต่งได้ผ่านแอตทริบิวต์ HTML
- แสดงภาพย่อย (เช่น
<option>) ด้วย UI เริ่มต้น แต่กำหนดค่าได้ผ่านแอตทริบิวต์ - มีประโยชน์ในบริบทอื่นๆ เช่น
<form> - มี DOM API: พร็อพเพอร์ตี้และเมธอด
- เริ่มการทำงานของเหตุการณ์เมื่อมีสิ่งน่าสนใจเกิดขึ้น
Web Components เป็นเครื่องมือที่ช่วยให้สามารถกลับมาพัฒนาเว็บในยุครุ่งเรืองนี้ได้ จุดที่เราสามารถสร้างองค์ประกอบใหม่ๆ ที่ชวนให้นึกถึง <select> แต่ออกแบบมาเพื่อกรณีการใช้งานปี 2014 ตัวอย่างเช่น หากปัจจุบันมีการคิดค้น AJAX ก็อาจเป็นแท็ก HTML (ตัวอย่าง)
<polymer-ajax url="http://gdata.youtube.com/feeds/api/videos/"
params='{"alt":"json"}'></polymer-ajax>
หรือองค์ประกอบที่ปรับเปลี่ยนตามอุปกรณ์ซึ่งผูกข้อมูลกับแอตทริบิวต์ queryMatches ดังนี้
<polymer-media-query query="max-width:640px" queryMatches="">
ซึ่งเรากำลังนำมาใช้ใน Polymer แทนที่จะสร้างเว็บแอปแบบ JavaScript แบบโมโนลิธ เรามาสร้างองค์ประกอบที่นำมาใช้ใหม่ได้กัน เมื่อใช้งานไปเรื่อยๆ แอปทั้งแอปจะเริ่มจากการเขียนองค์ประกอบเล็กๆ ไว้ด้วยกัน และทั้งแอปอาจเป็นองค์ประกอบหนึ่งได้ดังนี้
<my-app></my-app>
การสร้างส่วนประกอบเว็บด้วยซอสสูตรพิเศษของ Polymer
สไลด์: http://html5-demos.appspot.com/static/cds2013/index.html#37
พอลิเมอร์มีความสะดวกในการสร้างแอปพลิเคชันที่ใช้คอมโพเนนต์เว็บ ดังนี้
- การลงทะเบียนองค์ประกอบเชิงประกาศ:
<polymer-element> - การสืบทอดค่าเชิงประกาศ:
<polymer-element extends="..."> - การเชื่อมโยงข้อมูลแบบ 2 ทางตามประกาศ:
<input id="input" value=""> - ตัวแฮนเดิลเหตุการณ์ประกาศ:
<button on-click="" - พร็อพเพอร์ตี้ที่เผยแพร่:
xFoo.bar = 5<-><x-foo bar="5"> - การสังเกตคุณสมบัติ:
barChanged: function() {...} - เหตุการณ์ Pointer / PointerGestures โดยค่าเริ่มต้น
หลักศีลธรรมของเรื่องราวคือการเขียนองค์ประกอบของพอลิเมอร์คือการประกาศ ยิ่งเขียนโค้ดน้อยเท่าไร ก็ยิ่งดี ;)
คอมโพเนนต์ของเว็บ: อนาคตของการพัฒนาเว็บ
สไลด์: http://html5-demos.appspot.com/static/cds2013/index.html#26
ถ้าไม่ได้พูดเรื่องมาตรฐานที่อยู่เบื้องหลังคอมโพเนนต์เว็บแล้วเราจะพลาดไม่ได้ ท้ายที่สุดแล้ว Polymer ก็ใช้ API พื้นฐานที่พัฒนาอยู่ตลอดเวลาเหล่านี้
ขณะนี้เรากำลังอยู่ในยุคที่น่าตื่นเต้นในการพัฒนาเว็บ API ที่ประกอบขึ้นเป็นคอมโพเนนต์ของเว็บไม่แวววาวหรือแสดงต่อผู้ใช้ ซึ่งต่างจากฟีเจอร์ใหม่อื่นๆ ที่เพิ่มเข้ามาในแพลตฟอร์มเว็บ ซึ่งใช้เพื่อประสิทธิภาพการทำงานของนักพัฒนาซอฟต์แวร์เท่านั้น API หลักทั้ง 4 รายการมีประโยชน์ในตัวมันเอง แต่เมื่อรวมกันแล้ว มหัศจรรย์ก็เกิดขึ้นจริง
- Shadow DOM - การห่อหุ้มรูปแบบและ DOM
- องค์ประกอบที่กำหนดเอง - กำหนดองค์ประกอบ HTML ใหม่ ให้ API ที่มีพร็อพเพอร์ตี้และเมธอดแก่พวกเขา
- การนำเข้า HTML เป็นรูปแบบการเผยแพร่แพ็กเกจของ CSS, JS และ HTML
- เทมเพลต - เทมเพลต DOM ที่เหมาะสมสำหรับการกำหนดกลุ่มมาร์กอัปเฉื่อยที่จะประทับตราในภายหลัง
หากต้องการดูข้อมูลเพิ่มเติมเกี่ยวกับพื้นฐานของ API ให้ไปที่ webcomponents.org