Polymer คือประตูสู่อนาคตอันน่าทึ่งของ Web Components เราต้องการให้ใช้งานง่ายและสร้างองค์ประกอบที่กำหนดเอง ในปีที่ผ่านมา ทีมได้ทำงานอย่างหนักกับชุด Polyfill เพื่อข้อกำหนดที่เปลี่ยนแปลงอยู่ตลอดเวลา นอกจากนี้ เรายังได้สร้างไลบรารีน้ำตาลที่ใช้ง่ายเพื่อทำให้การสร้างคอมโพเนนต์เว็บต่างๆ ง่ายขึ้น สุดท้าย เรากำลังสร้างชุดองค์ประกอบ 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 ในปัจจุบัน ก็อาจเป็นแท็ก 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="{{isPhone}}"></…นี่คือแนวทางที่เราใช้ใน 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="{{foo}}"> - เครื่องจัดการเหตุการณ์ที่ประกาศ:
<button on-click="{{handleClick}}"> - พร็อพเพอร์ตี้ที่เผยแพร่:
xFoo.bar = 5<-> วันที่<x-foo bar="5"> - สำรวจอสังหาริมทรัพย์:
barChanged: function() {...} - เหตุการณ์ของตัวชี้ / ท่าทางสัมผัสของตัวชี้โดยค่าเริ่มต้น
ความเชื่อของเรื่องก็คือ การเขียนองค์ประกอบโพลิเมอร์เป็นเรื่องของการประกาศ ซึ่งยิ่งไม่ต้องเขียนโค้ดมากเท่าไหร่ ก็ยิ่งดีเท่านั้น ;)
คอมโพเนนต์ของเว็บ: อนาคตของการพัฒนาเว็บ
สไลด์: 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 ได้ที่ ebidel.github.com/webcomponents