Ngobrolin Web Components - Ngobrolin WEB Ep10

2:51Tapi perbedaannya dengan framework atau library sejenis adalah dia platform agnostik,

2:59artinya tidak bergantung kepada framework, gitu.

3:03Jadi dia sudah tertanam...

3:05Dia bagian dari spesifikasi web itu sendiri ya, berarti?

3:07Ya, sudah tertanam di web browser-web browser modern yang teman-teman gunakan,

3:13itu sebenarnya sudah disediakan framework yang namanya web component,

3:16UI library yang namanya web components, jadi tinggal digunakan, gitu.

3:23Kita bisa, ya, seperti framework-framework yang teman-teman udah kenal ya,

3:28React itu kan komponen base ya, disebutnya ya, angular, komponen base,

3:33Vue.js bisa dibikin komponen juga, spelt juga, jadi kita...

3:38Kalau spelt itu kayak kita tulis file dengan extensi spelt,

3:43dia udah langsung jadi komponen, gitu kan.

3:45Nah, web component ini konsepnya juga sama, jadi HTML-HTML tag yang kita butuhkan,

3:51bisa kita bungkus sehingga kita bisa dipakai berulang-ulang, gitu.

3:56Misalkan teman-teman bikin apa ya, bikin apa ya contohnya ya?

4:01Counter lah, contoh standar, counter.

4:06Kalau counter kan biasanya dipakai sekali, yang dipakai berulang kali apa ya?

4:11- Misalkan kayak komentar, gitu. - Contoh misalnya post, ya, komentar, list,

4:15post card, post card, misalnya kayak ada, ada, ada, ada, ada, image, ada, ada Excel-nya,

4:23terus bisa dipakai berbagai, di macam tempat.

4:26Iya, misalkan ada di halaman ini ada, pada card, di halaman yang lain ada card,

4:31dengan isi atau konten yang berbeda itu bisa menggunakan web component,

4:35jadi tidak perlu copy-paste.

4:39Jadi web component itu encapsulasi dan the usable.

4:45- Betul. - Dan ini udah include, apa, lifecycle juga ya, lifecycle event,

4:50bisa buat client-site interactivity, jadi bedanya sama HTML elemen biasa kan,

4:55sebenarnya kalau cuma yang statik kan kita tinggal pakai aja button, misalnya kalau perlu link,

5:02tinggal pakai A, apa, kalau main A, kan udah cuma kalau kita butuh client-site interactivity

5:08dan event-event tertentu dan behavior yang custom, nah, berarti ini lebih cocok

5:15- sama custom elemen, ya? - Betul.

5:18Contohnya adalah, contohnya adalah, nih, saya punya contoh, adalah sebuah input

5:25dengan tipe date, seperti ini, jadi kalau teman-teman penasaran ini,

5:30bohongan nih pakai library, saya kasih lihat kodenya ya, kodenya hanya ini nih, di baris 10.

5:35Jadi input dengan tipe date, yang sebenarnya cukup baru ya, ya nggak baru-baru banget sih,

5:40maksudnya dulu yang sebelum HTML5 belum ada kan, belum ada ya,

5:44jadi dulu input hanya ada tipe text gitu kan, terus sekarang udah ada password,

5:50ada number, ada macem-macem ya, salah satunya juga date.

5:52Nah, kita bikin input dengan tipe date, terus kemudian kita buka di browser,

5:59tampilannya sekarang sudah cantik seperti ini, sudah ada widget-nya gitu ya,

6:02kita bisa pilih tanggal, mungkin kalau mau pakai time juga bisa,

6:06terus kita bisa hapus, bisa pilih hari ini, gitu kan.

6:10Kalau kita lihat di inspect element, di sini dia inputnya tipe date, gitu.

6:16Nah, tapi kalau kita ke setting, kalau teman-teman belum pernah cintang,

6:21di bagian bawah sini di preference ada ini, show user agent shadow DOM.

6:28Dan kalau kita cintang, maka si input ini adalah sebenarnya web komponen.

6:34Dia dimasukkan ke dalam shadow DOM, yang isinya adalah div,

6:40kemudian di dalam div itu ada div lagi, kemudian ada span, ada macem-macem,

6:46sampai akhirnya menjadi sebuah komponen yang digunakan dengan input dengan tipe date, gitu.

6:51Jadi sebenarnya ini adalah contoh web komponen

6:55yang mungkin teman-teman secara tidak sadar sudah menggunakan.

6:58Dan dengan adanya web komponen, ya kita bisa bikin komponen-komponen seperti ini.

7:03Jadi bisa aja nanti teman-teman bikin sebuah komponen button misalkan,

7:08button dengan type primary misalkan. Wah, ini bootstrap banget ya.

7:12Terus dijadikan satu library, pakai CDN, tinggal script SRC blablabla,

7:17langsung bisa digunakan. Jadi dia sifatnya universal, sudah tertanam di browser,

7:22sudah menjadi web standar, jadi ini tidak akan mungkin,

7:25mungkin nggak sih, bakal dihilangkan gitu misalkan, kayak misalkan apa ya?

7:30Kayak mungkin, se-extreme itu.

7:32Ada tipe, salah satu tipe image yang tadinya di-support, sekarang udah nggak di-support.

7:40Apa tuh? Apa ya?

7:44Havif.

7:45Yang Chrome hilangin beberapa minggu belakangan ini, lupa nih. Apa ya?

7:48Havif bukan.

7:49Bukan, bukan.

7:51Itu malah ditambahin, malah baru itu.

7:54Iya.

7:56Jangan diliatin deh.

7:59Oke, lanjut, lanjut.

8:01Nah, cuma bedanya kalau kita bikin custom element sendiri, namanya mesti 2 kata ya?

8:07Ya.

8:08Biar nggak, jadi kalau yang netv yang bawaan asli, itu kan pasti selalu 1 kata.

8:15Nah, kalau kita bikin sendiri, harus 2 kata.

8:19Oh iya, pakai minus ya, kan ada minus ya?

8:24Ya, benar, benar.

8:25Ya, pollution.

8:27Ya, sama seperti halnya kenapa react menggunakan hurk besar di,

8:32kalau kita mau bikin komponen ya, salah satunya ya.

8:34Supaya membedakan antara komponen yang dibuat sama komponen yang sudah ada di HTML.

8:39Oh, halo.

8:45Oh, putus-putus.

8:50Oh, putus-putus ya, sorry, sorry, sorry.

8:53Enggak, maksudnya gambarnya kalau soalnya itu last.

8:55Oh, oke.

8:57Ya, last go.

8:58Last ya, siap.

9:00Oh, gambarnya, mungkin koneksinya lagi drop ya.

9:03Nah, terus selanjutnya sebenarnya web komponen ini bukan sebuah,

9:10bukan satu teknologi yang apa ya, yang hanya udah web komponen gitu,

9:16tapi dia ada terdiri dari beberapa teknologi dibalik si web komponen ini

9:21yang membuat web komponen ini bisa digunakan.

9:26Yang pertama adalah HTML template.

9:28Kalau teman-teman belum tahu, HTML template ini adalah salah satu fitur

9:33yang cukup baru juga dari HTML yang kita bisa gunakan

9:36untuk menggunakan tag HTML berulang-ulang.

9:42Jadi ada template ini bisa kita gunakan.

9:45Kenapa?

9:46Ini sudah lama loh ini.

9:47Iya, sudah lama, tapi banyak yang belum tahu juga gitu.

9:50Oke.

9:51Karena ya itu kan biasanya kan, udah lah, pakai framework aja udah selesai.

9:55Saya pakai waktu dulu, jamannya masih pakai jQuery dan Backbone,

10:02pakai banyak pakai template.

10:06Oke.

10:07Itu dari tahun berapa tuh?

10:102017.

10:11JQuery itu berarti 2015an gitu ya.

10:16Ya, 2017 ya.

10:202017 sudah ada ya, tapi jarang dia menggunakannya.

10:24Kalau di web Almanac ada nggak sih template?

10:29Nah, itu.

10:30Ada ya.

10:32Oke, ini dia.

10:34White component and shadow dong.

10:36Template-nya ada nggak?

10:37Ini khusus template maksudnya?

10:38Oh nggak, nggak di breakdown.

10:40Nggak di breakdown ya, oke.

10:42Berarti ini disimpan untuk nanti.

10:44Ya, jadi ada yang namanya template.

10:47Bentuknya itu seperti inilah ya.

