Polymer adalah salah satu pintu gerbang menuju masa depan Komponen Web yang menakjubkan. Kami ingin memudahkan penggunaan dan pembuatan elemen kustom. Selama setahun terakhir, tim telah bekerja keras membuat serangkaian polyfill untuk spesifikasi yang terus berkembang. Selain itu, kami telah membuat library sugaring yang praktis untuk mempermudah pembuatan komponen web. Terakhir, kami membuat serangkaian elemen UI dan utilitas untuk digunakan kembali di aplikasi Anda. Di Chrome Dev Summit 2013, saya membahas 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 kustom)
Slide: http://html5-demos.appspot.com/static/cds2013/index.html#6
Membangun halaman web pada tahun 1990-an memiliki keterbatasan, tetapi efektif. Kita 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 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
- Mengaktifkan peristiwa saat terjadi hal menarik
Komponen Web menyediakan alat untuk kembali ke masa kejayaan pengembangan web ini. Satu tempat kita dapat membuat elemen baru, yang mengingatkan pada <select>, tetapi dirancang untuk kasus penggunaan tahun 2014. Misalnya, jika AJAX ditemukan saat ini, AJAX mungkin akan menjadi tag HTML (contoh):
<polymer-ajax url="http://gdata.youtube.com/feeds/api/videos/"
params='{"alt":"json"}'></polymer-ajax>
Atau elemen responsif yang melakukan data binding ke atribut queryMatches:
<polymer-media-query query="max-width:640px" queryMatches="">
Inilah pendekatan yang kami lakukan di Polymer. Daripada membangun aplikasi web monolitik berbasis JavaScript, mari kita buat elemen yang dapat digunakan kembali. Seiring waktu, seluruh aplikasi akan berkembang dari penggabungan elemen-elemen yang lebih kecil. Bahkan, seluruh aplikasi dapat menjadi elemen:
<my-app></my-app>
Membangun komponen web dengan fitur khusus Polymer
Slide: http://html5-demos.appspot.com/static/cds2013/index.html#37
Polymer 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=""> - 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 dari cerita ini adalah bahwa menulis elemen Polymer adalah tentang menjadi 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 lalai jika tidak memberikan apresiasi kepada standar di balik Komponen Web. Bagaimanapun juga, 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 menarik atau ditampilkan kepada pengguna. Fitur ini murni untuk produktivitas developer. Masing-masing dari empat API utama ini berguna, tetapi jika digabungkan, hal-hal ajaib akan terjadi.
- Shadow DOM - gaya dan enkapsulasi 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 - pembuatan template DOM yang tepat untuk menentukan potongan markup inert yang akan dicap nanti
Jika Anda ingin mempelajari lebih lanjut dasar-dasar API, lihat webcomponents.org.