Polymer เป็นหนึ่งในประตูสู่อนาคตอันน่าทึ่งของคอมโพเนนต์เว็บ เราต้องการให้การใช้งานและการสร้างองค์ประกอบที่กำหนดเองเป็นเรื่องง่าย ในช่วงปีที่ผ่านมา ทีมงานได้ทำงานอย่างหนักเพื่อสร้างชุด 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
การสร้างหน้าเว็บในทศวรรษ 1990 มีข้อจำกัด แต่ก็มีประสิทธิภาพ เรามีองค์ประกอบเพียงไม่กี่อย่างที่ใช้ได้ ส่วนที่ทรงพลังคือ…ทุกอย่างเป็นแบบประกาศ การสร้างหน้าเว็บ การเพิ่มตัวควบคุมแบบฟอร์ม และการสร้าง "แอป" โดยไม่ต้องเขียน 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="">
ซึ่งเป็นแนวทางเดียวกับที่เราใช้ใน 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
ฉันคงจะพลาดไปหากไม่ได้พูดถึงมาตรฐานที่อยู่เบื้องหลังคอมโพเนนต์เว็บ ท้ายที่สุดแล้ว Polymer ก็สร้างขึ้นจาก API พื้นฐานที่พัฒนาขึ้นเหล่านี้
เรากำลังอยู่ในช่วงเวลาที่น่าตื่นเต้นอย่างยิ่งในการพัฒนาเว็บ API ที่ประกอบขึ้นเป็น Web Components ไม่ได้ดูน่าตื่นตาตื่นใจหรือแสดงต่อผู้ใช้เหมือนกับฟีเจอร์ใหม่อื่นๆ ที่เพิ่มลงในแพลตฟอร์มเว็บ แต่มีไว้เพื่อประสิทธิภาพการทำงานของนักพัฒนาซอฟต์แวร์เท่านั้น API หลักทั้ง 4 รายการมีประโยชน์ในตัวเอง แต่เมื่อใช้ร่วมกัน สิ่งมหัศจรรย์จะเกิดขึ้น
- Shadow DOM - การรวมสไตล์และ DOM
- องค์ประกอบที่กำหนดเอง - กำหนดองค์ประกอบ HTML ใหม่ ให้ API ที่มีพร็อพเพอร์ตี้และเมธอดแก่ผู้ใช้
- การนำเข้า HTML เป็นรูปแบบการเผยแพร่สำหรับแพ็กเกจ CSS, JS และ HTML
- เทมเพลต - การสร้างเทมเพลต DOM ที่เหมาะสมสำหรับการกำหนดมาร์กอัปที่ไม่มีการทำงานซึ่งจะนำไปใช้ในภายหลัง
หากต้องการดูข้อมูลเพิ่มเติมเกี่ยวกับพื้นฐานของ API โปรดไปที่ webcomponents.org