10:51Kita bisa definisikan template dengan ID gitu kan.

10:56Misalkan product raw, yang akan kita iterasi biasanya,

11:00buat iterasi ya buat di for loop gitu kan.

11:03Di reuse sih dia.

11:04Ya, di reuse.

11:05Nah, ini akan tampil berulang-ulang dengan bantuan JavaScript seperti ini.

11:10Jadi di clone, di select dulu kan template-nya apa,

11:15kemudian di clone, kemudian dimasukin isinya atau text content-nya,

11:20kemudian di append.

11:23Itu manual ya berarti?

11:27Ya, ini manual.

11:28Kalau misalkan datanya dari API atau database itu beda lagi kan.

11:32Jadi dengan hari ini kalau teman-teman sudah nonton ini,

11:37kalau misalnya semua yang ada di dalam template itu tidak didender oleh dozer.

11:41Jadi lebih baik menggunakan template daripada

11:44kalau kalian mau ulang-ulang pakai div tapi di display not.

11:48Ya, jangan pakai div tapi pakai template.

11:54Karena div akan di render meskipun display not.

11:58Walaupun display not, oke.

12:01Ya, tadi saya baru ketemu ternyata Chrome sudah me-remove support untuk image JPEG XL.

12:11Apa itu?

12:13JPEG XL itu adalah format image yang kekinian dari JPEG.

12:19Ya, jadi lebih kecil.

12:21Dengan kualitas yang hampir sama, dia bisa menghasilkan ukuran gambar yang lebih kecil.

12:27Sayangnya kurang dapat exposure yang bagus di Chrome.

12:34Kemudian dibutuhkan untuk di-remove.

12:36- Mungkin juga karena ada... - Agen kayaknya kalau saling sama WebP sama Aviv, ya.

12:43Dia lebih memprioritaskan Aviv kayaknya.

12:47Oke, kita lanjut lagi.

12:50Nah, ini yang tadi yang pertama ya, komponen pertama adalah template.

12:54Komponen kedua adalah custom komponennya sendiri.

12:56Custom element.

12:58Ya, sorry, custom element.

13:00Custom elementnya sendiri, kita bisa bikin element masing-masing.

13:04Mau bikin element date, misalkan tadi.

13:06Mau bikin button, mau bikin apa, gitu ya.

13:08- Bentuknya seperti ini. - Ini penyambungnya.

13:11Penyambungnya, betul.

13:13Kita define dulu custom elementsnya.

13:16Namanya seperti yang tadi disebutkan Eka, harus dua kata.

13:20Dan harus dipisah dengan tanda minus atau dash.

13:24Ya, penulisannya harus seperti ini.

13:27Misalkan kayak contoh di video yang saya buat adalah counter.

13:31Terpaksa saya harus bagi dua jadi C, counter.

13:35Atau apapun ya, pokoknya harus dibagi dua.

13:37Nggak boleh satu kata.

13:39Jadi itu semakin menyulitkan developer lagi ya.

13:42Untuk pilih nama variable-nya susah ya.

13:45Nah, terus komponennya sendiri ditulis dengan syntax class.

13:52- Ya, kalau teman-teman... - Oke banget ini.

13:55Dengan react, react jaman dulu ya.

13:58Mirip banget.

14:01Jadi pakai class, kemudian di-extend dari HTML.

14:05Kok HTML paragraph ini contoh ya?

14:07Itu contoh bisa. Jadi HTML element itu ada banyak.

14:11- Jadi di-extend ya? - Bapaknya itu HTML element.

14:15- Terus ada HTML element biasa. - HTML element biasa.

14:18Ada HTML table element, ada HTML div element, macem-macem.

14:23Oke. Wah, ini ternyata image format ada geng-gengannya ya.

14:28Baru tahu saya. Saya ikutan geng mana ya?

14:32Kayak Afif lah, udah yang paling baru.

14:36Oke, dan kemudian seperti yang tadi di-mention juga sama Eka,

14:42sudah ada lifecycle-nya.

14:44Salah satunya adalah connected callback ini seperti

14:46component did mount, kalau nggak salah.

14:50- Bener nggak? - Betul, betul.

14:53Jadi kayaknya dia fire kalau udah di-render di DOM.

14:58Dia dimasukin ke DOM, itu akan jalan connected callback.

15:02Kalau dia dihapus dari DOM, dia jalan disconnect callback.

15:07Di sini ada contoh yang panjang nggak? Oh, ini panjang sekali.

15:11Ya, ini contohnya pop-up ya.

15:14Contoh yang dari gua itu bagus nanti. Bisa dikulik sama-sama.

15:18Oke, yang ini ya.

15:21Oke, itu gua jelasin sedikit aja ya.

15:25Jadi di sini itu user card. Jadi user card itu nama komponennya.

15:32Tujuannya menyampilkan foto, nama orangnya, informasi,

15:38dan ada button untuk pada click event handler-nya.

15:43Coba aja click, hide info, hide info.

15:46Click button, iya.

15:49Ada event handler-nya.

15:52Kita ke halaman JS-nya, ke bagian column JS paling bawah dulu.

15:58Oh, di sini nggak ada hide info ya?

16:01- Di bawah ya? - Iya, di JS-nya.

16:05Ke JS kita ke baris paling bawah, jadi kita jelasin dari paling bawah dulu.

16:11- Ini template ya? - Iya.

16:13Paling bawah dulu, paling bawah.

16:16Ngehooknya itu sama Windows, Custom Elements, Define, user card.

16:23Cara pemakaiannya user card-nya seperti tag HTML element ya.

16:27Kayak PDIV ya, user card.

16:29Terus user card yang itu adalah HTML class-nya.

16:33- Yang ini ya? - Ya, maksudnya user card yang...

16:35Oh, yang ini.

16:37Ya, yang kita baca HTML class-nya dulu.

16:39Oke, user card itu Extend, HTML element.

16:44Terus dia nge-attach shadow... ada constructor, dia nge-attach shadow-dome.

16:53Pacaran nge-attach shadow pakai attach-shadow.

16:56Terus ada shadow-root.

17:01Shadow-root, dia mengambil dari template, nanti template-nya didefine di atas.

17:06Oke, jadi hanya seperti itu aja dulu cara pakaiannya.

17:11Jadi dan query selektor itu hanya nanti untuk mengambil data dari kayak atribut name,

17:17ada atribut avatar, ada kan?

17:19Di user card itu ada atribut name sama atribut avatar.

17:22Jadi di template-nya dia query selektor, H3, ambil atribut name,

17:29terus kemudian atribut avatar, terus dia isi.

17:33As simple as that gitu ya. Terus kita lihat template-nya.

17:37Template-nya di atas, ini HTML template ya, termasuk juga styling-nya ya.

17:42Betul, jadi dia langsung bisa aja template itu didefine di HTML,

17:48bisa aja kalau mau, bisa juga di JavaScript caranya document create element template.

17:55Terus disini innerHTML.

17:59Oke, nah udiknya atau bagusnya web component ini,

18:06style yang kita define di dalam web component tidak akan mengikuti style yang ada di global.

18:14Jadi global style tidak.

18:16Isolated.

18:18Scooping.

18:20Tapi kalau pakai Shadow DOM ya.

18:23Kalau pakai Shadow DOM sebenarnya web component ini bisa tanpa Shadow DOM, bisa.

18:31Ini ya tadi ya? Shadow ini ya?

18:33Betul, itu line yang membuatnya jadi Shadow DOM.

18:36Oke.

18:38I'm sorry.

18:39Nah, jadi styling-nya hanya berlaku di dalam web component.

18:45Kita scroll, cuma styling biasa yang membuatnya grid, blablabla.

18:50Kita lihat HTML ya, jadi cuma div user card, image, tadi diisi dengan atribut source.

18:58Terus kemudian a3, diisi dengan atribut main.

19:01Terus kita lihat nih ada yang baru nih, slot, itu ada slot.

19:06Slot itu dari, jadi lihat di sebelah kiri, dalam user card itu ada div slot namanya email.

19:16Terus isinya apa? Nanti isi dari slot itu akan dibawah ke dalam slot itu.

19:23Jadi children-nya ya?

19:25Betul.

19:26Akan dirender sebagai children.

19:28Iya, tapi keyword-nya itu slot.

19:30Jadi kita pakai div atau pick slot apa.

19:34Pada dikasih name, nanti panggil aja slot namenya apa.

19:39Wah, di swipe nih sering sekali digunakan.

