Polymer adalah salah satu gateway ke masa depan Web Components yang luar biasa. Kami ingin mempermudah penggunaan dan pembuatan elemen kustom. Selama setahun terakhir, tim telah bekerja keras pada serangkaian polyfill untuk spesifikasi yang terus berkembang. Selain itu, kami telah membuat library sugaring yang praktis untuk mempermudah pembuatan komponen web. Terakhir, kita akan membuat serangkaian elemen UI dan utilitas untuk digunakan kembali di aplikasi Anda. Pada Chrome Dev Summit 2013, saya mempelajari berbagai bagian Polymer dan filosofi di balik mantra "Semuanya adalah elemen".
Slide: http://html5-demos.appspot.com/static/cds2013/index.html
"Semuanya adalah elemen" (dari <select> ke elemen kustom)
Slide: http://html5-demos.appspot.com/static/cds2013/index.html#6
Membuat halaman web pada tahun 1990-an memang terbatas, tetapi sangat efektif. Kita hanya memiliki beberapa elemen. Bagian yang hebat?...semuanya bersifat deklaratif. Membuat halaman, menambahkan kontrol formulir, dan membuat "aplikasi" sangatlah mudah tanpa perlu menulis banyak JavaScript.
Ambil elemen <select> yang sederhana. Ada banyak fungsi yang disertakan dalam elemen, cukup dengan mendeklarasikannya:
- Dapat disesuaikan melalui atribut HTML
- Merender turunan (misalnya
<option>) dengan UI default, tetapi dapat dikonfigurasi melalui atribut. - Berguna dalam konteks lain seperti
<form> - Memiliki DOM API: properti dan metode
- Memicu peristiwa saat hal menarik terjadi
Komponen Web menyediakan alat untuk kembali ke masa keemasan pengembangan web ini. Tempat kita dapat membuat elemen baru, yang mengingatkan kita pada <select>, tetapi dirancang untuk kasus penggunaan tahun 2014. Misalnya, jika AJAX ditemukan hari ini, mungkin akan berupa tag HTML (contoh):
<polymer-ajax url="http://gdata.youtube.com/feeds/api/videos/"
params='{"alt":"json"}'></polymer-ajax>
Atau elemen responsif yang mengikat data ke atribut queryMatches:
<polymer-media-query query="max-width:640px" queryMatches="">
Ini adalah pendekatan yang kita gunakan di Polymer. Daripada membuat aplikasi web berbasis JavaScript monolitik, mari kita buat elemen yang dapat digunakan kembali. Seiring waktu, seluruh aplikasi berkembang dari penggabungan elemen yang lebih kecil. Bahkan, seluruh aplikasi dapat menjadi elemen:
<my-app></my-app>
Mem-build komponen web dengan saus spesial Polymer
Slide: http://html5-demos.appspot.com/static/cds2013/index.html#37
Polymer berisi beberapa kemudahan untuk mem-build aplikasi berbasis komponen web:
- Pendaftaran elemen deklaratif:
<polymer-element> - Pewarisan deklaratif:
<polymer-element extends="..."> - Data binding dua arah deklaratif:
<input id="input" value=""> - Pengendali peristiwa deklaratif:
<button on-click="" - Properti yang dipublikasikan:
xFoo.bar = 5<-><x-foo bar="5"> - Pengamatan properti:
barChanged: function() {...} - PointerEvents / PointerGestures secara default
Pesan moralnya adalah menulis elemen Polymer harus bersifat deklaratif. Makin sedikit kode yang harus Anda tulis, makin baik ;)
Web Components: masa depan pengembangan web
Slide: http://html5-demos.appspot.com/static/cds2013/index.html#26
Saya akan melewatkan sesuatu jika tidak memberikan apresiasi kepada standar di balik Komponen Web. Bagaimanapun, Polymer didasarkan pada API dasar yang terus berkembang ini.
Kita berada di ambang era yang sangat menarik dalam pengembangan web. Tidak seperti fitur baru lainnya yang ditambahkan ke platform web, API yang membentuk Komponen Web tidak terlihat menarik atau ditampilkan kepada pengguna. Fitur ini murni untuk produktivitas developer. Masing-masing dari empat API utama ini berguna dengan sendirinya, tetapi jika digunakan bersama, hal-hal ajaib akan terjadi.
- Shadow DOM - enkapsulasi gaya dan DOM
- Elemen Kustom - menentukan elemen HTML baru. Berikan API dengan properti dan metode.
- Impor HTML adalah model distribusi untuk paket CSS, JS, dan HTML.
- Template - template DOM yang tepat untuk menentukan potongan markup yang tidak aktif yang akan dihapus nanti
Jika Anda ingin mempelajari lebih lanjut dasar-dasar API, lihat webcomponents.org.