Ngobrolin Web Components
Ringkasan Episode
Bantu KoreksiWeb components dijelaskan sebagai cara membangun antarmuka yang sudah tertanam di browser modern, jadi tidak bergantung pada framework mana pun. Konsepnya sama dengan komponen di React, Vue, atau Svelte — bungkus sekumpulan tag agar bisa dipakai berulang — bedanya ia bagian dari spesifikasi web itu sendiri. Contoh yang paling mengena: input bertipe date yang widget kalendernya kita pakai sehari-hari sebenarnya adalah web component; centang show user agent shadow DOM di setting, bagian preference dan isi dalamnya langsung terlihat. Ia bukan satu teknologi tunggal melainkan gabungan beberapa: HTML template untuk markup yang dipakai berulang (dan tidak ikut dirender, berbeda dengan div yang disembunyikan), custom element untuk mendefinisikan tag sendiri dengan nama yang wajib dua kata berpisah tanda hubung, shadow DOM yang mengurung styling agar tidak bocor ke global, plus slot untuk menyisipkan isi. Modul JavaScript disebut sebagai kunci yang akhirnya membuat semuanya bisa terenkapsulasi tanpa mengontaminasi yang lain. Yang menarik justru datanya: pemakaian web component malah menurun dari tahun ke tahun, dan HTML template hampir tidak terpakai sama sekali. Dugaan mereka soal eksposur dan pengalaman developer — banyak boilerplate, penamaan lifecycle yang tidak intuitif, dan gaya berbasis kelas yang terasa melawan arus saat ekosistem bergerak ke fungsional. Dari situlah lahir Lit dan Stencil sebagai pembungkus, sementara framework populer sendiri sudah bisa dikompilasi menjadi custom element.
Poin-poin Utama
- •Input bertipe date yang kita pakai sehari-hari sebenarnya adalah web component — centang show user agent shadow DOM di setting, bagian preference dan isi dalamnya langsung terlihat
- •Pakai HTML template, bukan div yang disembunyikan dengan display none, karena isi template benar-benar tidak dirender sementara div tetap dirender
- •Nama custom element wajib terdiri dari dua kata berpisah tanda hubung agar tidak bentrok dengan elemen bawaan HTML
- •Styling di dalam shadow DOM tidak terpengaruh style global, dan web component sebenarnya masih bisa dipakai tanpa shadow DOM
- •Modul JavaScript adalah kunci yang akhirnya membuat web component bisa terenkapsulasi — sebelumnya di browser semuanya global lewat tag script
- •Pemakaiannya justru menurun dari tahun ke tahun; dugaannya soal eksposur dan pengalaman developer — banyak boilerplate, penamaan lifecycle yang tidak intuitif, dan gaya berbasis kelas saat ekosistem bergerak ke fungsional
- •Framework populer bisa dikompilasi menjadi custom element, dan hasilnya lebih kecil karena mesin komponennya sudah ada di browser dan tidak perlu ikut diunduh
Selamat malam. Halo-halo semuanya.
Ketemu lagi kita di Ngobrol Inweb Setiap Hari Selasa Malam
dan malam hari ini formasinya lengkap, Ivan sudah kembali lagi, halo Ivan.
Halo, baik-baik saja cuma agak kurang, apa namanya, kurang sehat ya?
Kurang sehat, jadi ngomongnya akan pelan-pelan.
Asik, semoga cepat fit lagi karena sabtu besok bakal ngisi DevFace Bogor.
Bogor, betul.
Oke, kalau saya sendiri baru pulang dari Surabaya,
nah ini ada salah satu penggemar kita dari Surabaya, namanya Cator kemarin ketemu.
Wah, halo-halo.
Yes, dan kalau Eka berarti ngisi di Bali ya?
Tunggu lalu di Jogja, kemarin ini di Bali, sekarang masih di Bali.
Oh masih di Bali, oh iya, pantasan latar belakangnya itu.
Makanya yang background-nya, backgroundnya keren ya.
Working space, oke.
Perlu visa nggak?
Pake working visa gitu.
Kira-kira bakal live di pinggir pantai gitu nggak ya?
Ini ada, kita sapah-sapah dulu ya, ada Hello World,
ini programmer sekali ya, ada Agno Ria, halo-halo.
Dan seperti biasa, malam hari ini kita akan ngobrolin tentang teknologi web.
Ya, dan tentunya malam hari ini seperti judul, kita akan bahas tentang web komponen.
Ini adalah salah satu topik bahasan yang sempat ditanyakan juga oleh salah satu,
ya, teman-teman di chat minta menjelaskan tentang web komponen.
Oke, dan mungkin bisa saya mulai dulu ya, tentang web komponen itu apa.
Kebetulan saya udah pernah bahas juga di DevFace tahun lalu, 2021, DevFace Jakarta.
Masih online, jadi teman-teman masih bisa menikmati videonya,
ada slide-nya juga nanti dibagikan.
Tapi yang perlu dibahas di sini adalah, jadi web komponen itu adalah sebuah tools
atau alat bantu untuk membuat user interface atau antarmuka aplikasi web, ya.
Lihat transkrip lengkap (1046 segmen lagi)
Tapi perbedaannya dengan framework atau library sejenis adalah dia platform agnostik,
artinya tidak bergantung kepada framework, gitu.
Jadi dia sudah tertanam...
Dia bagian dari spesifikasi web itu sendiri ya, berarti?
Ya, sudah tertanam di web browser-web browser modern yang teman-teman gunakan,
itu sebenarnya sudah disediakan framework yang namanya web component,
UI library yang namanya web components, jadi tinggal digunakan, gitu.
Kita bisa, ya, seperti framework-framework yang teman-teman udah kenal ya,
React itu kan komponen base ya, disebutnya ya, angular, komponen base,
Vue.js bisa dibikin komponen juga, spelt juga, jadi kita...
Kalau spelt itu kayak kita tulis file dengan extensi spelt,
dia udah langsung jadi komponen, gitu kan.
Nah, web component ini konsepnya juga sama, jadi HTML-HTML tag yang kita butuhkan,
bisa kita bungkus sehingga kita bisa dipakai berulang-ulang, gitu.
Misalkan teman-teman bikin apa ya, bikin apa ya contohnya ya?
Counter lah, contoh standar, counter.
Kalau counter kan biasanya dipakai sekali, yang dipakai berulang kali apa ya?
- Misalkan kayak komentar, gitu. - Contoh misalnya post, ya, komentar, list,
post card, post card, misalnya kayak ada, ada, ada, ada, ada, image, ada, ada Excel-nya,
terus bisa dipakai berbagai, di macam tempat.
Iya, misalkan ada di halaman ini ada, pada card, di halaman yang lain ada card,
dengan isi atau konten yang berbeda itu bisa menggunakan web component,
jadi tidak perlu copy-paste.
Jadi web component itu encapsulasi dan the usable.
- Betul. - Dan ini udah include, apa, lifecycle juga ya, lifecycle event,
bisa buat client-site interactivity, jadi bedanya sama HTML elemen biasa kan,
sebenarnya kalau cuma yang statik kan kita tinggal pakai aja button, misalnya kalau perlu link,
tinggal pakai A, apa, kalau main A, kan udah cuma kalau kita butuh client-site interactivity
dan event-event tertentu dan behavior yang custom, nah, berarti ini lebih cocok
- sama custom elemen, ya? - Betul.
Contohnya adalah, contohnya adalah, nih, saya punya contoh, adalah sebuah input
dengan tipe date, seperti ini, jadi kalau teman-teman penasaran ini,
bohongan nih pakai library, saya kasih lihat kodenya ya, kodenya hanya ini nih, di baris 10.
Jadi input dengan tipe date, yang sebenarnya cukup baru ya, ya nggak baru-baru banget sih,
maksudnya dulu yang sebelum HTML5 belum ada kan, belum ada ya,
jadi dulu input hanya ada tipe text gitu kan, terus sekarang udah ada password,
ada number, ada macem-macem ya, salah satunya juga date.
Nah, kita bikin input dengan tipe date, terus kemudian kita buka di browser,
tampilannya sekarang sudah cantik seperti ini, sudah ada widget-nya gitu ya,
kita bisa pilih tanggal, mungkin kalau mau pakai time juga bisa,
terus kita bisa hapus, bisa pilih hari ini, gitu kan.
Kalau kita lihat di inspect element, di sini dia inputnya tipe date, gitu.
Nah, tapi kalau kita ke setting, kalau teman-teman belum pernah cintang,
di bagian bawah sini di preference ada ini, show user agent shadow DOM.
Dan kalau kita cintang, maka si input ini adalah sebenarnya web komponen.
Dia dimasukkan ke dalam shadow DOM, yang isinya adalah div,
kemudian di dalam div itu ada div lagi, kemudian ada span, ada macem-macem,
sampai akhirnya menjadi sebuah komponen yang digunakan dengan input dengan tipe date, gitu.
Jadi sebenarnya ini adalah contoh web komponen
yang mungkin teman-teman secara tidak sadar sudah menggunakan.
Dan dengan adanya web komponen, ya kita bisa bikin komponen-komponen seperti ini.
Jadi bisa aja nanti teman-teman bikin sebuah komponen button misalkan,
button dengan type primary misalkan. Wah, ini bootstrap banget ya.
Terus dijadikan satu library, pakai CDN, tinggal script SRC blablabla,
langsung bisa digunakan. Jadi dia sifatnya universal, sudah tertanam di browser,
sudah menjadi web standar, jadi ini tidak akan mungkin,
mungkin nggak sih, bakal dihilangkan gitu misalkan, kayak misalkan apa ya?
Kayak mungkin, se-extreme itu.
Ada tipe, salah satu tipe image yang tadinya di-support, sekarang udah nggak di-support.
Apa tuh? Apa ya?
Havif.
Yang Chrome hilangin beberapa minggu belakangan ini, lupa nih. Apa ya?
Havif bukan.
Bukan, bukan.
Itu malah ditambahin, malah baru itu.
Iya.
Jangan diliatin deh.
Oke, lanjut, lanjut.
Nah, cuma bedanya kalau kita bikin custom element sendiri, namanya mesti 2 kata ya?
Ya.
Biar nggak, jadi kalau yang netv yang bawaan asli, itu kan pasti selalu 1 kata.
Nah, kalau kita bikin sendiri, harus 2 kata.
Oh iya, pakai minus ya, kan ada minus ya?
Ya, benar, benar.
Ya, pollution.
Ya, sama seperti halnya kenapa react menggunakan hurk besar di,
kalau kita mau bikin komponen ya, salah satunya ya.
Supaya membedakan antara komponen yang dibuat sama komponen yang sudah ada di HTML.
Oh, halo.
Oh, putus-putus.
Oh, putus-putus ya, sorry, sorry, sorry.
Enggak, maksudnya gambarnya kalau soalnya itu last.
Oh, oke.
Ya, last go.
Last ya, siap.
Oh, gambarnya, mungkin koneksinya lagi drop ya.
Nah, terus selanjutnya sebenarnya web komponen ini bukan sebuah,
bukan satu teknologi yang apa ya, yang hanya udah web komponen gitu,
tapi dia ada terdiri dari beberapa teknologi dibalik si web komponen ini
yang membuat web komponen ini bisa digunakan.
Yang pertama adalah HTML template.
Kalau teman-teman belum tahu, HTML template ini adalah salah satu fitur
yang cukup baru juga dari HTML yang kita bisa gunakan
untuk menggunakan tag HTML berulang-ulang.
Jadi ada template ini bisa kita gunakan.
Kenapa?
Ini sudah lama loh ini.
Iya, sudah lama, tapi banyak yang belum tahu juga gitu.
Oke.
Karena ya itu kan biasanya kan, udah lah, pakai framework aja udah selesai.
Saya pakai waktu dulu, jamannya masih pakai jQuery dan Backbone,
pakai banyak pakai template.
Oke.
Itu dari tahun berapa tuh?
2017.
JQuery itu berarti 2015an gitu ya.
Ya, 2017 ya.
2017 sudah ada ya, tapi jarang dia menggunakannya.
Kalau di web Almanac ada nggak sih template?
Nah, itu.
Ada ya.
Oke, ini dia.
White component and shadow dong.
Template-nya ada nggak?
Ini khusus template maksudnya?
Oh nggak, nggak di breakdown.
Nggak di breakdown ya, oke.
Berarti ini disimpan untuk nanti.
Ya, jadi ada yang namanya template.
Bentuknya itu seperti inilah ya.
Kita bisa definisikan template dengan ID gitu kan.
Misalkan product raw, yang akan kita iterasi biasanya,
buat iterasi ya buat di for loop gitu kan.
Di reuse sih dia.
Ya, di reuse.
Nah, ini akan tampil berulang-ulang dengan bantuan JavaScript seperti ini.
Jadi di clone, di select dulu kan template-nya apa,
kemudian di clone, kemudian dimasukin isinya atau text content-nya,
kemudian di append.
Itu manual ya berarti?
Ya, ini manual.
Kalau misalkan datanya dari API atau database itu beda lagi kan.
Jadi dengan hari ini kalau teman-teman sudah nonton ini,
kalau misalnya semua yang ada di dalam template itu tidak didender oleh dozer.
Jadi lebih baik menggunakan template daripada
kalau kalian mau ulang-ulang pakai div tapi di display not.
Ya, jangan pakai div tapi pakai template.
Karena div akan di render meskipun display not.
Walaupun display not, oke.
Ya, tadi saya baru ketemu ternyata Chrome sudah me-remove support untuk image JPEG XL.
Apa itu?
JPEG XL itu adalah format image yang kekinian dari JPEG.
Ya, jadi lebih kecil.
Dengan kualitas yang hampir sama, dia bisa menghasilkan ukuran gambar yang lebih kecil.
Sayangnya kurang dapat exposure yang bagus di Chrome.
Kemudian dibutuhkan untuk di-remove.
- Mungkin juga karena ada... - Agen kayaknya kalau saling sama WebP sama Aviv, ya.
Dia lebih memprioritaskan Aviv kayaknya.
Oke, kita lanjut lagi.
Nah, ini yang tadi yang pertama ya, komponen pertama adalah template.
Komponen kedua adalah custom komponennya sendiri.
Custom element.
Ya, sorry, custom element.
Custom elementnya sendiri, kita bisa bikin element masing-masing.
Mau bikin element date, misalkan tadi.
Mau bikin button, mau bikin apa, gitu ya.
- Bentuknya seperti ini. - Ini penyambungnya.
Penyambungnya, betul.
Kita define dulu custom elementsnya.
Namanya seperti yang tadi disebutkan Eka, harus dua kata.
Dan harus dipisah dengan tanda minus atau dash.
Ya, penulisannya harus seperti ini.
Misalkan kayak contoh di video yang saya buat adalah counter.
Terpaksa saya harus bagi dua jadi C, counter.
Atau apapun ya, pokoknya harus dibagi dua.
Nggak boleh satu kata.
Jadi itu semakin menyulitkan developer lagi ya.
Untuk pilih nama variable-nya susah ya.
Nah, terus komponennya sendiri ditulis dengan syntax class.
- Ya, kalau teman-teman... - Oke banget ini.
Dengan react, react jaman dulu ya.
Mirip banget.
Jadi pakai class, kemudian di-extend dari HTML.
Kok HTML paragraph ini contoh ya?
Itu contoh bisa. Jadi HTML element itu ada banyak.
- Jadi di-extend ya? - Bapaknya itu HTML element.
- Terus ada HTML element biasa. - HTML element biasa.
Ada HTML table element, ada HTML div element, macem-macem.
Oke. Wah, ini ternyata image format ada geng-gengannya ya.
Baru tahu saya. Saya ikutan geng mana ya?
Kayak Afif lah, udah yang paling baru.
Oke, dan kemudian seperti yang tadi di-mention juga sama Eka,
sudah ada lifecycle-nya.
Salah satunya adalah connected callback ini seperti
component did mount, kalau nggak salah.
- Bener nggak? - Betul, betul.
Jadi kayaknya dia fire kalau udah di-render di DOM.
Dia dimasukin ke DOM, itu akan jalan connected callback.
Kalau dia dihapus dari DOM, dia jalan disconnect callback.
Di sini ada contoh yang panjang nggak? Oh, ini panjang sekali.
Ya, ini contohnya pop-up ya.
Contoh yang dari gua itu bagus nanti. Bisa dikulik sama-sama.
Oke, yang ini ya.
Oke, itu gua jelasin sedikit aja ya.
Jadi di sini itu user card. Jadi user card itu nama komponennya.
Tujuannya menyampilkan foto, nama orangnya, informasi,
dan ada button untuk pada click event handler-nya.
Coba aja click, hide info, hide info.
Click button, iya.
Ada event handler-nya.
Kita ke halaman JS-nya, ke bagian column JS paling bawah dulu.
Oh, di sini nggak ada hide info ya?
- Di bawah ya? - Iya, di JS-nya.
Ke JS kita ke baris paling bawah, jadi kita jelasin dari paling bawah dulu.
- Ini template ya? - Iya.
Paling bawah dulu, paling bawah.
Ngehooknya itu sama Windows, Custom Elements, Define, user card.
Cara pemakaiannya user card-nya seperti tag HTML element ya.
Kayak PDIV ya, user card.
Terus user card yang itu adalah HTML class-nya.
- Yang ini ya? - Ya, maksudnya user card yang...
Oh, yang ini.
Ya, yang kita baca HTML class-nya dulu.
Oke, user card itu Extend, HTML element.
Terus dia nge-attach shadow... ada constructor, dia nge-attach shadow-dome.
Pacaran nge-attach shadow pakai attach-shadow.
Terus ada shadow-root.
Shadow-root, dia mengambil dari template, nanti template-nya didefine di atas.
Oke, jadi hanya seperti itu aja dulu cara pakaiannya.
Jadi dan query selektor itu hanya nanti untuk mengambil data dari kayak atribut name,
ada atribut avatar, ada kan?
Di user card itu ada atribut name sama atribut avatar.
Jadi di template-nya dia query selektor, H3, ambil atribut name,
terus kemudian atribut avatar, terus dia isi.
As simple as that gitu ya. Terus kita lihat template-nya.
Template-nya di atas, ini HTML template ya, termasuk juga styling-nya ya.
Betul, jadi dia langsung bisa aja template itu didefine di HTML,
bisa aja kalau mau, bisa juga di JavaScript caranya document create element template.
Terus disini innerHTML.
Oke, nah udiknya atau bagusnya web component ini,
style yang kita define di dalam web component tidak akan mengikuti style yang ada di global.
Jadi global style tidak.
Isolated.
Scooping.
Tapi kalau pakai Shadow DOM ya.
Kalau pakai Shadow DOM sebenarnya web component ini bisa tanpa Shadow DOM, bisa.
Ini ya tadi ya? Shadow ini ya?
Betul, itu line yang membuatnya jadi Shadow DOM.
Oke.
I'm sorry.
Nah, jadi styling-nya hanya berlaku di dalam web component.
Kita scroll, cuma styling biasa yang membuatnya grid, blablabla.
Kita lihat HTML ya, jadi cuma div user card, image, tadi diisi dengan atribut source.
Terus kemudian a3, diisi dengan atribut main.
Terus kita lihat nih ada yang baru nih, slot, itu ada slot.
Slot itu dari, jadi lihat di sebelah kiri, dalam user card itu ada div slot namanya email.
Terus isinya apa? Nanti isi dari slot itu akan dibawah ke dalam slot itu.
Jadi children-nya ya?
Betul.
Akan dirender sebagai children.
Iya, tapi keyword-nya itu slot.
Jadi kita pakai div atau pick slot apa.
Pada dikasih name, nanti panggil aja slot namenya apa.
Wah, di swipe nih sering sekali digunakan.
Kalau yang pakai slot pasti deh familiar.
Apa lagi ya kalau, kalau view ada gak sih, kalau slot gitu juga?
Kalau view gak tahu ya, kalau view kan sudah ada binding-nya itu pakai v apa gitu ya.
Tapi ini HTML kan, bukan terkait sama frame apa.
Ini vanilla, ini tidak ada pakai frame apa-apa.
Di view juga ada tuh katanya, bener.
Iya, orang HTML kok semuanya bisa pakai.
One last thing itu tentang lifecycle. Kita scrolling ke bawah sedikit.
Di bagian connected callback ya?
Iya, connected callback.
Jadi di bagian ini dia menambahkan event list banner click untuk toggle info tadi, hide info, show info.
Dan untuk auto disconnect dia remove list banner aja.
Toggle info itu ada function sendiri, ya cuma kayak display man, display block aja sih sebenarnya, simple aja.
Gak ada banyak macam-macam, as simple as that.
Jadi ini contoh yang saya lihat dari si Thank You untuk si Brad dari Traverse Media.
Ini contoh yang paling simple untuk dimengerti bagaimana menggunakan web component.
Simplet dan jelas ya, jelas bagiannya gimana.
Iya, cuman komplain saya satu, kenapa namanya connected callback, disconnected callback, gak kayak apa ya, kurang merepresentasikan gitu.
Tapi masing-masing apa mereka juga waktu bikinnya juga pasti mikirin kan ini.
Mungkin ada konsep atau ada istilah yang belum kita ketahui.
Maksudnya connected callback ini apa, disconnected callback itu apa?
Dan itu kan kayaknya dibikinnya udah dari dulu ya, dari sebelum trend UI framework yang kayak React.
Ya, component with mount gitu-gitu ya.
Istilah yang sekarang familiar itu dulu belum jadi istilah taman kami.
Bisa jadi.
Padahal web component ini sebenarnya sudah ada sebelum React kan ya?
Ah, gak tahu kalau itu.
Maksudnya web component ini udah lama loh.
Tapi mature-nya atau sudah di support-nya kan baru kan?
Iya sih.
Belum semua, jadi mungkin yang kayak custom elemen ini udah lama memang, custom elemen udah lama.
Shadow DOM saya gak tahu.
Kalau template juga udah lama tadi kan, kalau Ivan udah pernah pakai di 2017.
Cuman ada beberapa elemen yang membuat web component ini menjadi sulit digunakan.
Sampai akhir-akhir ini.
Iya, yang pertama shadow DOM.
Shadow DOM-nya yang masih belum fully support.
Iya, kalau misalkan kita bikin sebuah component terus ada style-nya tiba-tiba berlaku global kan susah kan?
Gitu kan?
Susah digunakan.
Dan satu lagi component yang juga cukup penting walaupun tidak di ranah HTML CSS adalah import dan export.
IS module.
Jadi dengan IS module ini kita bisa dengan mudah, lebih mudah lah ya.
Terutama di browser ya.
Kalau di Node.js kan udah ya pakai require lah, cuman beda syntax aja.
Tapi fungsinya sama.
Sedangkan di browser, dulu browser itu belum ada.
Tidak ada sama sekali import-export.
Kita cuma taro CDN, script SRC gitu ya.
Nah itu udah diimport secara global.
Rescondition ya? Udah, nasib.
Iya, karena IS module yang membuat si web component akhirnya bisa menjadi ter-encapsulasi tanpa bisa mengkontaminasi
komponen-komponen lain di luarnya gitu.
Jadi apa launchingnya IS module sama pola import-export itu beneran mengubah...
Mengubah landscape ya.
Mengubah landscape web banget ya.
Dulu kan pas feed tuh kita bahas feed juga, topiknya mirip kan, kayak gini.
Apa sih feed itu dibikin karena si mas FNU-nya sadar bahwa oh ya import udah...
Native browser import udah didukung di banyak browser.
Ya, lanjut.
Lanjut, oke.
Nah, lanjut berikutnya kita masih ada hubungannya di 2 episode sebelumnya tentang web almanak.
Nah, di sini ada insight yang menarik.
Kenapa web component masih belum juga banyak yang menggunakan?
Banyak kenapa?
Kenapa? Karena banyak yang belum tahu ya? Atau karena sudah termudahkan dengan framework-framework kali ya?
Atau mungkin karena kurang gimmick gitu nggak sih?
Kurang gimmick ya.
Kalau react atau swell dan lain-lain kan banyak konten yang menarik di social media atau mungkin di akun-akun kita di hacker news atau di mana pun.
Jualan gitu ya, jualan.
Kita buka youtube, banyak tutorial yang dikemas narik dengan berbagai bahasa.
Maksudnya bahasa Indonesia, bahasa Inggris, berbagai style belajar.
Itu jelas.
Mungkin karena gitu nggak, untuk karir info aja nggak ada.
Dicari web component.
Web developer yang ngerti web component.
Pasti carinya react developer, feel developer.
Maybe, maybe.
Iya kan, yang paling populer kan react kan, gitu kan.
Ini, mungkin ada benarnya nih, susah pakai web component.
Iya, masih lebih banyak.
Ya, saya juga waktu bikin component ini.
Masih banyak boilerplate code yang harus kita tulis.
Benar, benar. Ada benarnya.
Memang sulit.
Tapi, di sisi yang lain, web component ini ya, nggak ada extra kilobytes yang harus didownload oleh user, gitu kan.
Iya, sebenarnya itu keren banget kalau dari performance dan machine performance sama resilience ya.
Itu kan beneran makin dekat dengan javascript dan behavior browser asli.
Kedepannya ya relatif aman lah.
Kayak misalnya contohnya kalau react kan implementasi ya.
Itu react itu kayaknya kalau dari segi paradigm kan kayak kebalikannya banget tuh.
Sampai dom pun dia bikin dulu copy sendiri kan, virtual dom.
Makanya kan makin setiap ganti versi react,
selalu ada heboh-heboh ada hook baru, ada hook yang tidak jadi dipakai,
ada behavior baru dalam streaming component misalnya.
Ya, bukan salah ya, bukan salah benar.
Cuma karena dia bikin abstraksi yang custom dan kompleks,
ya kedepannya bakal bisa aja banyak feature yang berubah secara ekstrim.
Sedangkan kalau si custom element ini kan deket banget sama bahasa-bahasa asli
yang bisa dibaca oleh browser yaitu HTML, Javascript, CSS.
Jadi sebenarnya still formulate juga di situ, cuman ya itu yang pake dikit.
Dan makin lama makin tahun makin turun.
Jadi kan tadi kita lihat tuh 2021 itu yang desktop itu tadinya 3% kalau nggak salah.
Sekarang jadi 2%.
Nah, sementara yang mobile tadinya 4% turun jadi 0,39.
Ya, fenomena menarik ya.
Fenomena menarik? Mungkin ya, mungkin ya.
Mungkin karena adaptasinya masih belum ada perusahaan yang cukup besar
menggunakan web components gitu atau belum terekspos.
Ada cuman ya, itu nggak terekspos aja.
Ya dibandingkan sama Facebook gitu kan, kalau Facebook pake react gitu kan.
Atau bahkan yang membuat react kan pasti orang berpikir,
wah di Facebook aja yang seskel Facebook aja udah pake react gitu.
Nah, aplikasi kita ya berarti bisa nih pake react gitu kan.
Atau spelt misalkan di perusahaan apa, di portal berita misalkan.
Wah, di portal berita ini udah pake spelt gitu kan.
Ya, gitu-gitulah. Exposure aja mungkin ya.
Jualannya kurang gitu ya.
Ya, bedakan antara virtual dom.
Sebenarnya kalau ada Google pake, cuman nggak terlalu dipromote aja ya.
Di sini ada keywordnya, ada keyword yang saya baca itu adalah
framework-frameware seperti react gitu kan, pakenya virtual dom.
Sedangkan web component itu shadow dom.
Ya, itu dua konsep yang berbeda.
Ya, jadi buat teman-teman supaya nggak hilaf,
kalau web component itu sama pake virtual dom bukan, dia pake shadow dom.
Ya, kembali ke tadi si apa nih, Vida, katanya memang susah pake web component.
Mungkin ini ya, ada feedback atau masukan untuk web component juga adalah yang pertama gitu.
Kalau framework lain kan lumayan apa ya, lumayan mengedepankan developer experience kan.
DX-nya bagus.
Ya, kalau web component jujur aja, developer experience-nya masih agak tertinggal dibandingkan framework.
DX di sini bisa macam-macam ya, bisa cara penggunaannya, boilerplate code-nya juga lebih sederhana gitu kan.
Terus juga, termasuk juga tutorial.
Terus juga termasuk juga tutorial, semakin kesini pasti akan semakin banyak tutorial
yang berkaitan dengan ini dan semakin developer experience-nya akan semakin baik gitu.
Sama, apa lagi tadi ya, sempat kepikiran tapi lupa, ya udah, nanti aja.
Oke, kita lihat dulu ya yang di sini ya, web component dan shadow dom.
Jadi web component itu turun dari 3% ke 2%, kemudian shadow dom itu lumayan naik ya.
Oh, turun dari 4, dari 0,4, sorry, 0,4, jadi 0,39.
Tuh, template tuh, 0,05%, yang pakai Ipan doang nih, 0,05.
Swear, gue banyak pakai template, lo jawab dulu, apalagi tambahin underscore.
Naik tuh 0,05%.
Yang pakai Ipan doang. Ini is atribut kita juga jangan pakai ya.
Tapi lumayan menyedihkan ya, melihatannya ya.
Jadi gue pakai jaman dulu tuh namanya, kalau pakai template, pakainya dari underscore.
Jadi tetap pakai template, terus kemudian baca template-nya pakai underscore.
Supaya connect-nya ke backbone.
Tapi gue sering pakai, swear, gue pakai ini sering.
Ya, percaya, percaya, percaya.
Gue nggak tahu kenapa jadi kurang popular.
Ya, itu karena framework, jadi udah disiapin semuanya, template-template-nya juga udah.
Sementara dulu waktu framework yang dibikin, fitur template ini belum ada, mungkin ya.
Nggak tahu juga. Nah, tadi yang mau saya bahas adalah web component ini yang seperti di contoh di sini,
kalau misalkan nanti teman-teman aplikasinya udah mulai kompleks,
mau dipakaiin Redux, bisa.
Mau pakai state management apa, bisa.
Ya, ini HTML, sorry, ini JavaScript, HTML.
Jadi mau ditambahin library apa juga bisa.
Asal library-nya itu yang JavaScript juga.
Kalau Redux itu kan nggak ada hubungannya sama React kan sebenarnya kan.
Walaupun ya dia berkaitan gitu kan.
Tapi itu adalah library JavaScript, bukan library React ya.
Terus, lanjut lagi.
Makanya yang tadi kita sebutkan ada developer experience-nya kurang bagus,
karena banyak boilerplate code, kemudian penamaannya unik,
life cycle-nya juga namanya juga agak berbeda dengan yang biasa kita tahu,
makanya muncul framework framework.
Terus objek orientasi, segala macem di this dot something-something,
itu kan objek orientasi banget dan ya, perkara selera sih.
Banyak developer yang banyak programmer JS yang kurang suka dengan cara kayak gini kan, kurang cocok.
- Iya. Dia seolah-olah anti-mainstream ya.
Orang dari kelas menuju ke fungsional dia sementara dia...
- Dia selalu kelas. - ...kelas aja udah.
Atau nanti dia mau ngikutin ya, kita nggak tahu kan.
Tapi ini kayak React zaman dulu ya, this dot something dot bind dot something dot this, gitu kan.
Mirip-mirip juga kan, gitu kan.
Tapi React-nya sendiri udah berubah dan lucunya adalah fun fact-nya adalah si React ini kenapa mereka dulu menggunakan kelas.
Jadi ada alasan supaya teman-teman kita yang belum familiar dengan JavaScript
atau yang dari dunia objek orientasi programming seperti Java.
Iya, familiar, merasa familiar dengan kode ini.
Dan kemudian setelah mereka terjerumus, akhirnya dijerumuskan ini juga fungsional.
- Jadi ini fungsional semua. - Ini sebenarnya fungsional bukan kelas, gitu kan.
Bukan OOP.
Ya gitu lah, saya tanya ya, gossip-nya seperti itu kenapa React awalnya menggunakan kelas.
- Dibakan ya berarti? - Dibakan, iya.
Oke, jadi tadi saya sempat bahas sedikit dengan kurangnya DX atau Developer Experience
yang disediakan oleh Native Web Component, makanya muncul Framework Network.
Salah satunya adalah Lead ya, Lead ini yang cukup pernal.
Dia membungkus si Web Component sehingga cara penggunaannya jadi lebih sederhana.
Ada contohnya nggak? Getting Started.
Ada lagi yang namanya, yang keluarannya Mozilla apa? Stencil ya?
- Stencil ionic. - Stencil ionic ya, ionic.
Di sini ada fans-nya ionic nih, Bahyu.
Dia nge-fan sama angular dia, sama ionic.
Ya, jadi bentuknya kayak gini.
Sudah bisa pakai TypeScript juga tentunya.
Kita import dulu HTML, CSS, sama Lead elemennya.
Ya, Lead-nya sendiri sebenarnya yang agak sedikit misleading adalah
dia ada dua komponen kan, ada dua item kan sebenarnya kan.
Lead HTML sama Lead ini, bener nggak sih?
Nggak ada ya? Oh, Lead aja ya?
- Lead aja. - Oke, salah berarti.
- Lead elemen gitu. - Ya, Lead elemen, oke.
Terus kita pakai kelas ya, di sini kita pakai kelas,
di Extend tapi bukan HTML, melihatkan Lead Elemen.
Terus kemudian ini definisikan CSS-nya, terus di-render.
- Nah, ini udah agak familiar ya? - Ya, lebih rapi sedikit ya.
Ya, lebih rapi ya.
Terus kita tambahkan ini, Dekorator Custom Elements,
Simple Greeting untuk penamaan.
Penamaannya seperti ini, jadi nggak perlu pakai yang tadi,
yang di bawah tadi Custom Elements ini.
Ini adalah penggantinya adalah ini, Custom Elements ini.
- Kemudian kalau kita lihat... - Sebenarnya sama.
- Sama. - Di belakangnya sama.
- Sama, ini nanti di-compile menjadi itu, gitu. - Yang menurut itu.
Nah, sekarang kalau kita lihat ininya mana ya?
Life Cycle-nya mana? Kok nggak kelihatan Life Cycle-nya?
Ini Hello World, Hello Mars, nggak ada ininya ya?
Oh, kliknya langsung di sini.
Jadi kalau on take, dia langsung di sini.
Aklik ya, dan ini pakai dollar kurang-kurang awal,
ini juga dari JavaScript ya, jadi nggak.
Ya. Life Cycle-nya mana?
Kita mau cari Life Cycle, di sini ada nggak?
- Life Cycle, oh, nggak ada. - Tidak ada.
Gak ada ya? Bagaimana cara itu?
Component beat mount gitu-gitu nggak ada ya?
Ya, saya lihat sendiri.
Tutorial, intro to lead.
Sama, ke sini juga? Oh, nggak.
- Langsung jalan. - Tapi ini enak ya,
udah ada Apple-nya, Live Playground-nya.
Mereka mencontek tutorialnya Svelte, ya.
Kayak gini nih, web component aslinya nggak ada bikin beginian ya?
Nggak ada. Ini framework juga ya, framework di atas web component ya.
Framework di atas web component.
Jadi, ini adalah salah satu, kemudian salah duanya ada tadi stencil,
- lalu kemudian... - Ada NNs.
Iya, ada NNs yang nanti kita akan bahas, tapi sebelum kesana
saya mau bahas juga ternyata framework-framework yang teman-teman sudah kenal
seperti Svelte, React, View, Solid, dan lain-lain,
juga bisa dikompilasi ke web component.
Custom Elements.
Jadi, kalau teman-teman penasaran bisa nggak sih kita tulis web component,
tapi tetap pakai framework yang kita suka, misalkan kayak View.
View ini sudah 91% compatible, cuman ada satu isu di sini.
- React masih 71%. - React ini paling...
- Karena dia sudah berbeda ya. - Ya, tapi ternyata ada React yang eksperimental
yang khusus dibangun untuk fully support Custom Elements.
Ini sudah 100%.
Ini nggak tahu nih, React yang mana nih?
- Ya itu... - Oh, dia ada ini kayaknya.
Ya, beda brands kayaknya ya.
Soalnya menuju ke GitHub Repo yang sama,
mungkin ada brands web component di sini, somehow.
Silahkan cari-cari aja.
Kemudian ada Angular, sudah 100%, Svelte 100%,
AngularJS yang satu bahkan 100% juga, ada Preact, Polymer, Skate...
- Sampai makin ke bawah makin aneh-aneh itu. - Ya.
Tapi kalau kita lihat skornya ini sudah bagus-bagus.
- Ya kan jadi mungkin... - Huh?
- Mungkin sebenarnya analoginya kayak... - Eh sorry, lanjut, lanjut.
- Lanjut, lanjut. - Kayak kita di Next.js,
kalau kita pakai React atau Svelte, kita tetap bisa pakai
Reusable Function di JavaScript biasa, kan ya?
Nah, itu kan sebenarnya kayak gini Reusable Function juga,
tapi untuk render UI.
Jadi sebetulnya emang expected-nya bisa.
Expected-nya bisa, betul.
Cara pakainya, saya punya contoh, tapi di slide, kalau mau lihat.
- Nah. - Ayo lihat slide aja, menggap itu.
Ini slide yang saya presentasikan setahun yang lalu
di DevFace Jakarta 2021, ada videonya.
Ini contohnya SpellBiasa, ya.
Kemudian, ya udah, langsung.
Oh bukan, salah.
Itu kalau mau dipakai di Svelte, sorry.
Itu kalau mau dipakai di Svelte.
Kalau ini yang dikompile ke itu ya, ke web component.
Sebagai component Svelte, tapi dikompile menjadi...
setelah jadi JavaScript, hasil transpilenya jadi custom element.
Ya, jadi kita bisa menambahkan Spell Option,
tag web component.
- Oh. - Sudah.
Sederhananya seperti itu.
Dengan function increment-increment dan lain-lain.
Sudah, jadi yang di sini itu akan menjadi C-aunter.
Untuk digunakan misalkan di bagian lain dari HTML kita.
Terus jangan lupa pada saat kompilasi ditambahkan custom element
sama dengan true, itu tic 2 true.
Jadi ketika dikompile, dia akan menjadi web component.
Shadow DOM dan lain-lainnya tetap ada.
Nice.
Nah, cuma jangan lupa itu tergantung kita pakai bender apa juga, kan?
Betul, kalau ini berarti pakai rollup, ya.
Kalau pakai fitur, mungkin beda lagi.
Spell kit kan pakai fitur.
Ya, ada sih, pasti ada.
Cuma item konfigurasinya harus rajin-rajin...
Ya, mungkin property-nya beda namanya bukan custom element,
mungkin namanya web component atau apa gitu ya.
Mungkin bisa berbeda.
Jadi dipastikan saja settingan untuk kompilarnya.
Karena dia kompilasinya yang ke web component, kan?
Yes.
Jadi teman-teman bisa langsung ke sini,
kalau lihat, wah, framework yang saya biasa pakai,
ternyata bisa atau enggak.
Atau belum support pakai web component.
Karena ketika kita menggunakan framework
dan kita compile ke web component,
pasti akan ada penurunan size ya, ukuran.
Karena web componentnya sudah ada di browser masing-masing,
jadi nggak perlu download lagi gitu.
Bisa hemat beberapa kilobyte kan, lumayan ya.
Gitu.
Oke, kita lanjut.
Nah, ini ada contoh dari teman kita juga, Fatih.
Yang bekerja di mana ya?
Iya, di teman-teman Indonesia.
Kita kerja di e-commerce hijau ya, kalau misalnya.
E-commerce hijau, oke.
Jadi, yang dilakukan adalah menggunakan custom element di Next.js.
Nah, ini menarik.
Terus, buat ngerender, markdown.
Buat ngerender, markdown, oke.
Custom markdown atau apa?
Belum beneran baca detail sih itu tadi.
Cuma intinya, jisnya adalah biar ringan aja,
bikin component yang jalan di Next.js dengan lebih ringan.
Tapi dia pakai lead, bukan?
Ini soalnya di URL-nya, lead-next.
Kayaknya iya.
Oh iya, HTML.
HTML itu apa?
React component using HTML.
HTML ini apa?
Kayaknya beliau juga yang bikin sendiri nih.
Jadi dia bikin solusi apa?
Ngerender HTML.
Strict to React Element Conversion Library.
Wow, keren.
Ini khas engineer banget.
Jadi buat bikin blog kayak over engineering everything.
Over engineering.
Tapi ya bagus buat explorer kan.
Bagus, bagus, bagus.
Real custom elements.
Oke, contohnya mana?
Instead of using add custom element,
we can call custom element the define.
Oke.
Nah, ini kan yang tadi kita lihat sebelum tutorial-nya sih.
Oh iya, ini lead ya, benar-benar.
Ini ada statiknya, kemudian define-nya masih pakai ini ya.
Nggak pakai ini. Apa namanya?
Belum. Belum.
Nggak pakai dekorator.
Nggak pakai dekorator.
Dekorator itu soalnya di JavaScript.
Belum ini kan.
Ya, dia masih disupport di TypeScript.
Ya, kalau ini kan masih JavaScript ya.
Ini alamannya sibuk.
Berat.
Berat.
Oke, terus ini di import.
Masukin ke, ini next.js-nya ya.
Ini next.js-nya ya.
Oke.
Itu file component react kan ya.
File component react, ya.
Terus effect dan lain-lain tetap sama.
Timing system.
Dah, silahkan baca sendiri.
Sampai kelar baca sih sebenarnya cuma paham summer-summer doang sih.
Mungkin harus dicoba ya, biar beneran paham alurnya.
Nah, ngomongin tadi, enhance.
Nah, ini sebenarnya menarik nih.
Jadi waktu kita ngomongin tentang island architecture.
Kan sudah sempat keluar tuh Astro.
Terus ada Quick kan.
Terus kan saya sempat nanya kan ke kalian kan.
Ada nggak sih framework yang pakai fitur-fitur native dari web.
Ternyata ada.
Enhance.dev ini.
Wah, menarik sekali gitu.
Karena semua fitur-fitur yang ada di framework ini
adalah fitur yang ada di web API.
Berarti dia cuma jadi wrapper ya?
Iya, jadi ada layer.
Dan menariknya mereka membranding mereka sebagai di HTML framework.
Jadi kayak semacam meta frameworknya HTML.
Jadi kayak misalnya gini deh, kalau kita pengen pakai React,
mungkin kita akan menggunakan meta framework Next.js.
Karena itu memudahkan kan kita nulisnya dengan React,
pakai teknologi React, tapi pakai Next.js ada routing,
ada lain-lain lah, ada strukturnya.
Kalau kita nulis dalam Svelte, kita akan pakai meta framework SvelteKit.
Kalau kita nulis kode view, kita mungkin pakai Nux.
Nah, Enhance ini memposisikan mereka sebagai
kalau kita menulis HTML dan JavaScript dan CSS Vanilla,
lalu kita bisa pakai Enhance sebagai framework
yang memudahkan routing dan sebagainya.
Routing dan structure dan developer experience, convenience lainnya.
Menarik tuh, apa tadi, ini adalah framework Enhance dari HTML ya?
Jadi bahkan kita nggak harus pakai custom element juga
kalau emang nggak mau.
Ya, HTML biasa misalnya full static ya.
Kita punya block yang cuma full static, ya udah HTML aja.
Karena si Astro juga mengklaim hal yang sama.
Tapi Astro ada transfile-nya, ada bundling-nya kan,
file file-nya kan nggak bisa berubah jadi JavaScriptingan sendiri, ya kan?
File file atau React dan lain-lain.
Betul. Sampai-sampai yang bikin Astro dia melabeli dirinya sebagai CEO of HTML.
Tapi seru juga ini trend-nya ya. Makin di satu sisi tadi kita lihat web komponennya sendiri,
penggunaannya rada sedih.
Cuma, misalnya framework, meta framework yang baru,
ini mulai sadar akan bagusnya, menariknya,
menulis dalam bahasa yang sedekni, seapplicient, dan seperformant mungkin pakai HTML biasa.
Karena juga trend-nya kan gini kan, jadi HTML CSS JavaScript gini-gini aja,
susah nih bikin aplikasi yang dinamis.
Yuk kita bikin framework datasnya, bikin lah React.
Kenapa makin rumit, makin rumit, makin rumit. Performansa, terus total working time-nya tinggi, karena harus diproses oleh browser, akhirnya back to...
Dan, iya, dan karena...
Itu sih kalau analog-nya, kalau manusia ya dulu hidupnya alami, terus jadi hidup modern, segalanya artisiknya lah, pre-process.
Terus sekarang jadi trendy kan, organik lah, kembali ke alam.
Sehat, terus kemana-mana kalau bisa jalan kaki, naik sepeda, gitu ya.
Iya. Maksudnya ada apa ya, ada drive.
Jadi misalkan si framework-framework ini ngedrive, gitu.
Ngedrive atau itu ya, memantik si HTML, CSS, dan JavaScript, TC39 ya.
Itu untuk catch up, gitu kan.
Wah, ini ternyata ada framework yang caranya seperti ini.
Menarik nih, secara developer experience bagus, mungkin performanya juga cukup oke.
Ya udah, yuk kita implementasi di native, gitu.
Jadi, si HTML, CSS, dan JavaScript juga mereka belajar, gitu.
Atau bisa jadi, sebelum jadi dia stand-up di trial-nya sebagai framework dulu.
Yes, bisa juga.
Bisa juga seperti itu.
Semacam feedback dulu tuh akhir kali sih.
Ya.
Jadi ternyata memantau framework-framework yang ada.
Orang-orang itu itu juga sebenarnya.
Iya, orangnya yang di dalam framework juga.
Kan kita juga tahu ya, kelihatan gitu ya, bagaimana, ya, salah satunya,
saya nggak nyebut react aja ya, tapi salah satunya react dan teman-temannya,
itu gimana mendrive si JavaScript supaya menambah fitur terus, kan.
Semenjak ada react dan lain-lain, itu is nambah terus kan, is six, is seven.
Makin nambah, makin bisa memenuhi kebutuhan developer.
Betul.
Kalau dulu, bahkan kalau kita mau for loop aja, kadang-kadang kita harus pakai jQuery buat for each, gitu kan.
Kalau sekarang udah bisa pakai map lah, bisa pakai filter, pakai apa, macem-macem gitu kan.
Udah, apa, termasuk juga jQuery, ya.
Yang, apa, yang tadinya kita mau select element aja susah, istana mati, gitu kan.
Sekarang udah bisa query selektor, query selektor all,
yang sebenarnya terinspirasi dari jQuery juga.
Ada juga yang waktu sempet, kalau ada yang sempet pakai coffee script,
itu juga menginspirasi JavaScript untuk punya arrow function, kan.
Ya, jadi mereka itu menginspirasi dalam tanda kutip, ya.
Atau memantik si native browser supaya bisa catch up dengan, oh, ini kita butuh nih.
Buktinya apa? Buktinya yang pakai react sekian banyak.
Mereka suka, gitu kan.
Seperti string literal aja, jaman dulu kan.
Pakainya must-test.
Iya, must-test, ya, must-test.
Atau template engine yang lain, ya.
Handlebar.
Handlebar, must-test, macem-macem banyak, gitu.
Dan karena kebutuhan itu akhirnya, ya, oh, iya, bener juga ya.
Akhirnya, yuk kita bikin. Akhirnya jadilah gini.
Dan dari framework-framework yang tadi, mereka juga harus adaptasi dong, gitu.
Gimana caranya supaya bisa dekat juga dengan si native ini,
salah satunya dengan kompilasi, kan, kompilasi ke web component atau custom elements.
Kemudian muncul juga framework-framework yang wave berikutnya, ya, gelombang berikutnya.
Yang react fuelstrap itu.
Apa?
Yes, itu gelombang pertama, misalkan.
Ini udah masuk gelombang kedua yang lebih dekat ke native web, ya.
Dekat ke platform.
Nah ya, use the platform katanya.
Use the platform.
Okay, ini ada pertanyaan menarik nih dari Mas Andy.
Jadi makin nggak ngerti web component itu apa dan kapan dipakai.
Ya, mungkin kita jawab pertanyaannya yang dibagian web component itu
kapan kita perlu pakai, kapan kita nggak perlu pakai web component.
Ada yang bisa memberikan pencerahan?
Kalau cuma munculnya di satu tempat, ya, nggak perlu dipakai web component.
Tapi kalau reuse, ya.
Iya, kejaran reusable dan encapsulasinya itu baru pakai web component.
Encapsulasi itu maksudnya dia punya style sendiri, dia punya...
Bayangkan kalau web component itu bisa dipakai di lebih dari satu website.
Itu juga bisa menarik.
Kalau misalnya handle different project ya.
Jadi component-componentnya itu sudah dipakai di berbagai macam tempat.
Nah, contohnya...
Saat dia minta.
Contohnya, saya...
Tidak, ini bukan web component, tetapi sebuah web component yang pernah saya implementasikan.
Lo disebut dengan down component.
Down component?
Ya, down component itu componentnya...
Accessional ya?
Iya, dia cuma...
Ya, dia nggak urusan apapun.
Yang penting, datanya dikasih apa, render seperti yang diminta.
Jadi sesuai dengan props.
Sama, jadi...
Waktu saya develop, waktu jaman itu mungkin saya nggak pernah dalam web component.
Akhirnya bikin down component banyak.
Dan website-nya ini ada 10 atau 5, 10-an lah saya develop di saat yang bersamaan.
Jadi semua kayak postcard, produk card, segala macam itu dibangun.
Satu library.
Jadi satu library dipakai untuk semua, di-share.
Jadi yang membedakan cuma props.
Props-nya butuh apa, nanti akan dilihat seperti itu.
Hal yang sama saya bisa lihat juga kalau kita pakai web component.
Jadi bangun web component, rilis di NPM misalnya, atau rilis di GitHub sebagai package,
direuse aja di banyak tempat.
Tinggal NPM install something, web component, misalkan button gitu kan.
Terus kita tinggal import, pakai.
- Product card, product card. - Product card, ya.
Teman-teman bikin banyak product card.
Yang tadi isinya saya ingat, yang membedakan bagaimana dia di-render adalah
hanya dari sisi props-nya.
Atau tadi di sini property-nya atau slot-nya tadi ya.
Slot-nya berbeda, property-nya berbeda, render seperti apa.
Jadi satu component bisa banyak.
Jadi reusable.
Reusable apa? Distribute atau untuk distribution-nya?
Jadi biasanya engineering manager-nya akan senang tuh.
Kita bisa hemat banyak waktu kalau kita bikin web component.
Tapi mulai di awalnya performance-nya.
Tapi perlu digaris bawahi juga.
Kenapa framework seperti React itu ukurannya cukup besar?
Karena React kan dibikin oleh Facebook.
Yang mana mereka berharap Facebook ini bisa dibuka di semua browser
dari yang paling jadul sampai saat ini, yang paling modern.
Makanya dia masih mendukung...
-Polyfilm-nya. -Iya, gitu.
Nah, kalau kita pakai web component, terus usernya sama si user IE6,
gak bisa kan?
Karena ini web component gak bisa backward compatibility, kan?
Bisa gak sih? Ada polyfilm-nya gak sih? -Gak bisa.
Gak ada kan? Gak bisa ya?
Jadi harus browser yang modern, gitu kan?
Oh, gak tahu. Mungkin kalau extend element tertentu,
karena tadi extend element paragraf ya, Peh?
-Masih bisa. -Mungkin isinya dirender sebagai Peh biasa deh.
Iya, bisa jadi sih.
Intinya adalah kalau target user kita cocok dengan...
personanya cocok dengan menggunakan browser terbaru
yang udah otomatis update juga, gitu kan?
Itu sebenarnya gak masalah pakai web component.
Dan malah bagus. Kenapa?
Ukurannya jadi lebih kecil karena mereka tidak perlu download lagi,
tidak perlu ada request ke server, gitu.
Tidak perlu membuat sibuk server kita juga, hemat bandwidth, gitu ya.
Jadi ya sebenarnya win-win sih.
Cuman lose-nya adalah kalau menggunakan web component saat ini,
developer experience-nya belum semenarik framework-framework yang lain.
Bisa diakali dengan cara menggunakan framework yang sudah familiar,
teman-teman sudah punya framework yang familiar,
atau menggunakan framework-framework yang gelombang kedua, ya,
yang Enhanced, Quick, ataupun Astro.
Tapi Astro gak di... web component, kan?
-Ada juga. -Ya, kayaknya tetap bisa dipakai, deh.
Bisa, ya. Oh, iya, itu kan gak ada. Bukan itu HTML, ya. Sorry, sorry.
Iya, itu HTML, jadi tetap bisa dipakai, ya.
-Ya, kita nulis JavaScript biasa juga bisa, kan? -Yes, yes, yes.
Oke.
Nah, kalau micro front-end, ini konsep yang beda lagi.
Micro front-end.
Kan bisa aja per component dipublish sebagai package tersendiri.
Nah, perkara package-nya itu, si UI component-nya itu dipublish sebagai...
apa, pakai web component atau pakai bahasa lain, kan, bisa aja, kan?
Ya, ya.
Cuma ini topik seru, deh. Kayaknya one day harus micro front-end, kan?
-Micro front-end, ya. Betul. -Approach-nya banyak tuh.
Ada yang satu component, satu package.
Misalnya apa, menu sendiri, menu sendiri, terus apa?
-Sersbar, playlist, gitu ya? -Ya.
Tapi ada juga yang approach-nya adalah per... kayak perfection gitu, per team.
Jadi check out flow, check out experience itu satu bagian.
Apa, kayak admin dashboard, say user login buat lihat purchase-nya itu satu.
Itu sendiri juga ada.
Iya. Jadi ini konsep micro front-end ini hampir sama seperti micro service.
Jadi syarat utamanya adalah teman-teman harus sudah punya team yang cukup besar.
Kalau team-nya baru satu dan developer ini masih...
Iya, nggak perlu juga.
Nyusahin-nyusahin diri sendiri, ya. Jangan, ya.
Yang pakai kan kelihatannya ya perusahaan yang besar-besar banget, kan?
Kayak yang terkenal itu kan Ikea contohnya, Ikea, Spotify, terus apa sih?
-Bukalapak pakai micro front-end. -Oh, oke.
Oke.
Nah, terus yang resource-nya banyak online dan bagus lengkap tuh ada e-commerce namanya Zalendo di Eropa.
-Ya, itu kelihatannya besar juga. -Iya, PayPal juga pakai micro front-end.
Nah, kalau produk kita belum sebesar mereka, ya apa?
Tingkat kompleksitasnya dan risikonya kayaknya mungkin belum worth it.
Yes. Oke.
Kita balik lagi ke Enhance. Ini cara penggunaannya sekilas.
Jadi kita bisa npm create.
Asli kayak nyobain sih. Kayaknya seru sih.
Sekarang modelnya gini ya, npm init, spelt, atau npm create.
Jadi ada script-nya sendiri, kan? Ada starter-nya sendiri.
Bisa jalan di browser?
-Nanya, npm bisa jalan di browser nggak sih? -Belum.
-Oh, belum. -Belum.
-Apa web container bisa nggak? -Bilum, ya.
-Bisa web container. -Bisa kayak stack width gitu, bisa.
Ya, kalau itu. Apa code sandbox, gitu-gitu ya?
Ya.
Tapi kalau code sandbox-an dia di VM, kan? Di server, kan?
Iya, dia running di server-nya.
Oke. Jadi npm create, bikin project, masuk ke project-nya, install, start.
Terus kemudian dia sudah mendukung file-based routes, ya.
-Ampir sama sepertinya. -Ya, routing-nya udah kayak meta framework lainnya sih.
Walaupun HTML-based.
HTML-based dan file-nya index.html atau file-nya extension-nya HTML.
Jadi kita bikin pagesabout.html,
udah langsung jadi halaman atau jadi route/about.
Jadi path about.
Yes. Ini contohnya HTML biasa tanpa ada yang lain.
Terus kemudian kalau kita mau bikin element, kita bisa tambahkan satu folder yang namanya elements.
Dia sifatnya pure function, artinya tidak terkontaminasi dengan fungsi global,
file-level global.
Kemudian di dalamnya bisa kita definisikan HTML dengan backtick.
Ini sebenarnya fungsi ya, HTML ini ya?
Ya.
Fungsi yang isinya adalah string ini yang kemudian di interpolasi menjadi tag-tag HTML, ya.
Di balik layar dia juga bikin custom element.
Oh, ini udah langsung jadi custom element, ya.
HTML itu dari props-nya HTML ini ada di sini, ya.
Berarti props itu callback, ya.
HTML itu callback-nya dia.
Ya, callback-nya dia.
Hampir sama seperti lead juga menggunakan cara seperti ini, kan.
Oke.
Kalau pasal.
Jadi bukan string literal, ya.
Maksudnya, dia function terus isinya string.
Ya, dia seperti ini jatohnya.
Jadi HTML backtick ini itu sama dengan, oh bukan HTML,
HTML HTML seperti ini, backtick, ini sama dengan kurang lebih seperti ini.
Ya.
Iya, sama seperti ini.
Jadi ini.
Itu kayak short-time gitu, kayak syntactic.
Ya, dari pada kita bikin kayak gini kan agak panjang, kan.
Ini kan lebih enak, ya.
Tinggal tulis HTML, terus backtick, terus langsung ini aja, gitu.
Kemudian di-save sebagai MJS.
MJS ini apa?
Adalah modul MJS supaya bisa di-export dan import seperti layaknya ES6, ya.
Kemudian diabout, ya, di halaman HTML.
Di sini di-savenya sebagai MJS bukan sebagai HTML, ya.
Elements-nya, ya.
Karena elements-nya sendiri ini adalah JavaScript, kan.
Kemudian sudah bisa dipakai.
Dipakainya dengan, sesuai dengan nama file-nya, yaitu dua kata tadi, ya.
Minus header.
Kemudian kita bisa gunakan di...
Udah, nggak pakai import-importan.
Enak, ya.
Lebih, iya kayaknya experience-nya lebih nyaman di sini, ya.
Dibandingkan yang native, ya.
Begitu.
Terus ada apa, nih?
Paste udah, elements, API.
API apa?
Create an API route.
Oh, ini kita bisa bikin buat backend juga, ya.
Buat API.
Oh, buat adding data.
Buat fetching aja, ya.
Fetching data, ya.
Yes.
Fetching.
Ya, mau. Apa? Request, any request, get, post.
Nggak.
Ada API, kemudian ada public ini apa?
Public folder.
Oh, static asset, ya.
Bisa buat manipulasi head juga untuk nambahin metadata.
Benar nggak?
Oh, iya, benar.
Harusnya iya.
Kalau di, itu, kalau di React pakai apa tuh namanya?
Helmet.
Helmet, helmet.
Rusah banget tuh pakai.
Ada state.
Dia bawa sendiri, dia punya sendiri.
Ada state juga, jadi sudah, apa?
Sudah ada fitur untuk state management, ya.
Ya, mantap, ya.
Langsung, ya. Nggak perlu ada import library lagi, ya.
Jadi langsung sudah didukung.
Jadi ini library-nya.
Iya, udah jadi tabung.
Jadi jadi spelled, ya.
Betul.
Kayaknya pada akhirnya yang bikin adoption bakal naik, itu ya framework yang kayak gini sih.
Yang bikin orang kita aja langsung tertarikkan, lihat ini.
Iya, betul.
Karena udah nyoba, saya pribadi udah nyoba, ya walaupun nyobanya nggak diproduksiin, ya.
Tadi ada yang nanya, udah ada belum sih yang pakai diproduksiin, ya.
Saya sendiri belum nyoba diproduksiin, tapi pada saat bikin konten,
nyobain web components, ya lumayan, lumayan capek, gitu.
Tapi begitu kita coba pakai spelled, atau pakai lead.dev tadi, atau pakai enhance,
itu kayaknya developer experience-nya naik 10x.
Biasanya 10x.
Naik 10x lipat, ya.
Lifecycle, lifecycle, kita lihat, ya.
Pakai gambar-gambar segala.
Journey-nya.
Lengkap, gitu.
Lengkap, ya.
Ya, sampai server-site-nya pun dibahas.
Oke.
Roll up.
Client-side JavaScript.
API Routes, Practice, Progressive Enhancement, pasti.
Testing.
Ya, pakai apa?
Pakai Cypress.
Tape.
Pakai tape.
Belum pernah pakai.
Belum pernah pakai.
Sama.
Oke.
Ya.
Ya sudah.
Itu dia review C-Cut dari Enhance.
Kayaknya cukup menarik.
Ada TypeScript-nya, ya.
TypeScript?
Ada.
Ada Super TypeScript, kayaknya.
Type Definition?
Yes.
Wow.
Oh, JS Doc.
JS Doc.
Oke sih.
Ya, mentekan ada Intellisense-nya.
Ya.
Ya, menarik-menarik, ya.
Astro menarik.
Quick menarik.
Ini juga menarik.
Seru-seru.
Kedepannya.
Belajar hal baru lagi.
Seperti aja belum tamat, ya.
Udah ada yang baru lagi, ya.
Emang bisa tamat, kan?
Enggak, ya.
Gak bakal tamat, Nek.
Tapi kalau kayak Ria kan udah, istilahnya tamat itu kan kayak mature.
Title kayak established.
Iya, udah mature.
Perubahannya ada, tapi kan gak signifikan dan gak banyak, kan.
Ya, udah.
Kita bisa catch up dalam ini lah.
Kalau udah pernah belajar, pasti masih bisa ngikutin lah.
Oke.
Kita sudah 1 jam dan 7 menit, tidak berasa.
Ya.
Sudahi aja.
Iya.
Topik ini menarik kalau kita akan bahas di sesi-sesi berikutnya, ya.
Jadi, terima kasih masukannya.
Terima kasih juga diskusinya.
Kalau ada yang mau ditanyakan di luar sesi live streaming ini,
bisa ke bit.ly/ngobrolinweb.
Dan mungkin sekian dulu dari kita malam hari ini.
Kalau yang mau follow-follow, saya di @rizavahmi22 di Twitter.
Ada @ekafji.
Eka, F-Y-I, F-Y, F-Y-I.
Dan @ivanchris.com.
Ivanchris.com.
DOT ya, jangan lupa.
Kayak EKA Jalan Gergapak.
Ya, benar.
Oke, sekian dulu dari kita.
Sampai ketemu lagi Menyidupan.
Selamat malam.
Bye.
Eh tunggu, ini ada yang baru nih.
Sampai ketemu lagi.
Deskripsi asli dari YouTube
Yuk mari kita diskusi dan ngobrol ngalor-ngidul tentang dunia web. Agar tetap up-to-date dengan teknologi web terkini. Topik, tautan dan pertanyaan menarik bisa dilayangkan ke https://bit.ly/ngobrolinweb Kunjungi https://ngobrol.in untuk catatan, tautan dan informasi topik lainnya.
Episode Terkait
1 Mei 2024
🔥 UI Component Library: Pakai atau Gak?! Untung Rugi, Tips Memilih, & Pengalaman Developer!
Episode ini membahas secara mendalam tentang UI Component Library, mulai dari definisi, perbedaan dengan CSS framework d...
20 Agu 2024
Ngobrolin Astro
Episode ini membahas tentang Astro, sebuah meta framework JavaScript yang semakin populer di kalangan developer. Pembaha...
11 Okt 2023
Ngobrolin CSS Layout
Episode ini berangkat dari pengakuan yang jujur: banyak developer web merasa takut atau jengkel pada CSS, dan salah satu...
Suka episode ini?
Episode baru setiap Selasa malam. Dengarkan lewat YouTube, Spotify, atau feed podcast favoritmu.
Memuat komentar dari GitHub Discussions...
Jika komentar tidak muncul karena ekstensi privasi / adblocker, kamu bisa berdiskusi langsung di GitHub Discussions .