19:41Kalau yang pakai slot pasti deh familiar.

19:44Apa lagi ya kalau, kalau view ada gak sih, kalau slot gitu juga?

19:49Kalau view gak tahu ya, kalau view kan sudah ada binding-nya itu pakai v apa gitu ya.

19:53Tapi ini HTML kan, bukan terkait sama frame apa.

19:57Ini vanilla, ini tidak ada pakai frame apa-apa.

20:01Di view juga ada tuh katanya, bener.

20:04Iya, orang HTML kok semuanya bisa pakai.

20:07One last thing itu tentang lifecycle. Kita scrolling ke bawah sedikit.

20:13Di bagian connected callback ya?

20:16Iya, connected callback.

20:18Jadi di bagian ini dia menambahkan event list banner click untuk toggle info tadi, hide info, show info.

20:27Dan untuk auto disconnect dia remove list banner aja.

20:31Toggle info itu ada function sendiri, ya cuma kayak display man, display block aja sih sebenarnya, simple aja.

20:38Gak ada banyak macam-macam, as simple as that.

20:42Jadi ini contoh yang saya lihat dari si Thank You untuk si Brad dari Traverse Media.

20:48Ini contoh yang paling simple untuk dimengerti bagaimana menggunakan web component.

20:54Simplet dan jelas ya, jelas bagiannya gimana.

20:57Iya, cuman komplain saya satu, kenapa namanya connected callback, disconnected callback, gak kayak apa ya, kurang merepresentasikan gitu.

21:05Tapi masing-masing apa mereka juga waktu bikinnya juga pasti mikirin kan ini.

21:10Mungkin ada konsep atau ada istilah yang belum kita ketahui.

21:18Maksudnya connected callback ini apa, disconnected callback itu apa?

21:22Dan itu kan kayaknya dibikinnya udah dari dulu ya, dari sebelum trend UI framework yang kayak React.

21:28Ya, component with mount gitu-gitu ya.

21:31Istilah yang sekarang familiar itu dulu belum jadi istilah taman kami.

21:37Bisa jadi.

21:38Padahal web component ini sebenarnya sudah ada sebelum React kan ya?

21:43Ah, gak tahu kalau itu.

21:44Maksudnya web component ini udah lama loh.

21:46Tapi mature-nya atau sudah di support-nya kan baru kan?

21:51Iya sih.

21:52Belum semua, jadi mungkin yang kayak custom elemen ini udah lama memang, custom elemen udah lama.

22:00Shadow DOM saya gak tahu.

22:02Kalau template juga udah lama tadi kan, kalau Ivan udah pernah pakai di 2017.

22:08Cuman ada beberapa elemen yang membuat web component ini menjadi sulit digunakan.

22:17Sampai akhir-akhir ini.

22:19Iya, yang pertama shadow DOM.

22:21Shadow DOM-nya yang masih belum fully support.

22:27Iya, kalau misalkan kita bikin sebuah component terus ada style-nya tiba-tiba berlaku global kan susah kan?

22:34Gitu kan?

22:35Susah digunakan.

22:36Dan satu lagi component yang juga cukup penting walaupun tidak di ranah HTML CSS adalah import dan export.

22:45IS module.

22:47Jadi dengan IS module ini kita bisa dengan mudah, lebih mudah lah ya.

22:52Terutama di browser ya.

22:54Kalau di Node.js kan udah ya pakai require lah, cuman beda syntax aja.

22:58Tapi fungsinya sama.

23:00Sedangkan di browser, dulu browser itu belum ada.

23:03Tidak ada sama sekali import-export.

23:05Kita cuma taro CDN, script SRC gitu ya.

23:08Nah itu udah diimport secara global.

23:10Rescondition ya? Udah, nasib.

23:13Iya, karena IS module yang membuat si web component akhirnya bisa menjadi ter-encapsulasi tanpa bisa mengkontaminasi

23:25komponen-komponen lain di luarnya gitu.

23:28Jadi apa launchingnya IS module sama pola import-export itu beneran mengubah...

23:35Mengubah landscape ya.

23:37Mengubah landscape web banget ya.

23:38Dulu kan pas feed tuh kita bahas feed juga, topiknya mirip kan, kayak gini.

23:43Apa sih feed itu dibikin karena si mas FNU-nya sadar bahwa oh ya import udah...

23:50Native browser import udah didukung di banyak browser.

23:54Ya, lanjut.

23:56Lanjut, oke.

23:57Nah, lanjut berikutnya kita masih ada hubungannya di 2 episode sebelumnya tentang web almanak.

24:04Nah, di sini ada insight yang menarik.

24:06Kenapa web component masih belum juga banyak yang menggunakan?

24:10Banyak kenapa?

24:14Kenapa? Karena banyak yang belum tahu ya? Atau karena sudah termudahkan dengan framework-framework kali ya?

24:21Atau mungkin karena kurang gimmick gitu nggak sih?

24:27Kurang gimmick ya.

24:28Kalau 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.

24:41Jualan gitu ya, jualan.

24:42Kita buka youtube, banyak tutorial yang dikemas narik dengan berbagai bahasa.

24:47Maksudnya bahasa Indonesia, bahasa Inggris, berbagai style belajar.

24:52Itu jelas.

24:53Mungkin karena gitu nggak, untuk karir info aja nggak ada.

24:59Dicari web component.

25:01Web developer yang ngerti web component.

25:04Pasti carinya react developer, feel developer.

25:07Maybe, maybe.

25:11Iya kan, yang paling populer kan react kan, gitu kan.

25:14Ini, mungkin ada benarnya nih, susah pakai web component.

25:18Iya, masih lebih banyak.

25:20Ya, saya juga waktu bikin component ini.

25:24Masih banyak boilerplate code yang harus kita tulis.

25:28Benar, benar. Ada benarnya.

25:31Memang sulit.

25:32Tapi, di sisi yang lain, web component ini ya, nggak ada extra kilobytes yang harus didownload oleh user, gitu kan.

25:42Iya, sebenarnya itu keren banget kalau dari performance dan machine performance sama resilience ya.

25:52Itu kan beneran makin dekat dengan javascript dan behavior browser asli.

25:58Kedepannya ya relatif aman lah.

26:01Kayak misalnya contohnya kalau react kan implementasi ya.

26:04Itu react itu kayaknya kalau dari segi paradigm kan kayak kebalikannya banget tuh.

26:09Sampai dom pun dia bikin dulu copy sendiri kan, virtual dom.

26:14Makanya kan makin setiap ganti versi react,

26:17selalu ada heboh-heboh ada hook baru, ada hook yang tidak jadi dipakai,

26:22ada behavior baru dalam streaming component misalnya.

26:26Ya, bukan salah ya, bukan salah benar.

26:28Cuma karena dia bikin abstraksi yang custom dan kompleks,

26:34ya kedepannya bakal bisa aja banyak feature yang berubah secara ekstrim.

26:41Sedangkan kalau si custom element ini kan deket banget sama bahasa-bahasa asli

26:48yang bisa dibaca oleh browser yaitu HTML, Javascript, CSS.

26:54Jadi sebenarnya still formulate juga di situ, cuman ya itu yang pake dikit.

26:59Dan makin lama makin tahun makin turun.

27:02Jadi kan tadi kita lihat tuh 2021 itu yang desktop itu tadinya 3% kalau nggak salah.

27:10Sekarang jadi 2%.

27:12Nah, sementara yang mobile tadinya 4% turun jadi 0,39.

27:18Ya, fenomena menarik ya.

27:21Fenomena menarik? Mungkin ya, mungkin ya.

27:24Mungkin karena adaptasinya masih belum ada perusahaan yang cukup besar

27:29menggunakan web components gitu atau belum terekspos.

27:33Ada cuman ya, itu nggak terekspos aja.

27:36Ya dibandingkan sama Facebook gitu kan, kalau Facebook pake react gitu kan.

27:40Atau bahkan yang membuat react kan pasti orang berpikir,

27:44wah di Facebook aja yang seskel Facebook aja udah pake react gitu.

27:48Nah, aplikasi kita ya berarti bisa nih pake react gitu kan.

27:52Atau spelt misalkan di perusahaan apa, di portal berita misalkan.

27:57Wah, di portal berita ini udah pake spelt gitu kan.

28:02Ya, gitu-gitulah. Exposure aja mungkin ya.

28:05Jualannya kurang gitu ya.

28:07Ya, bedakan antara virtual dom.

