Polymer adalah salah satu gerbang menuju masa depan Komponen Web yang luar biasa. Kami ingin memudahkan pemakaian dan pembuatan elemen kustom. Selama setahun terakhir, tim ini telah bekerja keras mengerjakan set polyfill untuk spesifikasi yang terus berubah. Selain itu, kami telah membuat library sugaring yang praktis untuk mempermudah pembuatan komponen web. Terakhir, kami sedang membuat serangkaian elemen UI dan utilitas untuk digunakan kembali di aplikasi Anda. Di Chrome Dev Summit 2013, saya membahas berbagai bagian Polimer dan filosofi di balik "Semuanya adalah elemen" mantra ini.
Slide: http://html5-demos.appspot.com/static/cds2013/index.html
"Segala sesuatu adalah elemen" (dari <select> hingga elemen khusus)
Slide: http://html5-demos.appspot.com/static/cds2013/index.html#6
Membangun halaman web di tahun 90-an itu terbatas, tapi ampuh. Kami hanya memiliki beberapa elemen yang dapat digunakan. Bagian yang hebat?...semuanya bersifat deklaratif. Sangat mudah untuk membuat halaman, menambahkan kontrol formulir, dan membuat "aplikasi" tanpa menulis rangkaian JavaScript.
Ambil elemen <select> yang sederhana. Ada banyak fungsi yang dibangun ke dalam elemen, hanya 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
- Mengaktifkan peristiwa saat hal menarik terjadi
**Komponen Web menyediakan alat untuk kembali ke masa kejayaan pengembangan web ini. Tempat kita dapat membuat elemen baru, yang mengingatkan pada <select>, tetapi dirancang untuk kasus penggunaan tahun 2014. Misalnya, jika AJAX ditemukan saat ini, mungkin itu adalah tag HTML (contoh):
<polymer-ajax url="http://gdata.youtube.com/feeds/api/videos/"
params='{"alt":"json"}'></polymer-ajax>
Atau elemen responsif yang data terikat ke atribut queryMatches:
<polymer-media-query query="max-width:640px" queryMatches="{{isPhone}}"></…Inilah pendekatan yang kami gunakan di Polymer. Daripada membangun aplikasi web berbasis JavaScript monolitik, mari kita buat elemen yang dapat digunakan kembali. Seiring waktu, seluruh aplikasi berkembang dari penyusunan elemen yang lebih kecil bersama-sama. Heck, dan keseluruhan aplikasi dapat menjadi elemen:
<my-app></my-app>
Membuat komponen web dengan saus spesial Polymer
Slide: http://html5-demos.appspot.com/static/cds2013/index.html#37
Polimer berisi sejumlah kemudahan untuk membangun aplikasi berbasis komponen web:
- Pendaftaran elemen deklaratif:
<polymer-element> - Pewarisan deklaratif:
<polymer-element extends="..."> - Data binding dua arah deklaratif:
<input id="input" value="{{foo}}"> - Pengendali peristiwa deklaratif:
<button on-click="{{handleClick}}"> - Properti yang dipublikasikan:
xFoo.bar = 5<-><x-foo bar="5"> - Observasi properti:
barChanged: function() {...} - PointerEvents / PointerGestures secara default
Inti dari cerita ini adalah bahwa menulis elemen Polimer adalah tentang menjadi deklaratif. Semakin sedikit kode yang harus Anda tulis, semakin baik ;)
Komponen Web: masa depan pengembangan web
Slide: http://html5-demos.appspot.com/static/cds2013/index.html#26
Saya akan lalai jika saya tidak menyebutkan standar di balik Komponen Web. Bagaimanapun, Polymer didasarkan pada API dasar yang terus berkembang ini.
Kita berada di titik awal masa yang sangat menarik dalam pengembangan web. Tidak seperti fitur baru lainnya yang ditambahkan ke platform web, API yang membentuk Komponen Web tidak transparan atau ditampilkan kepada pengguna. Aplikasi tersebut semata-mata untuk produktivitas developer. Masing-masing dari empat API utama bermanfaat, tetapi bersama-sama, hal-hal ajaib akan terjadi.
- Shadow DOM - gaya dan enkapsulasi DOM
- Elemen Kustom - menentukan elemen HTML baru. Memberi mereka API dengan properti dan metode.
- Impor HTML adalah model distribusi untuk paket CSS, JS, dan HTML.
- Template - pembuatan template DOM yang tepat untuk menentukan potongan markup inert yang akan diberi stempel nanti
Jika Anda ingin mempelajari lebih lanjut dasar-dasar API, lihat ebidel.github.com/webcomponents.