Polymer เป็นประตูสู่อนาคตอันน่าทึ่งของ Web Components เราต้องการให้การใช้และสร้างองค์ประกอบที่กำหนดเองเป็นเรื่องง่าย ตลอดปีที่ผ่านมา ทีมของเราได้ทุ่มเททำงานเกี่ยวกับชุด polyfill สำหรับข้อกำหนดที่พัฒนาอย่างต่อเนื่อง นอกจากนี้ เรายังได้สร้างไลบรารี Sugaring ที่สะดวกเพื่อให้การสร้างคอมโพเนนต์เว็บง่ายขึ้น สุดท้าย เรากำลังสร้างชุด 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
การสร้างหน้าเว็บในยุค 90 นั้นมีข้อจํากัด แต่ก็มีประสิทธิภาพ เราใช้องค์ประกอบได้เพียงไม่กี่อย่าง สิ่งที่ยอดเยี่ยมคือทุกอย่างเป็นแบบประกาศ การสร้างหน้าเว็บ เพิ่มตัวควบคุมแบบฟอร์ม และสร้าง "แอป" โดยไม่ต้องเขียน JavaScript จำนวนมากนั้นง่ายดายมาก
มาดูองค์ประกอบ <select> ที่แสนธรรมดา องค์ประกอบนี้มีฟังก์ชันการทำงานมากมายในตัว เพียงประกาศองค์ประกอบดังนี้
- ปรับแต่งได้ผ่านแอตทริบิวต์ HTML
- แสดงผลรายการย่อย (เช่น
<option>) ด้วย UI เริ่มต้น แต่กําหนดค่าได้ผ่านแอตทริบิวต์ - มีประโยชน์ในบริบทอื่นๆ เช่น
<form> - มี DOM API: พร็อพเพอร์ตี้และเมธอด
- เริ่มทํางานเมื่อเกิดเหตุการณ์ที่น่าสนใจ
คอมโพเนนต์เว็บมีเครื่องมือที่จะช่วยให้การพัฒนาเว็บกลับมารุ่งเรืองอีกครั้ง รูปแบบที่เราสามารถสร้างสรรค์องค์ประกอบใหม่ๆ ซึ่งชวนให้นึกถึง <select> แต่ออกแบบมาเพื่อกรณีการใช้งานในปี 2014 ตัวอย่างเช่น หาก AJAX เกิดขึ้นในวันนี้ แท็ก 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 มีความสะดวกหลายอย่างสําหรับการสร้างแอปพลิเคชันที่ใช้คอมโพเนนต์เว็บ
- การลงทะเบียนองค์ประกอบแบบประกาศ:
<polymer-element> - การสืบทอดแบบประกาศ:
<polymer-element extends="..."> - การเชื่อมโยงข้อมูลแบบ 2 ทางแบบประกาศ:
<input id="input" value=""> - ตัวแฮนเดิลเหตุการณ์แบบประกาศ:
<button on-click="" - พร็อพเพอร์ตี้ที่เผยแพร่:
xFoo.bar = 5<-><x-foo bar="5"> - การสังเกตพร็อพเพอร์ตี้:
barChanged: function() {...} - PointerEvents / PointerGestures โดยค่าเริ่มต้น
สรุปก็คือการเขียนองค์ประกอบ Polymer นั้นเน้นที่การประกาศ ยิ่งเขียนโค้ดน้อยลงก็ยิ่งดี ;)
คอมโพเนนต์เว็บ: อนาคตของการพัฒนาเว็บ
สไลด์: http://html5-demos.appspot.com/static/cds2013/index.html#26
เราคงต้องพูดถึงมาตรฐานที่อยู่เบื้องหลัง Web Components ท้ายที่สุดแล้ว Polymer ก็อิงตาม API พื้นฐานที่พัฒนาอย่างต่อเนื่องเหล่านี้
เรากําลังอยู่ในช่วงหัวเลี้ยวหัวต่อที่น่าตื่นเต้นมากในการพัฒนาเว็บ API ต่างๆ ที่ประกอบกันเป็น Web Components ไม่ได้เป็นฟีเจอร์ใหม่ล่าสุดหรือแสดงต่อผู้ใช้ ต่างจากฟีเจอร์อื่นๆ ที่เพิ่มลงในแพลตฟอร์มเว็บ ฟีเจอร์เหล่านี้มีไว้เพื่อประสิทธิภาพการทำงานของนักพัฒนาซอฟต์แวร์เท่านั้น API หลัก 4 รายการแต่ละรายการมีประโยชน์ในตัวเองอยู่แล้ว แต่เมื่อนำมาใช้ร่วมกันแล้ว สิ่งมหัศจรรย์จะเกิดขึ้น
- Shadow DOM - การรวมสไตล์และ DOM
- องค์ประกอบที่กำหนดเอง - กําหนดองค์ประกอบ HTML ใหม่ ระบุ API ที่มีพร็อพเพอร์ตี้และเมธอด
- การนําเข้า HTML คือรูปแบบการจัดจำหน่ายแพ็กเกจ CSS, JS และ HTML
- เทมเพลต - เทมเพลต DOM ที่เหมาะสมสําหรับการกําหนดกลุ่มมาร์กอัปที่ไม่มีการเปลี่ยนแปลงซึ่งจะประทับตราในภายหลัง
หากต้องการดูข้อมูลเพิ่มเติมเกี่ยวกับพื้นฐานของ API โปรดไปที่ webcomponents.org