28:09Sebenarnya kalau ada Google pake, cuman nggak terlalu dipromote aja ya.

28:13Di sini ada keywordnya, ada keyword yang saya baca itu adalah

28:19framework-frameware seperti react gitu kan, pakenya virtual dom.

28:24Sedangkan web component itu shadow dom.

28:27Ya, itu dua konsep yang berbeda.

28:29Ya, jadi buat teman-teman supaya nggak hilaf,

28:34kalau web component itu sama pake virtual dom bukan, dia pake shadow dom.

28:38Ya, kembali ke tadi si apa nih, Vida, katanya memang susah pake web component.

28:45Mungkin ini ya, ada feedback atau masukan untuk web component juga adalah yang pertama gitu.

28:53Kalau framework lain kan lumayan apa ya, lumayan mengedepankan developer experience kan.

29:00DX-nya bagus.

29:01Ya, kalau web component jujur aja, developer experience-nya masih agak tertinggal dibandingkan framework.

29:07DX di sini bisa macam-macam ya, bisa cara penggunaannya, boilerplate code-nya juga lebih sederhana gitu kan.

29:18Terus juga, termasuk juga tutorial.

29:30Terus juga termasuk juga tutorial, semakin kesini pasti akan semakin banyak tutorial

29:38yang berkaitan dengan ini dan semakin developer experience-nya akan semakin baik gitu.

29:42Sama, apa lagi tadi ya, sempat kepikiran tapi lupa, ya udah, nanti aja.

29:48Oke, kita lihat dulu ya yang di sini ya, web component dan shadow dom.

29:52Jadi web component itu turun dari 3% ke 2%, kemudian shadow dom itu lumayan naik ya.

29:59Oh, turun dari 4, dari 0,4, sorry, 0,4, jadi 0,39.

30:07Tuh, template tuh, 0,05%, yang pakai Ipan doang nih, 0,05.

30:15Swear, gue banyak pakai template, lo jawab dulu, apalagi tambahin underscore.

30:20Naik tuh 0,05%.

30:24Yang pakai Ipan doang. Ini is atribut kita juga jangan pakai ya.

30:30Tapi lumayan menyedihkan ya, melihatannya ya.

30:35Jadi gue pakai jaman dulu tuh namanya, kalau pakai template, pakainya dari underscore.

30:42Jadi tetap pakai template, terus kemudian baca template-nya pakai underscore.

30:56Supaya connect-nya ke backbone.

30:59Tapi gue sering pakai, swear, gue pakai ini sering.

31:03Ya, percaya, percaya, percaya.

31:07Gue nggak tahu kenapa jadi kurang popular.

31:11Ya, itu karena framework, jadi udah disiapin semuanya, template-template-nya juga udah.

31:18Sementara dulu waktu framework yang dibikin, fitur template ini belum ada, mungkin ya.

31:25Nggak tahu juga. Nah, tadi yang mau saya bahas adalah web component ini yang seperti di contoh di sini,

31:34kalau misalkan nanti teman-teman aplikasinya udah mulai kompleks,

31:38mau dipakaiin Redux, bisa.

31:41Mau pakai state management apa, bisa.

31:45Ya, ini HTML, sorry, ini JavaScript, HTML.

31:48Jadi mau ditambahin library apa juga bisa.

31:51Asal library-nya itu yang JavaScript juga.

31:56Kalau Redux itu kan nggak ada hubungannya sama React kan sebenarnya kan.

32:00Walaupun ya dia berkaitan gitu kan.

32:03Tapi itu adalah library JavaScript, bukan library React ya.

32:07Terus, lanjut lagi.

32:13Makanya yang tadi kita sebutkan ada developer experience-nya kurang bagus,

32:18karena banyak boilerplate code, kemudian penamaannya unik,

32:23life cycle-nya juga namanya juga agak berbeda dengan yang biasa kita tahu,

32:30makanya muncul framework framework.

32:32Terus objek orientasi, segala macem di this dot something-something,

32:37itu kan objek orientasi banget dan ya, perkara selera sih.

32:41Banyak developer yang banyak programmer JS yang kurang suka dengan cara kayak gini kan, kurang cocok.

32:49- Iya. Dia seolah-olah anti-mainstream ya.

32:53Orang dari kelas menuju ke fungsional dia sementara dia...

32:57- Dia selalu kelas. - ...kelas aja udah.

33:00Atau nanti dia mau ngikutin ya, kita nggak tahu kan.

33:03Tapi ini kayak React zaman dulu ya, this dot something dot bind dot something dot this, gitu kan.

33:12Mirip-mirip juga kan, gitu kan.

33:14Tapi React-nya sendiri udah berubah dan lucunya adalah fun fact-nya adalah si React ini kenapa mereka dulu menggunakan kelas.

33:24Jadi ada alasan supaya teman-teman kita yang belum familiar dengan JavaScript

33:30atau yang dari dunia objek orientasi programming seperti Java.

33:35Iya, familiar, merasa familiar dengan kode ini.

33:41Dan kemudian setelah mereka terjerumus, akhirnya dijerumuskan ini juga fungsional.

33:46- Jadi ini fungsional semua. - Ini sebenarnya fungsional bukan kelas, gitu kan.

33:50Bukan OOP.

33:51Ya gitu lah, saya tanya ya, gossip-nya seperti itu kenapa React awalnya menggunakan kelas.

33:57- Dibakan ya berarti? - Dibakan, iya.

34:01Oke, jadi tadi saya sempat bahas sedikit dengan kurangnya DX atau Developer Experience

34:12yang disediakan oleh Native Web Component, makanya muncul Framework Network.

34:16Salah satunya adalah Lead ya, Lead ini yang cukup pernal.

34:22Dia membungkus si Web Component sehingga cara penggunaannya jadi lebih sederhana.

34:30Ada contohnya nggak? Getting Started.

34:35Ada lagi yang namanya, yang keluarannya Mozilla apa? Stencil ya?

34:41- Stencil ionic. - Stencil ionic ya, ionic.

34:44Di sini ada fans-nya ionic nih, Bahyu.

34:47Dia nge-fan sama angular dia, sama ionic.

34:52Ya, jadi bentuknya kayak gini.

34:55Sudah bisa pakai TypeScript juga tentunya.

34:58Kita import dulu HTML, CSS, sama Lead elemennya.

35:01Ya, Lead-nya sendiri sebenarnya yang agak sedikit misleading adalah

35:04dia ada dua komponen kan, ada dua item kan sebenarnya kan.

35:08Lead HTML sama Lead ini, bener nggak sih?

35:12Nggak ada ya? Oh, Lead aja ya?

35:22- Lead aja. - Oke, salah berarti.

35:25- Lead elemen gitu. - Ya, Lead elemen, oke.

35:28Terus kita pakai kelas ya, di sini kita pakai kelas,

35:33di Extend tapi bukan HTML, melihatkan Lead Elemen.

35:36Terus kemudian ini definisikan CSS-nya, terus di-render.

35:40- Nah, ini udah agak familiar ya? - Ya, lebih rapi sedikit ya.

35:43Ya, lebih rapi ya.

35:45Terus kita tambahkan ini, Dekorator Custom Elements,

35:48Simple Greeting untuk penamaan.

35:51Penamaannya seperti ini, jadi nggak perlu pakai yang tadi,

35:55yang di bawah tadi Custom Elements ini.

35:58Ini adalah penggantinya adalah ini, Custom Elements ini.

36:02- Kemudian kalau kita lihat... - Sebenarnya sama.

36:04- Sama. - Di belakangnya sama.

36:06- Sama, ini nanti di-compile menjadi itu, gitu. - Yang menurut itu.

36:12Nah, sekarang kalau kita lihat ininya mana ya?

36:17Life Cycle-nya mana? Kok nggak kelihatan Life Cycle-nya?

36:20Ini Hello World, Hello Mars, nggak ada ininya ya?

36:24Oh, kliknya langsung di sini.

36:26Jadi kalau on take, dia langsung di sini.

36:29Aklik ya, dan ini pakai dollar kurang-kurang awal,

36:37ini juga dari JavaScript ya, jadi nggak.

36:39Ya. Life Cycle-nya mana?

36:43Kita mau cari Life Cycle, di sini ada nggak?

36:46- Life Cycle, oh, nggak ada. - Tidak ada.

36:49Gak ada ya? Bagaimana cara itu?

36:52Component beat mount gitu-gitu nggak ada ya?

