Cara Membuat Elemen HTML-mu sendiri dengan Web Components

() translation by (you can also view the original English article)

Web Components saat ini sedang dibicarakan sebagai sebuah "perpindahan tektonik di pengembangan situs" yang akan datang yang menjanjikan pembetukan ulang desain lanskap web secara permanen. Pera pemain besar sedang berusaha untuk membawa web components ke kenyataan. Baik Google dan Mozilla perlahan-lahan memberikan dukungan bawaan browser.

Apa itu web components? Singkatnya,, web components memberimu sebuah cara untuk membuat elemen kostum HTML-mu sendiri yang bisa melakukan apapun yang kamu inginkan. Ketimbang memuat situsmu dengan markup yang bertele-tele, skrip panjang dan kode yang berulang, kamu membungkusnya ke elemen-elemen HTML yang rapi dan bagus.

Memahami Web Components

Cara termudah untuk memahami cara web components mengizinkanmu mengostumisasi elemen HTML adalah dengan melihat lemen yang telah kita ketahui dari HTML5 tag <video>. Menggunakan elemen ini kamu bisa meletakkan video hanya dengan beberapa baris kode, contohnya:

Kamu mungkin hanya melihat beberapa baris HTML di atas, tapi di balik layar, beginilah penampilan elemen <video> sebenarnya:

Secara bawaan, browser-nya menyembunyikan semua kode yang bertele-tele sehhingga kamu tidak perlu melihat atau khawatir mengenai penulisannya saat kamu ingin meletakkan sebuah video. Kamu cukup meletakkannya di tag <video> dan <source> dan kodemu siap berjalan.

Sebelumnya, hanya penyedia browser yang bisa membuat elemen dengan cara seperti ini. Namun, bayangkan jika kamu bisa menggunakan pendekatan yang sama untuk jenis konten yang lain?

Ambil gambar slideshow sebagai contoh. Biasanya kamu membutuhkan beberapa divs tersarang yang menahan nama-nama class tertentu untuk menangani pembungkusan slideshownya, membungkus tiap slide dan menambahkan caption dan thumbnails. Kamu juga harus menentukan semua opsi slideshow keseluruhan seperti efek transisi melalui beberapa inline jQuery / JavaScript.

Namun bagaimana kalau kamu bisa melewati itu semua dan hanya menggunakan:

1	<slide-show transition="fade">
2	<slide src="slideone.jpg" thumb="slideone_thumb.jpg" caption="Look at this image">
3	<slide src="slidetwo.jpg" thumb="slidetwo_thumb.jpg" caption="Look at this other image">
4	</slide-show>

Dengan web components, itulah yang bisa kamu lakukan.

Membuat Elemen HTML-mu Sendiri

Jika kamu ingin menyediakan sebuah metode ringkas dan mudah diletakkan yang jika tidak akan jadi berat dan kembung. Kamu bisa pergi dan membuat web component-mu sendiri.

Web components juga mudah dibagikan, jadi sebagai pengembang ada sebuah taruhan bagus bahwa kamu akan bisa mengambil web component yang telah terbuat untuk kebanyakan kebutuhan proyek. Kita telah melihat komponen opo up yang dibagikan secara bebas untuk semuanya mulai dari pengenalan suara.

hingga pembuat presentasi.

dan juga pembuat kode QR.

Mari lihat hal yang ada dibalik tirai web components

Apa yang Membangun Sebuah Web Component

Web components, seperti yang hadir saat ini, dibuat dari empat bagian:

Custom Elements
Shadow DOM
Templates
HTML Imports

Custom Elements

Custom elements, sesuai namanya: adlah elemen yang bisa dinamai apapun yang kamu mau, dan dioperasikan dengan cara apapun yang kamu inginkan. Dan saat saya bilang apapun dalam cara apapun, saya benar-benar serius. Contohnya, saya menghadrkan element <x-gangnam-style>:

Custom elements didefinisikan, dalam bentuk yang paling sederhana akan seperti ini:

1	<element name="x-gangnam-style">
2	...
3	</element>

Saat kamu membuat sebuah custom element kamu bisa melakukannya mulai dari awal, atau kamu bisa memperluas sebuah elemen HTML yang telah ada seperti <button> dan memberinya fungsi termodifikasi atau presentasi yang kamu butuhkan.

