Polymer adalah salah satu gateway menuju masa depan Komponen Web yang menakjubkan. Kita ingin membuatnya mudah digunakan dan membangun elemen khusus. Selama setahun terakhir, tim kami telah berupaya keras mengembangkan serangkaian polyfill untuk spesifikasi yang terus berubah. Selain itu, kami telah membuat library sugaring yang praktis untuk mempermudah pembangunan komponen web. Terakhir, kami membuat serangkaian elemen UI dan utilitas untuk digunakan kembali dalam aplikasi Anda. Di Chrome Dev Summit 2013, saya menyelami 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> hingga elemen khusus)
Slide: http://html5-demos.appspot.com/static/cds2013/index.html#6
Membuat laman web pada tahun 1990-an memang membatasi, tetapi berpengaruh. Kita hanya memiliki beberapa elemen yang tersedia. Bagian yang hebat?...semuanya bersifat deklaratif. Membuat halaman, menambahkan kontrol formulir, dan membuat "aplikasi" tanpa perlu menulis banyak JavaScript di YouTube sangatlah mudah.
Ambil elemen <select> yang sederhana. Ada banyak fungsi yang terintegrasi 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 saat ini. Satu tempat kita dapat membuat elemen baru, seperti <select>, tetapi dirancang untuk kasus penggunaan 2014. Misalnya, jika AJAX ditemukan saat ini, kemungkinan itu adalah 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="">
Inilah pendekatan yang kita ambil di Polymer. Daripada mem-build aplikasi web berbasis JavaScript monolitik, mari kita buat elemen yang dapat digunakan kembali. Seiring waktu, seluruh aplikasi berkembang dari komposisi elemen yang lebih kecil. Heck, dan seluruh aplikasi dapat menjadi sebuah elemen:
<my-app></my-app>
Membangun komponen web dengan saus spesial Polymer
Slide: http://html5-demos.appspot.com/static/cds2013/index.html#37
Polymer memiliki sejumlah kemudahan untuk membuat 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
Moral cerita ini adalah bahwa menulis elemen Polymer 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 dituduh jika tidak menyebutkan standar di balik Komponen Web. Lagi pula, Polymer didasarkan pada API dasar yang terus berkembang ini.
Kita akan berada pada waktu yang sangat menarik dalam pengembangan web. Tidak seperti fitur baru lainnya yang ditambahkan ke platform web, API yang membentuk Komponen Web tidak berkilau atau ditampilkan kepada pengguna. Fitur ini hanya untuk produktivitas developer. Empat API utama tersebut memiliki manfaat tersendiri, tetapi jika digabungkan, hal-hal yang ajaib akan terjadi.
- Shadow DOM - enkapsulasi gaya dan DOM
- Elemen Kustom - menentukan elemen HTML baru. Beri mereka 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 inert yang akan dihapus nanti
Jika Anda ingin mempelajari dasar-dasar API lebih lanjut, lihat webcomponents.org.