36:54Ya, saya lihat sendiri.

36:56Tutorial, intro to lead.

36:58Sama, ke sini juga? Oh, nggak.

37:02- Langsung jalan. - Tapi ini enak ya,

37:05udah ada Apple-nya, Live Playground-nya.

37:10Mereka mencontek tutorialnya Svelte, ya.

37:14Kayak gini nih, web component aslinya nggak ada bikin beginian ya?

37:21Nggak ada. Ini framework juga ya, framework di atas web component ya.

37:26Framework di atas web component.

37:28Jadi, ini adalah salah satu, kemudian salah duanya ada tadi stencil,

37:35- lalu kemudian... - Ada NNs.

37:39Iya, ada NNs yang nanti kita akan bahas, tapi sebelum kesana

37:42saya mau bahas juga ternyata framework-framework yang teman-teman sudah kenal

37:48seperti Svelte, React, View, Solid, dan lain-lain,

37:52juga bisa dikompilasi ke web component.

37:56Custom Elements.

37:58Jadi, kalau teman-teman penasaran bisa nggak sih kita tulis web component,

38:03tapi tetap pakai framework yang kita suka, misalkan kayak View.

38:07View ini sudah 91% compatible, cuman ada satu isu di sini.

38:15- React masih 71%. - React ini paling...

38:22- Karena dia sudah berbeda ya. - Ya, tapi ternyata ada React yang eksperimental

38:29yang khusus dibangun untuk fully support Custom Elements.

38:33Ini sudah 100%.

38:35Ini nggak tahu nih, React yang mana nih?

38:39- Ya itu... - Oh, dia ada ini kayaknya.

38:42Ya, beda brands kayaknya ya.

38:45Soalnya menuju ke GitHub Repo yang sama,

38:48mungkin ada brands web component di sini, somehow.

38:52Silahkan cari-cari aja.

38:54Kemudian ada Angular, sudah 100%, Svelte 100%,

38:58AngularJS yang satu bahkan 100% juga, ada Preact, Polymer, Skate...

39:04- Sampai makin ke bawah makin aneh-aneh itu. - Ya.

39:08Tapi kalau kita lihat skornya ini sudah bagus-bagus.

39:12- Ya kan jadi mungkin... - Huh?

39:15- Mungkin sebenarnya analoginya kayak... - Eh sorry, lanjut, lanjut.

39:20- Lanjut, lanjut. - Kayak kita di Next.js,

39:23kalau kita pakai React atau Svelte, kita tetap bisa pakai

39:28Reusable Function di JavaScript biasa, kan ya?

39:32Nah, itu kan sebenarnya kayak gini Reusable Function juga,

39:35tapi untuk render UI.

39:38Jadi sebetulnya emang expected-nya bisa.

39:42Expected-nya bisa, betul.

39:45Cara pakainya, saya punya contoh, tapi di slide, kalau mau lihat.

39:52- Nah. - Ayo lihat slide aja, menggap itu.

39:56Ini slide yang saya presentasikan setahun yang lalu

39:59di DevFace Jakarta 2021, ada videonya.

40:03Ini contohnya SpellBiasa, ya.

40:08Kemudian, ya udah, langsung.

40:11Oh bukan, salah.

40:15Itu kalau mau dipakai di Svelte, sorry.

40:17Itu kalau mau dipakai di Svelte.

40:19Kalau ini yang dikompile ke itu ya, ke web component.

40:24Sebagai component Svelte, tapi dikompile menjadi...

40:28setelah jadi JavaScript, hasil transpilenya jadi custom element.

40:35Ya, jadi kita bisa menambahkan Spell Option,

40:38tag web component.

40:40- Oh. - Sudah.

40:43Sederhananya seperti itu.

40:45Dengan function increment-increment dan lain-lain.

40:50Sudah, jadi yang di sini itu akan menjadi C-aunter.

40:55Untuk digunakan misalkan di bagian lain dari HTML kita.

41:00Terus jangan lupa pada saat kompilasi ditambahkan custom element

41:04sama dengan true, itu tic 2 true.

41:06Jadi ketika dikompile, dia akan menjadi web component.

41:10Shadow DOM dan lain-lainnya tetap ada.

41:13Nice.

41:15Nah, cuma jangan lupa itu tergantung kita pakai bender apa juga, kan?

41:19Betul, kalau ini berarti pakai rollup, ya.

41:22Kalau pakai fitur, mungkin beda lagi.

41:25Spell kit kan pakai fitur.

41:27Ya, ada sih, pasti ada.

41:29Cuma item konfigurasinya harus rajin-rajin...

41:33Ya, mungkin property-nya beda namanya bukan custom element,

41:36mungkin namanya web component atau apa gitu ya.

41:39Mungkin bisa berbeda.

41:40Jadi dipastikan saja settingan untuk kompilarnya.

41:45Karena dia kompilasinya yang ke web component, kan?

41:49Yes.

41:52Jadi teman-teman bisa langsung ke sini,

41:54kalau lihat, wah, framework yang saya biasa pakai,

41:58ternyata bisa atau enggak.

42:00Atau belum support pakai web component.

42:03Karena ketika kita menggunakan framework

42:07dan kita compile ke web component,

42:10pasti akan ada penurunan size ya, ukuran.

42:13Karena web componentnya sudah ada di browser masing-masing,

42:16jadi nggak perlu download lagi gitu.

42:17Bisa hemat beberapa kilobyte kan, lumayan ya.

42:20Gitu.

42:23Oke, kita lanjut.

42:24Nah, ini ada contoh dari teman kita juga, Fatih.

42:30Yang bekerja di mana ya?

42:31Iya, di teman-teman Indonesia.

42:33Kita kerja di e-commerce hijau ya, kalau misalnya.

42:36E-commerce hijau, oke.

42:38Jadi, yang dilakukan adalah menggunakan custom element di Next.js.

42:43Nah, ini menarik.

42:45Terus, buat ngerender, markdown.

42:48Buat ngerender, markdown, oke.

42:50Custom markdown atau apa?

42:53Belum beneran baca detail sih itu tadi.

42:56Cuma intinya, jisnya adalah biar ringan aja,

43:00bikin component yang jalan di Next.js dengan lebih ringan.

43:04Tapi dia pakai lead, bukan?

43:06Ini soalnya di URL-nya, lead-next.

43:09Kayaknya iya.

43:11Oh iya, HTML.

43:16HTML itu apa?

43:19React component using HTML.

43:22HTML ini apa?

43:23Kayaknya beliau juga yang bikin sendiri nih.

43:26Jadi dia bikin solusi apa?

43:29Ngerender HTML.

43:31Strict to React Element Conversion Library.

43:34Wow, keren.

43:37Ini khas engineer banget.

43:39Jadi buat bikin blog kayak over engineering everything.

43:43Over engineering.

43:44Tapi ya bagus buat explorer kan.

43:46Bagus, bagus, bagus.

43:48Real custom elements.

43:52Oke, contohnya mana?

43:54Instead of using add custom element,

43:56we can call custom element the define.

43:59Oke.

44:00Nah, ini kan yang tadi kita lihat sebelum tutorial-nya sih.

44:05Oh iya, ini lead ya, benar-benar.

44:07Ini ada statiknya, kemudian define-nya masih pakai ini ya.

44:12Nggak pakai ini. Apa namanya?

44:15Belum. Belum.

44:18Nggak pakai dekorator.

44:21Nggak pakai dekorator.

44:22Dekorator itu soalnya di JavaScript.

44:25Belum ini kan.

44:26Ya, dia masih disupport di TypeScript.

44:29Ya, kalau ini kan masih JavaScript ya.

44:34Ini alamannya sibuk.

44:37Berat.

44:38Berat.

44:40Oke, terus ini di import.

44:44Masukin ke, ini next.js-nya ya.

44:48Ini next.js-nya ya.

44:50Oke.

44:52Itu file component react kan ya.

44:56File component react, ya.

44:58Terus effect dan lain-lain tetap sama.

45:00Timing system.

45:05Dah, silahkan baca sendiri.

45:08Sampai kelar baca sih sebenarnya cuma paham summer-summer doang sih.

45:12Mungkin harus dicoba ya, biar beneran paham alurnya.

45:16Nah, ngomongin tadi, enhance.

45:20Nah, ini sebenarnya menarik nih.

45:22Jadi waktu kita ngomongin tentang island architecture.

45:27Kan sudah sempat keluar tuh Astro.