1	<element name="custom-button" extends="button">
2	...
3	</element>

Catatan: Penting untuk diingat bahwa tag <element> tidak berlaku lagi pada tahun 2013 karena komplikasi. Dia bisa membuat kembalian, namun sementara terdapat opsi polyfill yang akan kita bicarakan nanti. Terima kasih kepada Addy Osmani untuk menyorotnya!

Shadow DOM

Shadow DOM adalah aspek inti dari cara kerja web components. Sebelumnya kita melihat elemen <video> HTML5 dan menampilkan bahwa dibalik kode yang pendek tersebut, pada kenyataannya terdapat banyak kode tersembunyi pada dasarnya. Tempat kode tersembunyi ini hidup disebut "Shadow DOM".

Penyedia browser telah menggunakan shadow DOM ini selama bertahun-tahun untuk mengimplementasikan elemen secara bawaan seperti input, audio, video dan lainnya. Dengan web components, sekarang dia bisa digunakan oleh pengembang manapun.

Ide utamanya adalah kamu mengambil semua kode yang tidak begitu dibutuhkan selama peletakkan markup dan menyembunyikannya di dalam Shadow DOM. Ini membuatmu hanya berurusan dengan informasi yang bersangkutan, contohnya tinggi, lebar dan lokasi berkas saat menggunakan elemen <video>.

Satu hal terkeren mengenai penggunakan Shadow DOM adalah tiap instance memiliki dunia kecilnya masing-masing. Jadi jika kamu memberi style dan skrip di dalam elemennya. Mereka tidak akan secara tidak sengaja bocor dan mempengaruhi yang lainnya pada halaman.

Sebaliknya, CSS dan JavaScript ada ditempat lain dari halaman yang tidak akan mempengaruhi web component. Dengan pengecualian style hooks yang kame buat secara spesifik agar mengizinkan external CSS targeting. Ini berarti tidak perlu lagi khawatir mengani namespacing ID dan nama-nama class-mu untuk menghindari konflik.

Jika kamu ingin melihat wujud dari Shadow DOM, itu mudah. Pastikan kamu menjalankan versi terbaru Chrome, buka alat pengembang, klik ikon gear untuk membuka pengaturan dan klik Show user agent shadow DOM.

Lalu, saat kamu menginspeksi elemen apapun dengan shadow DOM kamu akan melihat kode lengkapnya. Coalah dengan mengisnpeksi elemen <x-gangnam-style> dengan dan tanpa menampilkan shadow DOM-nya: http://html5-demos.appspot.com/gangnam

Untuk daftar lengkap dari shadow DOM cek: Pengantar ke Shadow DOM

Templates

Kita telah membahas cara custom elements hanya mengizinkan informasi yang berkaitan untuk lebih fokus sementara sisa kode-nya disembunyinykan di shadow DOM. Sebuah template di dalam web component adalah yang menahan semua presentasi elemen dari sisa kode-nya.

Sebagai bagian dari kode yang mendefinisikan web component tag <template>...</template> diletakkan, dan di antara kedua tag tersebut komponen HTML dan CSS apapun harus dimasukkan.

Contohnya, perhatikan kode yang dibuat web component <x-gangnam-style>. tag <template> pembukanya ada di baris 4 dan penutup </template> ada di baris 201. di antara tag-tag tersebut akan akan melihat semua CSS yang bertanggung jawab untuk membuat posisi dan animasi. HTML meletakkan semua gambar yang dilibatkan.

HTML Imports

HTML imports mengizinkanmu untuk mengambil semua yang dideskripsikan di atas dan membuatnya benar-benar bekerja di halamanmu. Web components didefinisikan di dalam sebuah berkas HTML eksternal sehingga berka perlu diimpor agar custom element dapat bekerja. HTML imports menanganinya melalui tag <link> yang kamu nantinya akan terbiasa dari mengimpor berkas CSS eksternal.

Contohnya, sebelum kamu bisa menggunakan web component <x-gangnam-style> kamu harus mengimpor berkas HTML yang mendefinisikannya seperti ini:

1	<link rel="import" href="/components/x-gangnam-style.html">