45:30Terus ada Quick kan.

45:32Terus kan saya sempat nanya kan ke kalian kan.

45:35Ada nggak sih framework yang pakai fitur-fitur native dari web.

45:43Ternyata ada.

45:46Enhance.dev ini.

45:47Wah, menarik sekali gitu.

45:49Karena semua fitur-fitur yang ada di framework ini

45:55adalah fitur yang ada di web API.

46:00Berarti dia cuma jadi wrapper ya?

46:02Iya, jadi ada layer.

46:04Dan menariknya mereka membranding mereka sebagai di HTML framework.

46:10Jadi kayak semacam meta frameworknya HTML.

46:13Jadi kayak misalnya gini deh, kalau kita pengen pakai React,

46:16mungkin kita akan menggunakan meta framework Next.js.

46:20Karena itu memudahkan kan kita nulisnya dengan React,

46:23pakai teknologi React, tapi pakai Next.js ada routing,

46:26ada lain-lain lah, ada strukturnya.

46:28Kalau kita nulis dalam Svelte, kita akan pakai meta framework SvelteKit.

46:33Kalau kita nulis kode view, kita mungkin pakai Nux.

46:37Nah, Enhance ini memposisikan mereka sebagai

46:40kalau kita menulis HTML dan JavaScript dan CSS Vanilla,

46:47lalu kita bisa pakai Enhance sebagai framework

46:51yang memudahkan routing dan sebagainya.

46:54Routing dan structure dan developer experience, convenience lainnya.

47:00Menarik tuh, apa tadi, ini adalah framework Enhance dari HTML ya?

47:06Jadi bahkan kita nggak harus pakai custom element juga

47:10kalau emang nggak mau.

47:11Ya, HTML biasa misalnya full static ya.

47:14Kita punya block yang cuma full static, ya udah HTML aja.

47:18Karena si Astro juga mengklaim hal yang sama.

47:23Tapi Astro ada transfile-nya, ada bundling-nya kan,

47:27file file-nya kan nggak bisa berubah jadi JavaScriptingan sendiri, ya kan?

47:31File file atau React dan lain-lain.

47:33Betul. Sampai-sampai yang bikin Astro dia melabeli dirinya sebagai CEO of HTML.

47:42Tapi seru juga ini trend-nya ya. Makin di satu sisi tadi kita lihat web komponennya sendiri,

47:51penggunaannya rada sedih.

47:54Cuma, misalnya framework, meta framework yang baru,

47:58ini mulai sadar akan bagusnya, menariknya,

48:04menulis dalam bahasa yang sedekni, seapplicient, dan seperformant mungkin pakai HTML biasa.

48:14Karena juga trend-nya kan gini kan, jadi HTML CSS JavaScript gini-gini aja,

48:20susah nih bikin aplikasi yang dinamis.

48:22Yuk kita bikin framework datasnya, bikin lah React.

48:25Kenapa makin rumit, makin rumit, makin rumit. Performansa, terus total working time-nya tinggi, karena harus diproses oleh browser, akhirnya back to...

48:37Dan, iya, dan karena...

48:39Itu sih kalau analog-nya, kalau manusia ya dulu hidupnya alami, terus jadi hidup modern, segalanya artisiknya lah, pre-process.

48:49Terus sekarang jadi trendy kan, organik lah, kembali ke alam.

48:54Sehat, terus kemana-mana kalau bisa jalan kaki, naik sepeda, gitu ya.

48:59Iya. Maksudnya ada apa ya, ada drive.

49:04Jadi misalkan si framework-framework ini ngedrive, gitu.

49:07Ngedrive atau itu ya, memantik si HTML, CSS, dan JavaScript, TC39 ya.

49:15Itu untuk catch up, gitu kan.

49:18Wah, ini ternyata ada framework yang caranya seperti ini.

49:24Menarik nih, secara developer experience bagus, mungkin performanya juga cukup oke.

49:30Ya udah, yuk kita implementasi di native, gitu.

49:34Jadi, si HTML, CSS, dan JavaScript juga mereka belajar, gitu.

49:38Atau bisa jadi, sebelum jadi dia stand-up di trial-nya sebagai framework dulu.

49:46Yes, bisa juga.

49:48Bisa juga seperti itu.

49:50Semacam feedback dulu tuh akhir kali sih.

49:52Ya.

49:53Jadi ternyata memantau framework-framework yang ada.

49:57Orang-orang itu itu juga sebenarnya.

50:00Iya, orangnya yang di dalam framework juga.

50:02Kan kita juga tahu ya, kelihatan gitu ya, bagaimana, ya, salah satunya,

50:08saya nggak nyebut react aja ya, tapi salah satunya react dan teman-temannya,

50:12itu gimana mendrive si JavaScript supaya menambah fitur terus, kan.

50:17Semenjak ada react dan lain-lain, itu is nambah terus kan, is six, is seven.

50:23Makin nambah, makin bisa memenuhi kebutuhan developer.

50:26Betul.

50:27Kalau dulu, bahkan kalau kita mau for loop aja, kadang-kadang kita harus pakai jQuery buat for each, gitu kan.

50:35Kalau sekarang udah bisa pakai map lah, bisa pakai filter, pakai apa, macem-macem gitu kan.

50:41Udah, apa, termasuk juga jQuery, ya.

50:45Yang, apa, yang tadinya kita mau select element aja susah, istana mati, gitu kan.

50:51Sekarang udah bisa query selektor, query selektor all,

50:55yang sebenarnya terinspirasi dari jQuery juga.

50:59Ada juga yang waktu sempet, kalau ada yang sempet pakai coffee script,

51:03itu juga menginspirasi JavaScript untuk punya arrow function, kan.

51:08Ya, jadi mereka itu menginspirasi dalam tanda kutip, ya.

51:14Atau memantik si native browser supaya bisa catch up dengan, oh, ini kita butuh nih.

51:21Buktinya apa? Buktinya yang pakai react sekian banyak.

51:24Mereka suka, gitu kan.

51:26Seperti string literal aja, jaman dulu kan.

51:29Pakainya must-test.

51:31Iya, must-test, ya, must-test.

51:33Atau template engine yang lain, ya.

51:35Handlebar.

51:38Handlebar, must-test, macem-macem banyak, gitu.

51:41Dan karena kebutuhan itu akhirnya, ya, oh, iya, bener juga ya.

51:46Akhirnya, yuk kita bikin. Akhirnya jadilah gini.

51:49Dan dari framework-framework yang tadi, mereka juga harus adaptasi dong, gitu.

51:54Gimana caranya supaya bisa dekat juga dengan si native ini,

51:58salah satunya dengan kompilasi, kan, kompilasi ke web component atau custom elements.

52:03Kemudian muncul juga framework-framework yang wave berikutnya, ya, gelombang berikutnya.

52:08Yang react fuelstrap itu.

52:11Apa?

52:12Yes, itu gelombang pertama, misalkan.

52:15Ini udah masuk gelombang kedua yang lebih dekat ke native web, ya.

52:21Dekat ke platform.

52:23Nah ya, use the platform katanya.

52:25Use the platform.

52:27Okay, ini ada pertanyaan menarik nih dari Mas Andy.

52:31Jadi makin nggak ngerti web component itu apa dan kapan dipakai.

52:36Ya, mungkin kita jawab pertanyaannya yang dibagian web component itu

52:42kapan kita perlu pakai, kapan kita nggak perlu pakai web component.

52:47Ada yang bisa memberikan pencerahan?

52:51Kalau cuma munculnya di satu tempat, ya, nggak perlu dipakai web component.

52:56Tapi kalau reuse, ya.

52:59Iya, kejaran reusable dan encapsulasinya itu baru pakai web component.

53:04Encapsulasi itu maksudnya dia punya style sendiri, dia punya...

53:09Bayangkan kalau web component itu bisa dipakai di lebih dari satu website.

53:15Itu juga bisa menarik.

53:17Kalau misalnya handle different project ya.

53:20Jadi component-componentnya itu sudah dipakai di berbagai macam tempat.

53:26Nah, contohnya...

53:30Saat dia minta.

53:32Contohnya, saya...

53:35Tidak, ini bukan web component, tetapi sebuah web component yang pernah saya implementasikan.

53:41Lo disebut dengan down component.

53:44Down component?

53:45Ya, down component itu componentnya...

53:47Accessional ya?

53:48Iya, dia cuma...

53:50Ya, dia nggak urusan apapun.

53:52Yang penting, datanya dikasih apa, render seperti yang diminta.

53:56Jadi sesuai dengan props.

53:58Sama, jadi...

54:00Waktu saya develop, waktu jaman itu mungkin saya nggak pernah dalam web component.

54:05Akhirnya bikin down component banyak.

54:07Dan website-nya ini ada 10 atau 5, 10-an lah saya develop di saat yang bersamaan.

54:15Jadi semua kayak postcard, produk card, segala macam itu dibangun.

54:20Satu library.

54:22Jadi satu library dipakai untuk semua, di-share.

54:25Jadi yang membedakan cuma props.

54:27Props-nya butuh apa, nanti akan dilihat seperti itu.

54:30Hal yang sama saya bisa lihat juga kalau kita pakai web component.

54:35Jadi bangun web component, rilis di NPM misalnya, atau rilis di GitHub sebagai package,

54:43direuse aja di banyak tempat.

54:45Tinggal NPM install something, web component, misalkan button gitu kan.

54:51Terus kita tinggal import, pakai.

54:53- Product card, product card. - Product card, ya.

54:56Teman-teman bikin banyak product card.

54:59Yang tadi isinya saya ingat, yang membedakan bagaimana dia di-render adalah

55:05hanya dari sisi props-nya.

55:09Atau tadi di sini property-nya atau slot-nya tadi ya.

55:13Slot-nya berbeda, property-nya berbeda, render seperti apa.

55:17Jadi satu component bisa banyak.

55:19Jadi reusable.

55:21Reusable apa? Distribute atau untuk distribution-nya?

55:26Jadi biasanya engineering manager-nya akan senang tuh.

55:34Kita bisa hemat banyak waktu kalau kita bikin web component.

55:38Tapi mulai di awalnya performance-nya.

55:44Tapi perlu digaris bawahi juga.

55:46Kenapa framework seperti React itu ukurannya cukup besar?

55:51Karena React kan dibikin oleh Facebook.

55:56Yang mana mereka berharap Facebook ini bisa dibuka di semua browser

56:02dari yang paling jadul sampai saat ini, yang paling modern.

56:06Makanya dia masih mendukung...

56:08-Polyfilm-nya. -Iya, gitu.

56:12Nah, kalau kita pakai web component, terus usernya sama si user IE6,

56:18gak bisa kan?

56:20Karena ini web component gak bisa backward compatibility, kan?

56:24Bisa gak sih? Ada polyfilm-nya gak sih? -Gak bisa.

56:26Gak ada kan? Gak bisa ya?

56:28Jadi harus browser yang modern, gitu kan?

56:31Oh, gak tahu. Mungkin kalau extend element tertentu,

56:34karena tadi extend element paragraf ya, Peh?

56:36-Masih bisa. -Mungkin isinya dirender sebagai Peh biasa deh.

56:40Iya, bisa jadi sih.

56:42Intinya adalah kalau target user kita cocok dengan...

56:48personanya cocok dengan menggunakan browser terbaru

56:54yang udah otomatis update juga, gitu kan?

56:56Itu sebenarnya gak masalah pakai web component.

56:59Dan malah bagus. Kenapa?

57:01Ukurannya jadi lebih kecil karena mereka tidak perlu download lagi,

57:05tidak perlu ada request ke server, gitu.

57:08Tidak perlu membuat sibuk server kita juga, hemat bandwidth, gitu ya.

57:13Jadi ya sebenarnya win-win sih.

57:15Cuman lose-nya adalah kalau menggunakan web component saat ini,

57:21developer experience-nya belum semenarik framework-framework yang lain.

57:27Bisa diakali dengan cara menggunakan framework yang sudah familiar,

57:30teman-teman sudah punya framework yang familiar,

57:34atau menggunakan framework-framework yang gelombang kedua, ya,

57:39yang Enhanced, Quick, ataupun Astro.

57:43Tapi Astro gak di... web component, kan?

57:48-Ada juga. -Ya, kayaknya tetap bisa dipakai, deh.

57:51Bisa, ya. Oh, iya, itu kan gak ada. Bukan itu HTML, ya. Sorry, sorry.

57:55Iya, itu HTML, jadi tetap bisa dipakai, ya.

57:57-Ya, kita nulis JavaScript biasa juga bisa, kan? -Yes, yes, yes.

58:01Oke.

58:03Nah, kalau micro front-end, ini konsep yang beda lagi.

58:08Micro front-end.

58:11Kan bisa aja per component dipublish sebagai package tersendiri.

58:15Nah, perkara package-nya itu, si UI component-nya itu dipublish sebagai...

58:20apa, pakai web component atau pakai bahasa lain, kan, bisa aja, kan?

58:26Ya, ya.

58:28Cuma ini topik seru, deh. Kayaknya one day harus micro front-end, kan?

58:32-Micro front-end, ya. Betul. -Approach-nya banyak tuh.

58:34Ada yang satu component, satu package.

58:37Misalnya apa, menu sendiri, menu sendiri, terus apa?

58:41-Sersbar, playlist, gitu ya? -Ya.

58:44Tapi ada juga yang approach-nya adalah per... kayak perfection gitu, per team.

58:49Jadi check out flow, check out experience itu satu bagian.

58:53Apa, kayak admin dashboard, say user login buat lihat purchase-nya itu satu.

59:00Itu sendiri juga ada.

59:02Iya. Jadi ini konsep micro front-end ini hampir sama seperti micro service.

59:10Jadi syarat utamanya adalah teman-teman harus sudah punya team yang cukup besar.

59:15Kalau team-nya baru satu dan developer ini masih...

59:18Iya, nggak perlu juga.

59:20Nyusahin-nyusahin diri sendiri, ya. Jangan, ya.

59:24Yang pakai kan kelihatannya ya perusahaan yang besar-besar banget, kan?

59:27Kayak yang terkenal itu kan Ikea contohnya, Ikea, Spotify, terus apa sih?

59:33-Bukalapak pakai micro front-end. -Oh, oke.

59:36Oke.

59:37Nah, terus yang resource-nya banyak online dan bagus lengkap tuh ada e-commerce namanya Zalendo di Eropa.

59:44-Ya, itu kelihatannya besar juga. -Iya, PayPal juga pakai micro front-end.

59:49Nah, kalau produk kita belum sebesar mereka, ya apa?

59:53Tingkat kompleksitasnya dan risikonya kayaknya mungkin belum worth it.

59:59Yes. Oke.

1:00:01Kita balik lagi ke Enhance. Ini cara penggunaannya sekilas.

1:00:05Jadi kita bisa npm create.

1:00:08Asli kayak nyobain sih. Kayaknya seru sih.

1:00:11Sekarang modelnya gini ya, npm init, spelt, atau npm create.

1:00:16Jadi ada script-nya sendiri, kan? Ada starter-nya sendiri.

1:00:20Bisa jalan di browser?

1:00:22-Nanya, npm bisa jalan di browser nggak sih? -Belum.

1:00:25-Oh, belum. -Belum.

1:00:28-Apa web container bisa nggak? -Bilum, ya.

1:00:32-Bisa web container. -Bisa kayak stack width gitu, bisa.

1:00:36Ya, kalau itu. Apa code sandbox, gitu-gitu ya?

1:00:40Ya.

1:00:41Tapi kalau code sandbox-an dia di VM, kan? Di server, kan?

1:00:46Iya, dia running di server-nya.

1:00:50Oke. Jadi npm create, bikin project, masuk ke project-nya, install, start.

1:00:58Terus kemudian dia sudah mendukung file-based routes, ya.

1:01:03-Ampir sama sepertinya. -Ya, routing-nya udah kayak meta framework lainnya sih.

1:01:07Walaupun HTML-based.

1:01:10HTML-based dan file-nya index.html atau file-nya extension-nya HTML.

1:01:16Jadi kita bikin pagesabout.html,

1:01:20udah langsung jadi halaman atau jadi route/about.

1:01:24Jadi path about.

1:01:26Yes. Ini contohnya HTML biasa tanpa ada yang lain.

1:01:31Terus kemudian kalau kita mau bikin element, kita bisa tambahkan satu folder yang namanya elements.

1:01:37Dia sifatnya pure function, artinya tidak terkontaminasi dengan fungsi global,

1:01:45file-level global.

1:01:47Kemudian di dalamnya bisa kita definisikan HTML dengan backtick.

1:01:55Ini sebenarnya fungsi ya, HTML ini ya?