Dukungan Browser dan Polyfills

Kemungkinan yang ditawarkan oleh web component membuka ide dari menyelam ke kepala terlebih dahulu menggunakan mereka jadi sangat menarik. Namun, saat ini browser masih belum mendukungnya. Keadaan sekarang dari dukungannya seperti ini:

http://jonrimmer.github.io/are-we-componentized-yet/

dukungan bawaan sedang berada dalam proses implementasi oleh Chrome, Opera dan Firefox namun masih belum selesai. IE dan Safari belum diketahui memiliki rencana, namun dipercaya bahwa saat mayoritas browser mendukung web component mereka akan mengikutinya.

Sekarang jika kamu ingin mulai bekerja dengan web component kamu akan menggunakan salah satu dari polyfills yang tersedia. Berita bagusnya adalah bahwa dua solusi paling populernya dibuat oleh Google dan Mozilla. Sehingga kita bisa berharap adanya konsistensi mengenai dukungan bawaan nantinya akan beroperasi.

Polymer oleh Google

susah untuk tidak bersandar ke Polymer yang diberikan Chrome yang merupakan browser yang paling banyak digunakan. Dan kamu bisa berasumsi pertimbangan akan diberikan selama pengembangan seiring web component akan diindex oleh Google.

Polymer hadir dengan pustaka lengkap dari web components yang sudah terpasang. Dia melingkupi "Polymer Core elements" yang berorientasi fungsi dan "Paper elements" yang berorientasi desain.

Saat membuat custom elements dengan Polymer, ketimbang menggunakan format <element name"..."> kamu akan menggunakan <polymer-element name="..">

Polymer mendeskripsikan dirinya sebagai "pratinjau pengembang" ketimbang siap untuk produksi, namun dia juga mengatakan

...ketimbang labelnya, banyak orang telah sukses menggunakan Polymer dalam produksi.

Dukungan Browser

Chrome Android
Chrome
Canary
Firefox
IE 10+
Safari 6+
Mobile Safari

Jika kamu ingin melayani IE9, yang diperkirakan memegang sekitar 1.9% hingga 5.11% pangsa pasar. Sayangnya kamu tidak beruntung dengan Polymer. Namun, kamu masih tetap bisa menggunakan Mozilla X-Tags.

X-Tags oleh Mozilla

X-Tags adalah pustaka JavaScript yang dibuat oleh Mozilla yang, saat ini, memiliki kelebihan di atas Polymer di mana dia mendukung lebih banyak browser. Jika itu adalah pertimbangan utamamu, maka X-tags bisa jadi preferensimu.

Dukungan Browser

Firefox 5+ desktop & mobile
Chrome 4+
Chrome Android 2.1+
Safari 4+ desktop & mobile
IE9+
Opera 11+ desktop & mobile

Dukungan IE8

Saat ini, jika kamu ingin mendukung IE8 sayangnya web component bukan untukmu karena ketersediaan polyfills hanya untuk IE9+. Diperkirakan bahwa pengguna IE8 berada disekitar 2.1% hingga 3.82%, tapi tentu saja jika statistikmu mengatakan hal yang berbeda kamu bisa menggunakannya sebagai pertimbangan mengenai seberapa jauh browser yang harus didukung.

Komponen Ember.js dan AngularJS

Saa cara yang mungkin kamu bisa mempersiapkan dirimu untuk bertransisi menggunakan web component adalah dengan menggunakan Ember.js atau AngularJS untuk saat ini. Keduanya memiliki sistem penciptaan komponennya sendiri dan keduanya menjanjikan transisi ke penggunakan web component bawaan situs saat dia benar-benar tersedia.

Komponen Buatan Komunitas

Pelajari Lebih Banyak

Kesimpulan

Saya harap kamu senang membaca ikhtisar dar apa itu web components dan mengapa kamu harus peduli! Ada lebih banyak lagi yang bisa kamu selami, tapi dengan dasar-dasar ini terbahas, kita memiliki banyak kesempatan untuk panduan-panduan mengenai pembuatan web components yang sebenarnya, Bagaimana pendapatmu? Pada keadaan apa kamu akan menggunakannya untuk dirimu sendiri?