1:01:58Ya.

1:01:59Fungsi yang isinya adalah string ini yang kemudian di interpolasi menjadi tag-tag HTML, ya.

1:02:06Di balik layar dia juga bikin custom element.

1:02:12Oh, ini udah langsung jadi custom element, ya.

1:02:16HTML itu dari props-nya HTML ini ada di sini, ya.

1:02:20Berarti props itu callback, ya.

1:02:21HTML itu callback-nya dia.

1:02:23Ya, callback-nya dia.

1:02:25Hampir sama seperti lead juga menggunakan cara seperti ini, kan.

1:02:28Oke.

1:02:29Kalau pasal.

1:02:30Jadi bukan string literal, ya.

1:02:33Maksudnya, dia function terus isinya string.

1:02:38Ya, dia seperti ini jatohnya.

1:02:41Jadi HTML backtick ini itu sama dengan, oh bukan HTML,

1:02:49HTML HTML seperti ini, backtick, ini sama dengan kurang lebih seperti ini.

1:02:56Ya.

1:02:57Iya, sama seperti ini.

1:03:03Jadi ini.

1:03:04Itu kayak short-time gitu, kayak syntactic.

1:03:07Ya, dari pada kita bikin kayak gini kan agak panjang, kan.

1:03:12Ini kan lebih enak, ya.

1:03:13Tinggal tulis HTML, terus backtick, terus langsung ini aja, gitu.

1:03:18Kemudian di-save sebagai MJS.

1:03:20MJS ini apa?

1:03:21Adalah modul MJS supaya bisa di-export dan import seperti layaknya ES6, ya.

1:03:29Kemudian diabout, ya, di halaman HTML.

1:03:35Di sini di-savenya sebagai MJS bukan sebagai HTML, ya.

1:03:38Elements-nya, ya.

1:03:40Karena elements-nya sendiri ini adalah JavaScript, kan.

1:03:43Kemudian sudah bisa dipakai.

1:03:45Dipakainya dengan, sesuai dengan nama file-nya, yaitu dua kata tadi, ya.

1:03:49Minus header.

1:03:51Kemudian kita bisa gunakan di...

1:03:54Udah, nggak pakai import-importan.

1:03:56Enak, ya.

1:03:59Lebih, iya kayaknya experience-nya lebih nyaman di sini, ya.

1:04:03Dibandingkan yang native, ya.

1:04:06Begitu.

1:04:07Terus ada apa, nih?

1:04:09Paste udah, elements, API.

1:04:11API apa?

1:04:13Create an API route.

1:04:15Oh, ini kita bisa bikin buat backend juga, ya.

1:04:18Buat API.

1:04:19Oh, buat adding data.

1:04:21Buat fetching aja, ya.

1:04:22Fetching data, ya.

1:04:23Yes.

1:04:24Fetching.

1:04:25Ya, mau. Apa? Request, any request, get, post.

1:04:28Nggak.

1:04:30Ada API, kemudian ada public ini apa?

1:04:33Public folder.

1:04:35Oh, static asset, ya.

1:04:37Bisa buat manipulasi head juga untuk nambahin metadata.

1:04:43Benar nggak?

1:04:44Oh, iya, benar.

1:04:45Harusnya iya.

1:04:47Kalau di, itu, kalau di React pakai apa tuh namanya?

1:04:52Helmet.

1:04:54Helmet, helmet.

1:04:56Rusah banget tuh pakai.

1:04:58Ada state.

1:05:00Dia bawa sendiri, dia punya sendiri.

1:05:02Ada state juga, jadi sudah, apa?

1:05:06Sudah ada fitur untuk state management, ya.

1:05:09Ya, mantap, ya.

1:05:12Langsung, ya. Nggak perlu ada import library lagi, ya.

1:05:15Jadi langsung sudah didukung.

1:05:17Jadi ini library-nya.

1:05:19Iya, udah jadi tabung.

1:05:21Jadi jadi spelled, ya.

1:05:23Betul.

1:05:25Kayaknya pada akhirnya yang bikin adoption bakal naik, itu ya framework yang kayak gini sih.

1:05:29Yang bikin orang kita aja langsung tertarikkan, lihat ini.

1:05:33Iya, betul.

1:05:35Karena udah nyoba, saya pribadi udah nyoba, ya walaupun nyobanya nggak diproduksiin, ya.

1:05:39Tadi ada yang nanya, udah ada belum sih yang pakai diproduksiin, ya.

1:05:41Saya sendiri belum nyoba diproduksiin, tapi pada saat bikin konten,

1:05:45nyobain web components, ya lumayan, lumayan capek, gitu.

1:05:49Tapi begitu kita coba pakai spelled, atau pakai lead.dev tadi, atau pakai enhance,

1:05:57itu kayaknya developer experience-nya naik 10x.

1:06:00Biasanya 10x.

1:06:03Naik 10x lipat, ya.

1:06:07Lifecycle, lifecycle, kita lihat, ya.

1:06:11Pakai gambar-gambar segala.

1:06:13Journey-nya.

1:06:15Lengkap, gitu.

1:06:16Lengkap, ya.

1:06:17Ya, sampai server-site-nya pun dibahas.

1:06:20Oke.

1:06:22Roll up.

1:06:24Client-side JavaScript.

1:06:27API Routes, Practice, Progressive Enhancement, pasti.

1:06:31Testing.

1:06:32Ya, pakai apa?

1:06:33Pakai Cypress.

1:06:35Tape.

1:06:38Pakai tape.

1:06:41Belum pernah pakai.

1:06:43Belum pernah pakai.

1:06:45Sama.

1:06:46Oke.

1:06:47Ya.

1:06:48Ya sudah.

1:06:49Itu dia review C-Cut dari Enhance.

1:06:52Kayaknya cukup menarik.

1:06:53Ada TypeScript-nya, ya.

1:06:55TypeScript?

1:06:56Ada.

1:06:57Ada Super TypeScript, kayaknya.

1:06:59Type Definition?

1:07:00Yes.

1:07:01Wow.

1:07:02Oh, JS Doc.

1:07:05JS Doc.

1:07:06Oke sih.

1:07:08Ya, mentekan ada Intellisense-nya.

1:07:11Ya.

1:07:13Ya, menarik-menarik, ya.

1:07:15Astro menarik.

1:07:16Quick menarik.

1:07:17Ini juga menarik.

1:07:18Seru-seru.

1:07:20Kedepannya.

1:07:21Belajar hal baru lagi.

1:07:23Seperti aja belum tamat, ya.

1:07:28Udah ada yang baru lagi, ya.

1:07:30Emang bisa tamat, kan?

1:07:32Enggak, ya.

1:07:33Gak bakal tamat, Nek.

1:07:35Tapi kalau kayak Ria kan udah, istilahnya tamat itu kan kayak mature.

1:07:38Title kayak established.

1:07:40Iya, udah mature.

1:07:41Perubahannya ada, tapi kan gak signifikan dan gak banyak, kan.

1:07:46Ya, udah.

1:07:48Kita bisa catch up dalam ini lah.

1:07:51Kalau udah pernah belajar, pasti masih bisa ngikutin lah.

1:07:54Oke.

1:07:57Kita sudah 1 jam dan 7 menit, tidak berasa.

1:08:00Ya.

1:08:01Sudahi aja.

1:08:02Iya.

1:08:04Topik ini menarik kalau kita akan bahas di sesi-sesi berikutnya, ya.

1:08:10Jadi, terima kasih masukannya.

1:08:12Terima kasih juga diskusinya.

1:08:14Kalau ada yang mau ditanyakan di luar sesi live streaming ini,

1:08:18bisa ke bit.ly/ngobrolinweb.

1:08:21Dan mungkin sekian dulu dari kita malam hari ini.

1:08:27Kalau yang mau follow-follow, saya di @rizavahmi22 di Twitter.

1:08:31Ada @ekafji.

1:08:33Eka, F-Y-I, F-Y, F-Y-I.

1:08:36Dan @ivanchris.com.

1:08:38Ivanchris.com.

1:08:40DOT ya, jangan lupa.

1:08:42Kayak EKA Jalan Gergapak.

1:08:44Ya, benar.

1:08:46Oke, sekian dulu dari kita.

1:08:48Sampai ketemu lagi Menyidupan.

1:08:49Selamat malam.

1:08:51Bye.

1:08:53Eh tunggu, ini ada yang baru nih.

1:08:57Sampai ketemu lagi.