Ngobrolin Viteconf - Ngobrolin WEB Ep4
Implementasi Vite dan WordPress. vite-for-wp: https://github.com/kucrut/vite-for-wp - https://viteconf.org/ seru banget, 12 jam x 2 (ada tayang ulangnya) - Stackblitz mengumumkan produk mereka, Codeflow, di ViteConf. Codeflow sendiri berbasis WebContainers, sistem operasi berbasis Web Assembly(!) yang bisa dijalankan di browser(!!). Walaupun produk-produk tersebut proprietary milik StackBlitz, pendekatannya menarik karena merupakan hal yang baru, dan di layer paling dasar memanfaatkan Web API. Kunjungi https://ngobrol.in untuk catatan, tautan dan informasi topik lainnya.
0:24[suara suara perang]
0:29Halo, selamat malam, selamat hari selasa, dan hari selasa adalah waktunya ngobrolin web.
0:36Malam hari ini masih bersama saya Riza, dan malam hari ini kita ada siapa ya?
0:42Di sini ada Eka. Halo Eka, apa kabar? / Halo, baik. Selamat malam semuanya.
0:47Dan ada juga yang minggu lalu, liburan. / Liburan?
0:52Ivan kembali lagi. / Halo, halo, halo. / Gimana liburannya? / Segar.
0:59Segar ya. Refresh ya. / Healing bahasanya, healing.
1:03Healing ya. [tertawa]
1:07Oke, oke. Nah, iya. Dan mudah-mudahan apa ya, Ivan malam hari ini membawa oleh-oleh dalam bentuk materi.
1:17Siap cerita itu ya. / Iya. Dan malam hari ini kita akan bahas spesifik tentang fit.
1:24Ini apa, bacanya fit apa fit ya? Fit ya kali ya?
1:29Bacanya fit. / Ternyata. Fit. Fit.
1:32Karena ini adalah bahasa? / Frankis. / Frankis ya.
1:35Oh lala, fit. / Eh iklan, nggak boleh.
1:41Kita belum ada iklan. Endorse itu.
1:46Dan kebetulan juga kemarin Eka nunjukin bahwa ada sebuah event yang namanya Fitcon.
1:56Yang baru dikelar. Dan sudah ada di Youtube ya.
2:00Sudah ada di Youtube bisa ditonton, tapi videonya belum lengkap ya.
2:05Jadi kita memutuskan malam hari ini akan bahas tentang fit.
2:09Tapi sebelum membahas tentang fit, mungkin bisa kita ngobrolin dulu tentang apa itu fit.
2:15Ada yang mau menjelaskan?
2:21Nggak. Nggak ada.
2:25Sedih sekali. / Kalau fit itu bundler ya.
2:31Not just JavaScript, aset bundler semuanya.
2:35Kenapa kita butuh bundler?
2:41Good question. Kenapa kita butuh bundler?
2:44Nah, soalnya kita kan nulis JavaScript, kita nulis kode dalam bentuk JavaScript.
2:50Tapi kode yang kita tulis itu belum tentu bisa.
2:57Dan pada umumnya sih belum bisa langsung dibaca oleh browser.
3:01Belum bisa dijalankan oleh browser. Kenapa nggak bisa?
Lihat transkrip lengkap
3:04Soalnya ya macam-macam misalnya ada sintaks khusus kayak kita pakai TypeScript atau kita pakai feature ECMAScript
3:16yang baru, yang mungkin belum disupport oleh browser.
3:23Atau mungkin belum sesuai sama standar yang kita mau.
3:27Lalu ada import dan export yang nggak mungkin library-nya yang kita import kan.
3:32Nggak mungkin di-incor semua kan.
3:34Harus ada proses-proses semacam tree-shaking.
3:37Belum lagi. Apa sih?
3:40Kita mungkin punya modul-modul tertentu yang kita akan bikin fungsi yang terpisah sendiri-sendiri.
3:48Kita kelompokan dalam modul.
3:51Mungkin untuk ngerender komponen secara kondisional kita juga punya potongan-potongan JavaScript
3:58yang nggak memungkinkan atau sulit dijalankan semua di global.
4:04Jadi butuh ada alat khusus, program khusus yang ngecek semacam ngecek kode kita satu persatu nih.
4:12File-file kita dilihat semua, dibaca, lalu diolah, ada logiknya, terus diminifikasi juga.
4:20Jadi apa, nama-nama variable kita kan mungkin panjang.
4:24Lakukan sesuatu, lakukan ini, lalu lakukan itu blablabla, jadi disingkat jadi cuma satu atau dua karakter,
4:30sesingkat mungkin, lalu semuanya di-streamline biar menjadi format yang bisa dijalankan oleh browser
4:39atau bahkan oleh server.
4:41Jadi vendor itu sebenarnya istilah generik ya, istilah umum untuk tool yang menjalankan semua itu.
4:48Baca kode kita dan menjalankan banyak logik tertentu dan mengolah semua kode kita menjadi bentuk yang ringan dan mudah dibaca.
5:01- Oh, menambahkan aja. - Dibaca oleh mesin.
5:04- Iya, menambahkan aja nggak cuma dengan JavaScript.
5:07Bisa jadi, kita kan rata-rata kalau bisa dibilang engineer atau developer jaman now,
5:15kalau nulis styling kan sudah pakai CSS ya, SAS.
5:23SAS itu kan banyak banget ya istilahnya function-function atau ya function ya,
5:36banyak function di SAS yang belum tentu ada di CSS.
5:40Terus banyak singkatan-singkatan misalnya kayak apa bahasanya kalau...
5:47- Nesting. - Nesting, nah itu bahasanya, nesting.
5:51Kalau kita nulisnya di CSS langsung kan panjang ya, sedangkan kalau di SAS bisa jadi lebih singkat,
5:57terus re-usable, terus kemudian, nah SAS itu juga bisa di-compile menjadi CSS, di-transpile bahasannya.
6:05- Di-transpile. - Iya. Terus semuanya kemudian otomatis oleh bundle.
6:12Contohnya fit ini. - Oke, oke.
6:16Kenapa fit ini menarik? Karena kan dibandingkan misalkan bundle kan ada banyak ya,
6:22yang paling terkenal saat ini mungkin webpack ya, webpack, dll, ada parcel.
6:26- Karena yang paling lama, bukan paling lama mungkin ya, yang paling major kali ya, yang dominasi pasar lah.
6:32- Bisa dilihat itu ada satu link dari saya, itu yang tooling.report.
6:37- Oh, tooling.report. - Iya, ada di link menarik itu tooling.report.
6:43Sayangnya fit belum ada, tapi bisa dilihat beberapa bundle-bundle yang sempat tenar di jaman 2 tahun lalu.
6:52- Oh, browserify juga lumayan ya, lumayan sering dipakai. Ini belum jamannya Node.js ya kayaknya ya.
6:58- Iya. - Masih pakai browser aja.
7:02- Kenapa orang pakai browserify? - Dia pakai extension nggak sih?
7:08Kayak Chrome extension gitu? Nggak ya? Nggak gitu ya? - Nggak, nggak, nggak.
7:11- Oh, bukan, bukan. Oke. - Nggak sih.
7:14Dia seperti bundler aja, seperti webpack. - Bundler biasa ya, oke.
7:21- Iya. - Nah, kenapa kok tiba-tiba si fit ini tiba-tiba muncul
7:26dan jadi populer sekali dibandingkan beberapa bundle-bundle yang lain,
7:32termasuk juga yang baru-baru kayak snowpack gitu ya. Apa yang buat dia berbeda?
7:36- Nah, snowpack itu reda, snowpack itu reda tragis sih, kocak nih ada ceritanya.
7:40Jadi apa, dulu kan si Svelte ya, tau kapan sih ya? - Svelte, Svelte.
7:46- Ingat kan, sempat kelihatannya tahun lalu atau mungkin 2 tahun sebelumnya ya.
7:50Ya, pokoknya sekitar 2 tahun lalu, apa, di SvelteCon Richaeris mengumumkan
7:56akan merilis SvelteKit, lalu SvelteKit itu, kan dulu sebelumnya ada Cyper ya,
8:02belum ada SvelteKit. Nah, SvelteKit itu, Cyper itu apas nggak pernah di launching
8:10di production, stop di beta, dilanjutkan sebagai SvelteKit dengan pendekatan
8:15yang lebih sesuai kebutuhan saat itu. Nah, waktu di-announce itu dikabarin
8:21SvelteKit akan menggunakan snowpack. Terus lupa deh, kayaknya ada tooling lain
8:27atau apa-apanya, kelihatannya semua announce akan menggunakan snowpack.
8:32Dan snowpack ini pendekatannya mirip banget sama fit. Nah, tapi beberapa bulan kemudian
8:37pihak Svelte ngumumin nggak jadi pakai snowpack deh, pakai fit aja.
8:42- Dan itu rusuh ya, rusuh ya, gimana rusuhnya? - Bisa ya.
8:46- Rame. Terus kelihatannya pokoknya semua yang tadinya bilang akan pakai snowpack
8:55nggak jadi pakai snowpack, pakai fit. Dan bahkan tim yang membuat snowpack,
9:02mereka tuh akhirnya mengerjakan framework Astro yang pernah kita bahas juga ya
9:08di episode, dua episode lalu. Dan Astro itu juga pakai fit.
9:13Jadi dia nggak pakai, dia juga, Astro pun nggak pakai snowpack, pindah ke fit.
9:19Jadi emang snowpack itu ya, nggak tahu, tetap masih ada dan masih ya bisa dipakai
9:25kalau mau, cuma nggak, kelihatannya nggak actively developed lebih lanjut.
9:31- Oke. - Oh, tutup, ada punggungannya.
9:38- Jadi udah nggak dimaintain lagi ya si snowpack ini ya. - Nah, tapi positifnya sih
9:41walaupun apa ya, kalau dilihat kayak tragis banget, udah di apa, di PHP banget lah.
9:47- Di PHP. - Bukan PHP ya.
9:50Udah dikasih harapan, udah dibiketin, udah dijanjiin, tolnya dibuang.
9:56Nah, cuma kalau dari perspektif engineering ya, kelihatannya mereka tetap bisa apa,
10:03nggak masalah sih, karena sepakat bahwa effortnya difokuskan pada fit
10:09dan timnya itu yang apa, sekarang ngerjain Astro justru memanfaatkan banget apa,
10:16ya kalau di fit konfomarin sih, kalau dari obrolan-obrolannya, ada panelnya juga
10:21dan ada presentasinya, bahwa emang akhirnya mereka semua menemukan jalan yang terbaik lah
10:27intinya. Jadi mereka kerja bareng, closely work together, Astro sebagai framework
10:34yang sangat menganfaatkan apa, apa, feature-featurenya fit, fit juga jadi apa,
10:41single player lah untuk bundler yang, bundler yang perspektifnya modern seperti ini.
10:49- Oke, pertanyaannya apakah snowpack duluan atau fit duluan yang dikembangkan?
10:55Apakah snowpack dan snowpack dalam tanda tipe ya, mereferensikan ke fit
11:02atau fit yang referensi ini dari snowpack? Nggak tahu ya?
11:05- Nggak tahu sih, kalau itu cuma naik duluan sih kayaknya snowpack ya,
11:09masa yang banyak kedengeran snowpack, sempet naik, terus abis itu langsung ditinggalin.
11:15- Oke, fit ini dari komunitas view kan awalnya ya?
11:20- Iya, nah itu salah satu talk, bukan salah satu talk, talk pembukanya talk,
11:25talk pertama di feedcon minggu lalu itu dari mas Evan Yu yang emang apa,
11:33pembuatnya apa, inisiaturnya, kreatornya view juga fit. Dan itu lucu sih,
11:41ada tweetnya, coba dilihat deh di apa, link, ada tweetnya bahwa...
11:48- Ada tweetnya ini. - Nah iya, jadi itu, itu asal-muasal
11:55bisa ada fit sekarang yang digunakan banyak banget, digunakan sama banyak banget framework dan tooling,
12:02itu sebenarnya cuma ide iseng kayak gitu. Dan awalnya emang hanya untuk view,
12:09cuma feed yang tiga ya, yang versi tiga baru dibikin, mereka explore dan ternyata oh,
12:16ini bisa dibikin framework agnostic. Jadi dikembangkan lebih lanjut di versi tiganya.
12:24Dan ini tahun 2020, ternyata 2 tahun yang lalu ini.
12:29- Iya, saya ingat juga ngikutin, kan apa, follow juga kan, jadi pas dia bikin develop awal-awal itu ya,
12:36ya itu dia apa, project iseng kayak project di weekend gitu, terus pada saat itu yang men-trigger dia
12:44atau beberapa orang termasuk Snowpack itu membuat bundler baru setelah webpack kan udah cukup populer kan,
12:52dan parcel kemudian yang lain-lain gitu roll up juga. Nah yang men-trigger mereka untuk membuat adalah
12:58munculnya IS module yang membuat bundler size-nya bisa lebih kecil dan lebih cepat, karena kalau dulu kan,
13:07salah satu alasan kenapa bundler dibuat adalah karena kita tidak bisa import kan.
13:12- Browser belum bisa membaca. - Iya, browser belum bisa IS module kan.
13:18- Iya, jadi belum bisa import/export, itu udah bisa, maka si bundlernya cara kerjanya juga berbeda nih,
13:26berubah, yang membuat si bundler yang lama mungkin udah kurang relevan ya,
13:32masih bisa dipakai tapi mungkin size-nya agak lebih besar dan lain-lain.
13:36- Size yang lebih besar, lebih lama juga kan pasti karena dia harus kerja ekstra.
13:42Hal yang sekarang udah bisa dikerjain sama browser, dulu kan belum bisa dengan perspektifnya webpack,
13:48nah sekarang sebagian kerjaannya bisa dialihkan di offload ke browser.
13:54Semakin lama, nanti kalau browser sudah bisa, IS module segala macam, makin banyak.
13:59- Gak perlu lagi gitu ya. - Gak perlu bundler ya.
14:02Kita langsung nulis, IS script, ECMAScript, udah langsung bisa dijalan-jalan di...
14:09- Kayaknya tempoh hari ada itu deh, ada debat, cuma belum konklusif sih, bakal kayak gimana,
14:15TypeScript in browser. - Oh, TypeScript in browser.
14:19Tapi dulu juga sempat ada ide tuh, si Chrome juga sempat ngide mau include dark language ke Chrome
14:30untuk menggantikan JavaScript. Sebelum Flutter muncul, sebelum Flutter muncul.
14:37Jadi kayaknya sempat ada ide itu tapi mungkin kurang diterima ya, karena itu kan spesifik Google banget kan.
14:45Udah browsernya Google, terus selanjutnya punya Google juga, ya mungkin kurang netral.
14:51Akhirnya gak jadi dieksekusi, sampai sekarang masih yang diterima oleh browser adalah JavaScript.
15:01Semua bisa nulis kode seperti apa, ujung-ujungnya akhirnya dikompilasi ke JavaScript
15:08supaya bisa dieksekusi di browser.
15:10- Oke, wah menarik ya, dunia open source ya. Dan yang menarik adalah di bagian ini.
15:20Tadi lihat sekilas ya, di feed, Instance Server, start, lightning fast, hot module reload, dan lain-lain.
15:27Ini juga sama, itu kan sama. Bahasanya sama persis.
15:32- Kayaknya mereka kayaknya ini ya. - Kayaknya udah kolaborasi sih ya.
15:38Mereka kayaknya kayaknya nyatuin ide aja gitu, nyatuin jalannya, karena jalannya bareng dari pada terpisah.
15:47- Itu loh, kayak di Platt Mobile, berdua satu tujuan. - Asik.
15:52- Berdua satu tujuan. - Tapi berantem dulu, berantem dulu.
15:56- Biasa itu. - Oke, segitu aja cerita-ceritanya.
16:06- Sekarang kita lanjut ke topik berikutnya, yang adalah dari Ivan.
16:10- Oh, gue ya? - Iya lah, kan kemarin udah liburan, jadi lebih fresh.
16:15- Saya yang shell aja deh. - Oh boleh, silahkan.
16:22- Biasa simple, screen 2. Jadi di apa namanya? Di komunitas WordPress. Tadi kok kayaknya nggak kelihatan.
16:38Oke, nah di komunitas WordPress itu, kita kan ada blog editor yang namanya ya.
16:48Dan di WordPress sendiri itu sudah ada banyak modul-modul JavaScript yang sudah by core itu sudah ada dan terutama arahnya ke React.
16:58Dan di WordPress itu ada blog editor dengan codename itu namanya Gutenberg.
17:04Dan itu masih pakai, natively masih pakai webpack. Jadi apa-apa semua sekarang banyak banget, majority masih memakai webpack.
17:16Dan di salah satu project, kebetulan saya bareng dengan Mas Kucrut ini ya, Kucrut atau Mas Zikri.
17:24Kita bareng di sebuah project dan waktu itu dia kayak apa istilahnya, begah ya pakai webpack.
17:34"Aduh lambat nih webpack nih, aduh, yuk project kita kali ini, yuk kita pakai feed coba."
17:39Saya bilang, waktu itu saya leadnya, lead di project maksudnya ya. "Ya udah, ayo, hajar."
17:47Nah, jadilah tuh kita eksplorasi dan yang bikin library-nya Mas Kucrut bukan saya. Mas Zikri ini yang bikin library-nya.
17:58Jadi feed itu bisa untuk bundler-nya di sebuah plugin atau teams, kemudian bagaimana kita bisa NQ-nya dengan mudah.
18:10NQ itu maksudnya gini, jadi hasil bundler itu tinggal bagaimana dipanggilnya di teams, di load, di plugin gitu ya.
18:20Karena ini kan WordPress PHP ya, masih server-side ya, jadi bukan kayak Next.js yang udah semua blok-blok-blok-blok, tuk tinggal jalan ato admin-nya, bukan.
18:31Jadi masih terpisah, bundler sendiri, terus ada PHP, terus PHP-nya kan perlu baca, apa itu namanya, mapping ya.
18:43Map file-nya kan, perlu baca map file-nya, nanti dari map file-nya itu bisa di-queue JavaScript yang mana mau diletakkan atau di-load di page.
19:00Ini hanya adalah sebuah library-nya aja, tools-nya aja bagaimana supaya hal tersebut bisa terjadi.
19:09Jadi seperti biasa, kalau misalnya ini plugin kita, ada JavaScript-nya, ada package JSON-nya, terus ada feed config-nya.
19:18Secara buat config-nya sama seperti buat config-config-feed lainnya, ada plugin, server, ada segala macam.
19:28Terus yang dibuat adalah jembatannya, setelah asset file-nya dibundler, dipanggil dari PHP, server-side, pakai feed and queue asset.
19:45Jadi baca distribution file-nya, nama file-nya, terus ya tinggal ini bahasa dari PHP-nya untuk WordPress, khusus untuk WordPress handler untuk WordPress-nya.
20:00Ada dependency yang perlu di-load sebelum itu, ada CS dependency, perlu di-load di header atau di footer, ini dari WordPress.
20:09Jadi, tapi ini jembatannya. Jadi setelah bundler terjadi, sekarang sudah jadi distributed file-nya, distributed file dan tinggal dipakai.
20:20Silahkan pakai ya, dan untuk misalnya kalau ada external dependency, banyak deh external dependency ya, contohnya memakai React,
20:32maksudnya di sini external global ini artinya sudah di-load sebelumnya, jadi kita tidak perlu bawa ke bundler kita.
20:41Contohnya ada dependency di WordPress sudah ada Lodas, sudah ada React, jadi kita tidak perlu panggil React dan Lodas-nya import di dalam kita punya feed-nya.
20:59Kita tidak perlu bundler, tapi bisa kita import, bisa kita import, tetapi setelah dibundler, dia tidak perlu dijadikan satu ini karena dia external, tinggal dipanggil.
21:12Jadi bisa dibuat seperti itu juga. Contohnya ada di sini, Mas Zikri sudah buat dan waktu itu saya dan tim membuat
21:27sebuah plugin yang bisa membuat blog editor itu bisa seperti Google Doc, bisa collaborative editing. Saya coba demo-nya.
21:38Ini contohnya, button blog, bisa ada, saya bukan buat, saya bukan buat blog editor dan saya buat yang namanya collaborative editing-nya.
21:56Lihat ya, ada admin, terus kemudian saya login satu user lain, di sebelah kanan ini saya login sebagai Ivan, sebelah kiri sebagai admin.
22:10Di atas ini ada orangnya, di sini ada namanya, terus sebenarnya saya sebagai admin, ini ditulis admin lho, di belakangnya nanti KB.
22:32Kalau misalnya di sini saya tambahin, sorry, saya tambahin table misalnya, saya collaborative.
22:46Mirip ya, kayak medium juga jangan dulu. Inspired bahasanya.
23:04Standard blog editor lah ya, sebuah blog editor juga kayak gini kan.
23:10Betul sekali. Saya tidak buat blog editornya, saya buatnya collaborative editing-nya, jadi bagaimana bisa terjadi.
23:20Nah fitconfig-nya simple, waktu itu saya buatnya, ini code-nya. Fitconfig-nya ada di sini. Terlalu besar. Jadi simple aja.
23:41Karena dia pakai butuhnya CSX dan ada juga React Component-nya, saya butuh pakai plugin-nya.
23:50Terus kemudian saya ada external-nya juga, saya harus pakai external-nya React dan external dari WordPress.
24:01Yang butuh saya akses sebagai API-API dari WordPress karena harus connect ke blog editor API-nya ya.
24:09Jadi saya butuh data-data ini. - Berarti external ini adalah JavaScript yang ada di WordPress-nya?
24:16- Yes, betul. Jadi nama library-nya kan WordPress Compose misalnya, atau yang simple deh, WordPress data-an misalnya.
24:27Dan dari WordPress-nya sendiri sudah export. Saat runtime, dia sudah export sebagai weapon.data.
24:35Jadi cuma kayak buat alias-nya. Jadi saya bisa tetap pakai WordPress data di code-nya saya.
24:43Contohnya CSX, contohnya seperti ini. You select that WordPress data.
24:55Ini online peers yang tadinya kita lihat disini. Ini komponennya jadi ambil datanya dari store.
25:12Terus kemudian React Component seperti biasa. Terus di-print, peering-nya.
25:20Udah, gitu. Sebenarnya jadi cuma ambil dari store, dari Redux Store-nya.
25:26Udah, simple. Dan yang paling kita suka dari feed waktu itu, kayak saya waktu dirimuin sama Mas Zikri waktu kita buat ini adalah
25:40HMR-nya cepet banget, banget nget-nget-nget. Hot Model Reloaded ya. Begitu saya tekan save, disini langsung berubah.
25:52Kalau project kita yang agak gede ya, sudah terlalu banyak yang file-nya, bisa 4-5 detik baru kelihatan reload-nya.
26:11Kalau feed instant, kurang dari 1 detik saya sudah bisa lihat hasilnya.
26:18Jadi bisa banget kalau mau loading kiri-kanan begini. - Begitu di-save langsung berubah.
26:26- Betul. - Mantap.
26:28- Ya, itu pengalaman saya menggunakan feed. Terus terang saya masih anak baru pengguna feed.
26:35Masih baru dikasih tahu. Awal tahun pakai feed dan oprek-opreknya sepanjang yang saya lakukan
26:43masih sedih pemakai, belum jadi pengoprek yang lebih dalam. Saya masih baru jadi pemakai aja untuk feed.
26:53Dan so far learning curve-nya untuk feed lebih rendah daripada webpack.
26:59- Karena webpack terlalu banyak konfigurasi. - Konfig-nya gila.
27:05- Betul-betul. - Iya, mantap. Dan kalau kita pakai getting started-nya NPM Create VT Latest misalkan,
27:15itu sudah dikasih template kan. Kita mau pakai Vandala TS, Vue atau VTS, React TS, dan lain-lain ya, sudah disediakan.
27:26- Ya, dia bisa pakai Tabscript sebagai default maksudnya.
27:32Konfigurasinya sudah bisa digenerate kita ya. - Betul. Dan yang Mas Zikri buat itu sebenarnya awalnya
27:40waktu itu kita buat dari proyek ini ya. Ini file PHP-nya yang, oh Manifest, itu bahasanya.
27:47Manifest-nya yang dibaca Manifest-nya dari Manifest. - Oh ya, ini dari sisi PHP-nya ya?
27:56- PHP. Ya, jadi dari sisi PHP-nya setelah distribution file jadi, baca Manifest-nya, terus bisa di-print di HTML Header atau footer.
28:09JavaScript-nya, CSS-nya, segala macam, otomatis. Jadi tinggal di feed and cube selesai gitu.
28:16Jembatan itulah yang kita buat. Oke, segitu dari saya. Mengalaman pribadi.
28:27- Bisa ke saya dulu deh. Nanti baru habis ini Eka yang lebih detail bahas tentang feed dan juga fitting.
28:36- Ya. Dan sebenarnya saya juga dengarnya dari tahun lalu dan udah coba. Jadi terakhir, pernah ngisi workshop untuk TypeScript sama React.
28:48Itu udah pakai, bukan lagi pake create track app, tapi udah pake feed yang tadi.
28:57Dan bisa langsung kan, jadi nggak ada konfigurasi macam-macam, semuanya bisa jalan dan sangat cepat.
29:03- Jadi kuncinya itu selalu cepat ya, lightning fast.
29:08- Nama adalah doa kan ya, ada yang bilang nama itu doa. Nah betul loh. Namanya feed kan, selling point paling besarnya cepat.
29:16- Iya. Dan mudah-mudahan sih. Ini kan kalau kita bilang ini perang tools ya, perang framework, library dan lain-lain.
29:25Tapi mereka selling improve kan. Kalau misalkan webpack sendiri, kalau misalkan islainya dibiarkan sendiri menjadi monopoli kan dia nggak bisa.
29:33Kalau gini dia pasti akan improve kan. Termasuk juga parcel. Parcel juga lumayan cepat gitu.
29:38Dan yang saya temukan adalah di 2021 ada state of JS, salah satu survei. - Parcel itu zero config ya? Parcel itu zero config.
29:50- Betul. Dia bisa ngedetek apa yang ada di folder kita dan di packaging-nya.
29:55Nah di 2021 ada survei state of JS yang untuk sebagian orang bilang ini sangat subjektif ke sirkelnya react katanya.
30:06Karena yang bikin juga dia banyak berkecimpung di react gitu kan. Dan dia menyebarkan ya ke sirkelnya dia yang adalah,
30:16maksudnya, maksudnya react gitu ya. Tapi walaupun demikian, lihat aja nih 2021 VT muncul langsung 98% retention.
30:26Retention ini apa? Retention ini adalah orang yang mau menggunakan lagi. Udah pernah menggunakan dan ingin menggunakan lagi.
30:34Jadi ini adalah happy customer. 98% orang yang menggunakan VIT mau menggunakan VIT lagi.
30:41Kalau gua buat plugin baru atau bikin teams baru, selama itu bukan sudah bawaan, ya maksudnya baru ya, gua bakal bikin VIT kok.
30:52- Engga terlalu jauh dibawahnya ada IS build. IS build udah dari 2020 sebenarnya.
31:02IS build ini juga lumayan cepat dan bedanya cuma 2% ya. Jadi lumayan ketat juga dengan VIT.
31:10WP tadi 78%. - Iya turun.
31:16- Turun. - Betul-betul.
31:18- Dari 95% turun ke 88% di tahun 2020. - Dapetnya kayak saham udah yang makin turun.
31:26Kayak saham zaman resesi. - Zaman resesi nanti 2023 ya katanya.
31:33- Mudah-mudahan jangan. - Dan yang menarik juga ada SWC.
31:38SWC ini yang membedakan dengan VIT dan IS build adalah dia dibangun, eh IS build juga kayaknya dibangun dengan Rush ya kalau nggak salah.
31:45SWC juga dibangun dengan Rush. Jadi ada tren yang menarik di mana orang-orang menulis tools
31:54tidak menggunakan JavaScript tapi digunakan untuk JavaScript. Snowpack masih ada yang puas kok 70%.
32:03- Masih ada loh Gulp. - Gulp tuh 28%.
32:08- Masih ada loh. - Brokerified masih ada 33%.
32:11Roam. Roam ini tools juga ya tapi belum tahu ini apaan.
32:17Tapi yang jelas VIT itu mendominasi begitu muncul 98% tapi kalau kita lihat trennya juga seperti itu ya.
32:24Baru muncul tinggi gitu. Kita lihat tahun depan atau 2 tahun lagi.
32:29Kalau intresnya kita lihat VIT juga paling atas, intresnya adalah orang yang pernah dengar dan ingin coba gitu intresnya.
32:37Kalau usage yang menggunakan, nah kalau yang menggunakan masih mengimpin adalah Wepec.
32:44Karena projek-projek yang sudah berjalan dari 2017, misalkan 2020.
32:53- Mendingan di volume karo semua. - Susah, susah.
32:59- Atau pakai framework-framework seperti Next.js dan lain-lain yang mereka sudah menggunakan Wepec kan.
33:05Kalau organisasi sendiri ya tentunya organisasi ini adalah total keseluruhan dikurang yang belum pernah mendengar.
33:15Jadi ini adalah popularitas ya. Yang paling popular adalah Wepec.
33:20- Ada TypeScript CLI, Wepec masih 90%. - Itu pendekatannya.
33:26- Parcel. - Banyak tau.
33:28- Kok Grunt tidak ada ya? Grunt bukan banjur ya? - Gulp sama Grunt kan mirip ya?
33:34- Grunt itu bukannya ini ya? - Automation ya?
33:38- Automation itu kayak Bauer.js ya? - Oh iya itu juga sih.
33:43- Tuh kan? - Gulp sama Grunt itu kayaknya se...
33:46- Gua masih sempet... iya Grunt itu automation.
33:50- Iya dia automator jadi kayak... ada itu satu lagi ya? - Dia kayak MPM script kan?
33:55- Yeoman. - Yeoman.
33:57- Itu generator kan? - Generator betul.
34:00- Kalau Grunt itu bukannya MPM script ya? Digantikan dengan MPM script ya?
34:05- Dia running tools gitu ya? - Iya itu dulu buat proses JavaScript sama CSS gitu kan ya?
34:12- Tapi butuh kompiler, butuh kompilernya. Jadi dia ngejalanin satu-satu.
34:19- Oh dia menjalanin sesuatu. - Iya. Dia hanya menjalanin satu persatu.
34:23- Oke, oke. Kita lanjut lagi ya. Satu lagi adalah tentang yang masih berhubungan dengan VIT.
34:30Jadi ketika VIT muncul, muncul satu tools lagi untuk testing yang namanya adalah VITES.
34:38- VITES. - Ini juga terkena cepat.
34:40- Oh belum pernah dengar itu. - Iya. Karena Jess cepat.
34:44Mohon maaf, agak lambat ya. Sama kayak webpack ya.
34:48Dan permasalahan terbesar dari Jess adalah dia menggunakan...
34:52Kan Jess ini kan kalau historinya adalah, sejarahnya adalah dia ditulunkan dari Jasmine kan.
34:59Jasmine yang ada di sini, yang adalah testing library untuk front-end waktu itu dipakai di angkular 1 awalnya.
35:07Jadi dia, sebenarnya Jasmine ini sering digunakan tanpa menggunakan OJS tadinya.
35:12Dia bisa jalan di browser. Tinggal CDN aja udah bisa gitu.
35:16Tinggal CDN udah bisa. Terus habis itu dikembangkan lagi sama si Jess akhirnya menjadi seperti sekarang.
35:23Sebelumnya kan ada Mocha, Ca yang terkenal kan.
35:27- Mocha, iya. Masih pakai boss, masih pakai Mocha. - Masih. Mocha masih oke. Masih real fun.
35:33Nah, Jess ini, dia karena dia menggunakan bubble dan juga menggunakan webpack,
35:41jadi ada beberapa library-library baru yang menggunakan IS modul itu kadang tidak kompatibel.
35:47- Wah itu susah itu. - Mungki patchingnya.
35:50- Eskapnya di konfliknya. - Nah, itu tidak terjadi di Vitesse.
35:55Jadi banyak orang yang mulai beralih ke Vitesse.
35:59Dan terbukti udah di atasnya Jess. Kalau testing library ini yang itu punya Ken C dot ya.
36:06Yang head-to-head itu ya Vitesse, Jess sama Ewa dan Jasmine.
36:13- Storybook buat kurang ya? - Storybook untuk testing yang jenis yang berbeda
36:20sama kayak Playwright sama Cypress kan. Playwright sama Cypress ini kan end-to-end testing kan.
36:25- End-to-end. Kalau storybook itu dia bisa menjalankan, dia visual.
36:32Sama dia bisa ngejalanin itunya Jess atau Vitesse juga.
36:39Jadi dia bisa jalan sebagai test runner. - Oh bisa ya? Baru tahu?
36:43- Iya. - Oh kiranya untuk visual doang enggak ya?
36:46- Yang in-house-nya dia. Maksudnya yang produk built-innya storybook emang visual testing.
36:53Terus kita bisa add-on, semacam add-on, plugin accessibility.
36:58Terus kita bisa juga semacam add-on untuk membaca dari Jess atau Vitesse.
37:03- Menarik sih itu. - Menarik.
37:05- Jadi maksudnya biar set-up testing-nya itu sekali jalan.
37:10Jadi storybook-an itu sebagai UI atau front-end development.
37:18- Iya, platform-nya untuk UI. - Menarik.
37:23- Iya. Dan kalau dilihat di usage-nya, ya memang masih kecil banget ya.
37:28Karena baru terbit kan. - Jess masih nomor satu.
37:31- Dan Jess masih yang mengguli, sudah menyalit dari tahun 2019 ya, menyalit Mocha.
37:38Karena Mocha tidak bisa berjalan sendiri, harus ditambahin dengan Chai biasanya.
37:42Kalau Jess sudah lengkap, lebih lengkap lah.
37:45Lebih lengkap ada MOC-nya, ada SPI tools-nya, macem-macem ada semua.
37:51Jadi tinggal sekali install, langsung. - Istanbul nggak ada lagi ya?
37:56- Istanbul itu untuk test coverage, masih ada.
37:59Jess juga pakai Istanbul di dalam internalnya.
38:03Tapi PR-nya adalah Jess ini cukup besar.
38:08Kalau npm install ya, package-nya itu lumayan besar.
38:12Walaupun... - Tapi kan hanya buat testing.
38:16Bukan buat front-end ya. - Iya.
38:20Berarti CI-nya aja begitu sudah lewat, sudah aman sebenarnya.
38:23Cuman pada saat kita npm install atau apa, atau kita baru install, baru nge-clone,
38:27nah itu lumayan lama karena dia install Jess juga di sana.
38:31- Makanya pakai podspace dong. - Oke.
38:37Sebelum kita ke Eka, kita mau... ada pertanyaan menarik dari Mas Lucky.
38:45Kenapa VT nggak jadi ATF untuk angular?
38:48- Nanti kita tanya, kita undang GDI angular. - GDI angular ya?
38:53Di Indonesia ada nggak sih? Nggak ada ya?
38:55- Masuknya web. - Masuknya adalah web kita bertiga doang.
38:59- Jesseline sudah pindah. - Jesseline sudah...
39:02- Nanti kita undang Jesseline lah sekiranya nanya. Sekiranya nanya aja sama Jesseline.
39:07- Tapi kan dia nggak mainin feed dia sekarang. Dia mainin Google Chrome Tools.
39:14Mungkin menanti pull request mungkin.
39:19Karena ini kan template-template komunitas kan, ada di GitHub kan.
39:23Jadi mungkin kalau ada yang pull request atau ada yang isu,
39:27taro isu dan ada yang pull request, lumayan tuh.
39:31- Lumayan ada taunya atau tentang feed sama angular di feedcon kemarin.
39:37Cuma kemaleman udah keburu tiga. - Kemaleman.
39:41- Nggak nonton. - Mas Lucky ini pengguna angular ya?
39:46Mantap, mantap. Berarti mainannya ini ya di apa?
39:51- Enterprise. - Enterprise.
39:54Baasanya asik. - Enterprise. Oke. Sekarang kita lanjut ke pembahasan tentang feedcon.
40:02Dari Eka, silahkan. Ngebahas yang mana dulu nih?
40:07- Ya sesuai. Bahas yang mana ya? Ya bahas feedcon-nya dulu aja.
40:11Jadi ini pas banget, minggu lalu. Abis live stream ini.
40:18Terus isu ngecek, loh ternyata lagi ada feedcon dan ini kalau buat aku
40:24salah satu online conference paling seru sih.
40:28- Kenapa? - Karena dari teknologinya
40:32feed juga emang lagi naik-naiknya kan, lagi high-high-nya.
40:36Terus ini tuh lumayan ekstrim. Nggak ekstrim sih.
40:41Maksudnya ini maraton 12 jam. 12 jam. Talk-nya menarik semua, bergisi semua lah.
40:49- Laging semua kata orang-orangnya. - Laging semua kata.
40:54Emang terus dari maintainer seluruh ekosistem yang berkaitan sama feed.
41:00Jadi bukan core feed-nya doang. Cuma ekosistem kan luas banget tuh.
41:05Ada framework, ada tooling yang kayak tadi yang kayak apa testing,
41:11documentation, terus storybook kayak misalnya visual tools kayak storybook,
41:17terus design system. Jadi itu seru banget dan nunjukin gimana bagian-bagian
41:24yang berbeda dari ekosistem itu saling berinteraksi dan gimana mereka bisa
41:29mengangkatin yang feed ini untuk produk mereka masing-masing. Ada panelnya juga.
41:35Cuma ya itu masalah, bukan masalah teknologi semua lah, masalahnya jam 12.
41:42Itu kan mulai sekitar jam 7 atau jam 8 malam di waktu Indonesia.
41:47Tengah malam ya mulai ngantuk kok dia tinggalin.
41:50Jadi mereka running 12 jam. Tapi tayang ulang.
41:56Jadi tayang ulang untuk penonton yang di time zone berbeda.
42:00Jadi siangnya tuh sebenarnya siangnya tuh jalan lagi.
42:04Nah masalah lainnya malam tidur, siang kerja ya kan.
42:07Jadi pas siang cuma colongan dengerin yang panel tentang framework sebentar,
42:13abis itu nggak kontrol. - Bisa sambil kerja pakai headset?
42:16Kayak dengerin radio gitu. - Nggak bisa kontrasi sayangnya.
42:21Eh gimana tadi Mas Rizal tanya apa? - Apa ya? Lupa ya.
42:27Oh ini, jadi walaupun kita tengah malam dan nggak bisa nonton,
42:32kita masih bisa menikmati video on demand-nya ya.
42:35Jadi bisa di-check di YouTube. - Iya, ada tayang ulang.
42:37Ada videonya. - Baru dua.
42:41Kalau yang full streamnya kayaknya ada, cuman nggak full stream
42:47beneran yang 12 jam itu nggak ada sih. - Nggak ada ya? Beda ya?
42:50- Nggak dipublish kayaknya deh.
42:52Maksudnya pas running sih emang nontonnya di YouTube kayaknya unlisted,
42:57jadi nggak ada di channelnya.
42:59Tapi kayaknya sih kalau di Twitternya fit, mereka janji ya pasti juga
43:05bakal dipublish per talk videonya, jadi lebih gampang.
43:10- Di-edit dulu ya, dipotong-potong. - Di-edit dikasih judul, dll.
43:16Jadi itu, kayaknya baru pernah lihat aja yang conference yang free online tentunya,
43:23yang skalanya se-massif ini, sebesar ini,
43:26dan se-luas ini dari macem-macem perspektif itu sampai ada hosting dan di-edit segala.
43:31Terus jadi kayaknya ini bakal kalau misalnya nanti videonya udah dipublish,
43:38bakal banyak kagumateri seru.
43:41Terus selain itu, salah satu highlight yang paling menarik buat aku itu
43:48ada pengumuman dari StackBlitz.
43:50Jadi StackBlitz itu kalau buat teman-teman yang belum pernah pake,
43:54produk mereka adalah coding IDE, ya standar lah StackBlitz, Codes & Box,
44:01mirip juga sama Skinless, kalau dari niche-nya atau pengelompokan produknya,
44:08bahkan sama kayak GitHub Dev, itu yang kita bisa edit kode di browser.
44:14Cuma yang menarik, yang menarik ini di Vidconv ini
44:18si StackBlitz meluncurkan produk mereka, itu namanya Codeflow.
44:22Nah itu dengan Codeflow itu kita bisa berkolaborasi di GitHub dari browser kita.
44:33Jadi sebetulnya Skinless mirip dengan GitHub.dev itu.
44:38Jadi kita bisa edit kode, terus kalau emang kita punya permisi ke repo itu,
44:45ya kita bisa pull request, kita bisa preview segala macem.
44:48Cuma apa bedanya dengan produk yang udah ada, produk sejenis yang udah ada,
44:54ternyata si Codeflow itu menggunakan dibalik layar, misalnya under the hood,
45:00dia menggunakan produknya StackBlitz juga, jadi in-house mereka bikin namanya Web Containers.
45:09Web Containers itu menarik banget karena mereka bikin si StackBlitz itu membuat sistem operasi,
45:20jadi OS, Operating System, berbasis Wasm, berbasis WebAssembly.
45:25Dan OS itu bisa dijalankan dari browser, jadi itu pendekatan yang menarik aja sih.
45:36Terus walaupun sebetulnya StackBlitz itu ya perusahaan komersil biasa, maksudnya bukan.
45:42Itu bukan web standar atau apapun, jadi itu produknya mereka.
45:50Tapi yang bikin menarik itu untuk mereka bisa bikin Web Containers, sistem operasi
45:57yang bisa ada node server segala macem jalan di browser, mereka itu sangat memanfaatkan Web API.
46:07Dan bahkan di blog postnya mereka, di top dan di blog post mereka,
46:15mereka cerita gimana mereka harus bekerja sama dengan erat dengan tim-tim yang mengerjakan
46:22web standar dan feature-feature web dari Chromium.
46:25Jadi emang mereka pertama kali launching di browser-browser berbasis Chromium
46:30karena itu yang paling, apa, feature-nya paling mendukung.
46:34Tapi mereka juga membuat beta yang bisa jalan di Firefox.
46:39Kan pakai engine yang berbeda, Spider Monkey. Nah, di situ, karena kan ada Chromium,
46:46ada Spider Monkey, dan bahkan ke depannya mungkin mereka akan menjajaki Safari juga.
46:51Nah, itu semua dipersatukan, ya maksudnya balik lagi ke web standar.
46:57Jadi mereka pun harus kerja atau explore balik ke web standar itu sendiri.
47:06Itu seru aja sih. Jadi, kalau misalnya tertarik untuk lihat detail teknisnya,
47:13bisa cek di talk mereka di Vidcon. Cuma itu buatku menarik karena pendekatan baru
47:21yang agak beda dengan selama ini misalnya GitHub dev atau code sandbox itu kan
47:26sebetulnya berjalan di server mereka, di proses di server mereka.
47:32Nah, kalau di sini itu pendekatannya kayak membuat semacam sandbox di browser kita sendiri.
47:38- Mana talk-nya, yang ini ya? Stack Glitz keynote ya? Benar nggak?
47:44- Iya, kayak Insta Development workflow.
47:47Ada videonya juga di posting sama Stack Glitz juga.
47:53- Bisa selesaikan masalah yang pasti saya bilang itu kalau Insta Jest kelamaan,
47:59itu udah jalan sendiri itu di browser.
48:01Jadi kalau mereka tuh pakai istilahnya "Build for the web, on the web."
48:07Itu cara mereka menyebutnya.
48:11- Ini menarik sekali ya, karena Node.js adalah sebuah dari browser diambil gitu kan.
48:22Ini V8-nya diambil dan dijalankan di server.
48:26Server-nya diambil lagi supaya bisa jalan di browser ya.
48:33Jadi muter-muter saja ini ya, saling ngambil gitu ya.
48:36- Nah, semuanya yang paling bawah hekmas scriptnya, apalagi spesifikasinya.
48:42- Oke. Dan yang menarik yang kedua adalah ini mirip modelnya itu hampir seperti Docker ya.
48:50Jadi kalau misalkan ada kesalahan dll, kita nggak masalah, maksudnya nggak usah takut gitu ya.
48:55Nggak usah takut merusak environment, dia balik lagi ke state awal gitu ya.
49:00- Iya. - Iya, kalau udah bingung.
49:03- Jadi kalau error, refresh aja. - Refresh aja.
49:08- Jadi kayak spin ulang lagi aja.
49:11- Berarti bisa, jadi bisa jalan di browser user ya, gitu ya.
49:17Bahkan bukan lagi di HCD ya, tapi jalannya di browser. Menarik.
49:23- Menarik. - Tapi nggak semua API Node.js disupport kan?
49:27- Nah itu punya dia berbasis V8. Kayaknya ada limitation-nya, ada apa gitu yang nggak bisa ada tuh di bloknya mereka.
49:36Cuma kurang tahu detailnya apa. Terus sayangnya sih, maksudnya sayangnya encode mark ya.
49:43Ini kan proprietary product, kalau sekarang masih free karena beta.
49:48Nah mulai 2020 itu mungkin berbayar. Cuma berharap aja, ini kan baru satu player.
49:55Kalau misalnya ternyata ini bisa dilakukan, ke depannya ya sukar-sukur banyak yang bikin.
50:00Nanti lama-lama juga ada yang free.
50:02- Iya, web kontenernya sendiri nggak berbayar kan. Yang berbayar yang StackBlitz code flow-nya kan.
50:08- Code flow-nya kelihatannya.
50:11Kalau misalnya teman-teman tertarik mau bikin yang versi lebih terjangkau dari code flow,
50:21ya bisa pakai web kontenernya punya mereka, ya kan?
50:24- Dan itu free untuk, apa sih, justru mereka punya semacam SDK.
50:31Nah itu ada talk-nya juga, cuma udah nggak fokus, udah ngantuk atau gimana kayaknya.
50:36Jadi kalau code flow kan untuk yang automatic GitHub, itu emang orientasinya untuk enterprise ya.
50:44Kalau web kontenernya ini, mereka bikin SDK untuk edukasi, untuk demo kayak misalnya buat tools open source,
50:56atau mungkin kayak misalnya kita tuh, kita sebagai JDI sering presentasi kan, itu presentasi bikin code walkthrough.
51:04Apa yang terjadi kalau ini dieksekut, kayak bikin sandbox untuk misalnya review cara kerja code,
51:10itu bisa dengan web kontenernya. Dan ada talk-nya tentang itu, cuma karena nggak berhatiin lupa yang mana.
51:18- Wah menarik sekali. Kalau misalkan orang, apa, teman-teman yang sering bikin workshop pasti ini relat sekali ya.
51:24Jadi kita bisa kayak klon, udah sampai di stage berapa atau di level berapa, di materi keberapa.
51:32Misalkan ada yang ketinggalan, udah, tinggal klon yang baru, jalanin, oh sampai di sini terakhir, kita bisa lanjut materi berikutnya.
51:40Wah seru ya, semakin seru ya dunia web ya.
51:44- Nah, terus kalau di feedconf-nya sendiri nih, talk lainnya, apa ya, yang karena sebenarnya aku cuma berhatiin di awal,
51:56yang bagian-bagian awal, itu menarik juga sih. Ternyata kan selama ini bundler itu bagian dari teknologi atau tooling
52:06yang kerja diem-diem ya, ibaratnya. Kita sebagai web developer pun nggak sepenuhnya aware what it takes,
52:16kayak mereka apa aja dan... - Karena cuma set up once, udah, jalan aja terus ya, dia jalan otomatis.
52:25Karena kita cuma konfig sekali, ya rata-rata jarang banget kan ganti konfig feed atau ganti konfig webpack.
52:32Jarang kan kalau sudah project berjalan, sudah jalan otomatis.
52:37- Iya. - Hanya sesekali...
52:39- Kecuali kalau misalkan ada migrasi, misalkan ada migrasi. Dari JavaScript mesti ada TypeScript misalkan.
52:45- Atau kita butuh scripting atau apalah, customization ya. Nah, karena selama ini nggak terlalu mikir tentang itu,
52:52lumayan umis juga sih. Mereka tuh keputusan tentang desain, tentang arsitektur, tentang bagaimana mereka
53:03mecahkan suatu masalah itu seru sih. Kayak tadi misalnya contohnya Evan Yu tuh menjelaskan perjalanan dari
53:12paling pertama dia punya ide untuk bikin bundler yang memanfaatkan native IS modul.
53:18- Iya, IS modul. - Sampai akhirnya, sampai di tahap sekarang
53:22feed yang digunakan banyak banget macam-macam framework dan tooling. Lalu ada Anthony Fu.
53:29- Oke. - Keliatanya dia juga maintainernya feed ya.
53:33- Feed test. - Oh, feed test. Sama Youno CSS ya,
53:38kalau nggak salah. Pokoknya macam-macam tooling di ekosistem feed dan view.
53:43Nah, beliau tuh cuma lightning talk. Sebenarnya talk-nya tuh singkat banget, cuma 6 menit-an lah.
53:51Tapi cukup bisa menjelaskan sebetulnya feed itu apa dan cara kerjanya gimana.
53:59Jadi dia menjelaskan apa saja yang dibutuhkan dalam environment dev. Kalau dev apa sih yang kita butuhin?
54:07Kode kita kan, kode yang ditulis oleh developer kan sering banget berubahnya.
54:11Sementara isi node modul dependensi kita dalam sepanjang development kan hampir nggak berubah sama sekali.
54:19Jadi itu kan masuk dalam pertimbangan waktu mereka feed membuat bundler, membuat teknologi.
54:30Dan bahkan kalau apa? Ternyata kalau di dev server, mereka tuh nggak membundle kodenya.
54:40Jadi emang bundle-less disebutnya, langsung dijalankan.
54:45- Langsung jalanin modulnya. - Jadi itu tadi yang sempat dibahas sama Ivan tadi ya.
54:50Yang begitu berubah, cepet banget HMR-nya nggak sampai satu detik, langsung berubah.
54:56- Langsung kode yang... - Reload stand.
55:02Langsung lucu di browser. Jadi itu disebut sama mereka dengan on-demand.
55:09Jadi apa yang direplace ya apa yang dibutuhkan aja. Terus berbagai strategi, trade-off mereka.
55:17Terus gimana cara mencapai yang mereka mau itu. Itu seru sih. Ada link-nya juga.
55:26- Jadi si Antoni Fu ini adalah co-team member dari Feed, VU dan Nax.js. Dan dia yang bikin Vitesse, kreatornya.
55:36- Oh, Vitesse yang kita sebut tadi ya? - Iya, kita sebut tadi.
55:41- Gokil sih orangnya sih. Mantap sih. Ini tentang apa nih? Oh iya, ini dia.
55:48Oh ini yang tentang on-demand nih. Wih, 30 menit.
55:54- Dia cerita tentang strategi apa? Tentang pendekatan on-demand, tapi diterapkan untuk bundling.
56:04Terus trade-off-nya bagaimana? Jadi "Only transpile the modules you need."
56:13- Ini mirip-mirip kayak konsepnya virtual dom-nya. Yang berubah hanya yang berubah saja.
56:28Jadi modul-modul yang lain tidak disentuh. Berarti kalau webpack, semuanya jadi fresh.
56:34- Masalahnya kalau dia HOC-nya kepanjangan, terlalu banyak, high order component sampai ke atas,
56:42yang berubah kecil, selalu trade-nya berubah. - Itu tergantung kitanya juga.
56:49- Kalau webpack, begitu dia berubah, dia... - Nge-bundling semua lagi.
56:59- Nge-bundling bagian itu, tapi di transpile lagi semua. - Di transpile lagi.
57:07- Kalau di-feed, malah kalau di-development, ya udah langsung.
57:12Cuma ternyata memang beda antara development sama production. Production itu mereka pakai roll-up dan es-build.
57:21Itu dulu sempat nggak paham sih aneh kok es-build sama roll-up bukannya sama, ternyata bukan sama.
57:28Bundlingnya tetap roll-up, si es-build itu untuk tree-shaking sama transpile.
57:36Roll-up sama feed bukannya satu hal yang sama ya? - Nggak, si feed itu pakai roll-up under the hood.
57:46Untuk production. Itu menarik sih seru. - Pantesan si es-build itu lebih memilih menggunakan feed
57:55daripada menggunakan snowpack. Es-build kan yang bikin roll-up juga kan?
58:02- Oh iya ya, Rich Harris. - Rich Harris yang bikin roll-up.
58:07- Oh jadi roll-up digunakan di bagian production-nya kalau mau bundling code untuk production-nya.
58:17- Masa ada di dokumentasinya? - Dokumentasinya ada kok.
58:23Jadi emang dia punya strategi kalau di-development kita butuh feedback loop yang cepat.
58:27Kita ngebahit kode, ya udah kita pengen bisa langsung lihat. Nah, tapi kalau di production, prioritasnya beda lagi.
58:34- Iya betul. Oh sengaja ya? Error ini sengaja ya? - Iya sengaja kayaknya.
58:45- Enggak, ini emang error. - Oh approve video ya. Playframe mungkin ya.
58:57- Terus dibundling. - Itu kalau di traditional approach kayak gitu.
59:03- Dia akan selalu rebundle ya untuk setiap kali kita request gitu ya. Setiap request, bukan setiap perubahan kode ya?
59:12- Kalau SSR mungkin. - Oh iya SSR, bener-bener. Oh ini udah ngomongin Nux ya.
59:20- Nux, iya karena Nux juga kayaknya ya tadi. - Nux itu buat temen-temen yang gak tahu itu adalah next.js-nya Vue.
59:29- Next-nya Vue. Itu gak helpful banget definisinya. - Aplikasi framework untuk Vue.
59:39- Iya meta framework. - Svelte, Svelte, dan SvelteKit.
59:45- Nah pas di announced tuh gue cuma lega satu aja, untung mereka gak ngasih nama Nux.
59:51- Nux, kenapa ya lu? - Nggak, kalau react kan, jadi kalau untuk framework react, meta frameworknya next.js, next.
59:59Kalau untuk framework Vue, meta frameworknya Nux. Nggak lucu kan kalau untuk Svelte dia bikin Nux, gak lucu.
1:00:08Jadi untungnya gak SvelteKit. - Jadi next Nux-Nix gitu ya.
1:00:16- Sebenernya awalnya kita meta framework itu kayak Ruby, Ruby on Rails gitu ya. - Iya emang based on.
1:00:24Dan bahkan fit ini bisa dijalani di server. Magic juga sih ini. - Iya ajaib sih.
1:00:33- Lila makan apa, Ivan Yui yang bisa bikin kaya gini-gini ya. Yang jelas dia gak makan nasi ya.
1:00:39- Bukan makan nasi. - Oh dia makan nasi. Oh iya dia orang ini ya.
1:00:44- Orang Yui. - Nasi ya dia ya. Oh iya makan nasi kali dia ya. Sama ya.
1:00:49- Ramen, ramen, ramen, atau instant noodle. - Ya banyak-banyak makan ramen lah coba.
1:00:55- Oke. Ada lagi? - Terus masih berhubungan sama Roll Up. Tadi kita bahas Roll Up nih.
1:01:03Ada Mas Siapa ini yang namanya susah? Lukas Tiger Atkinson. Nah, lio itu maintainernya Roll Up.
1:01:12Dan justru di apa? Nah itu udah hashing dilemma, blablabla. Disitu mereka announce launchingnya Roll Up versi 3.
1:01:25Ya intinya sih itu makin sinergis lah, makin nyambung sama cara kerja Fit dan dengan segala kebutuhannya ya.
1:01:37Maksudnya Fit kan juga gak stand alone in the vacuum, tapi semua framework dan tooling yang bergantung sama Fit.
1:01:45Nah Roll Up 3 juga menyesuaikan, dia juga selain ngejelasin tentang Roll Up 3-nya, juga itu menjelaskan tentang hashing dilemma.
1:01:58Nah ini juga menarik karena sebagai web developer yang sehari-hari lebih ke front-end, juga asli gak pernah mikirin ini.
1:02:07Gak pernah secara mendalam mikirin ini. Cuma ternyata itu hal yang cukup major untuk tooling seperti Roll Up.
1:02:19Jadi gimana caranya mereka ngecekkan semua kode atau semua file yang kita import dan kita gunakan, kadang kita ada circular import dan lain-lainnya.
1:02:31Mungkin kode di file A misalnya bergantung dengan value di file B. File B bergantung sama kode di file C dan seterusnya.
1:02:43Nah mereka kan under the hood harus menerapkan sistem hashing biar ngedetek kalau kode di file A berubah, file-file mana aja yang harus dibaca.
1:02:54Nah kalau kode itu kurang optimal, kalau hashingnya kurang optimal, itu menghasilkan isu performa.
1:03:01Jadi kalau big O notation-nya jadi besar banget. Kalau file kita cuma 3 ya oke lah. Kalau misalnya berubah 1, jadi harus ngebah 3-3 nya gak apa-apa.
1:03:15Tapi gimana kalau kita punya 100 file, gimana kalau kita punya 1000 atau sejuta file, termasuk dependencies external.
1:03:23Jadi dia ngejelasin, tapi itu menariknya tauknya gak teknikal yang terlalu sulit banget sih. Jadi dia pakai pseudocode.
1:03:33Oh oke, penjelasannya apa itu pseudocode ya?
1:03:37Tentang pendekatan umumnya aja, terus dia ngasih contoh dengan apa, pakai emoji ikan itu loh, ikan.
1:03:44Dan dia ngejelasin apa yang, gimana mereka ngecek apa aja yang harus berubah.
1:03:49Jadi itu tauknya menarik, sayangnya belum dipublish sih, tauk yang big O stand-alone-nya.
1:03:55Yang ini ya, oke.
1:03:57Nanti kalau itu di-baseskinnya nonton lagi.
1:04:01Nah tuh, teman-teman yang berkecimpung di tooling-t tooling open source kayak gini, dia mikirin gimana caranya aplikasi yang kita buat itu bisa performanya bagus.
1:04:16Kita tinggal pakai doang gitu. Jadi jangan lupa kalau pakai tools-tools ini, ya grateful lah.
1:04:22Ngucapin terima kasih buat mereka juga. Yang udah mikirin kita, sementara kita tidak mikirin mereka.
1:04:28Cuman pakai aja gratis, abis itu kadang-kadang komplain di isu ya. Ini kok lambat, ini kok.
1:04:33Kalau begitu masalah dikit, protes.
1:04:36Protes, bayar juga enggak, donasi juga enggak gitu kan.
1:04:39Ini dia.
1:04:41Tapi bukan berarti kalau donasi juga kita bisa protes kan.
1:04:44Oh iya. Donasi juga kan kita buat ini kan mengapresiasi apa yang mereka lakukan.
1:04:53Oke.
1:04:55Sama sekarang udah banyak banget bander. Maksudnya udah maju.
1:05:00Jadi mas Lucky pakai framework andalannya apa dong?
1:05:14Boleh di-share juga ya. Teman-teman yang ada yang menonton, boleh di-share.
1:05:20Framework atau library favoritnya apa?
1:05:23Pengen tahu juga.
1:05:24Oke. Sekarang kita mungkin bacain pertanyaan kali ya.
1:05:28Saya akan bacain pertanyaan dari yang ada di Slido.
1:05:32Kalau teman-teman yang nonton tapi tidak live,
1:05:37boleh nanya-nya ke Slido atau di bit.ly/ngobrolinweb.
1:05:42Kalau teman-teman yang nonton, bisa langsung nanya ke komentar aja, langsung kita jawab.
1:05:46Oke. Kita menjawab pertanyaan pertama nih.
1:05:50Bagaimana cara mengamankan atau encrypt kode JavaScript misal untuk project react?
1:05:56Bagaimana dengan dibundle menggunakan webpack kode JavaScript jadi aman?
1:06:00Ini pertanyaan dari Mas Anonymous.
1:06:02Mudah-mudahan Mas Anonymousnya nonton. Ada yang mau jawab?
1:06:06Gua bisa menjawab tetapi mungkin nggak semuanya, jadi nanti bisa ditambahin.
1:06:14Jadi kalau kode yang sudah ditransfer atau dibundle itu dengan webpack atau apapun itu,
1:06:20itu kadang ada bahasanya security to obscurity gitu ya. Artinya kodanya sudah di minify,
1:06:27diacak, dan susah dibaca. Tetapi itu bukan berarti satu-satunya, bukan berarti itu adalah aman.
1:06:34Jadi jangan pernah ada API key atau key atau secret di dalam bundler.
1:06:40Itu bukan begitu. - Bisa di cari juga.
1:06:43Bisa di reverse engineering. Pasti bisa di reverse engineering.
1:06:48Jadi jangan pernah ada. Jadi kalau untuk 100%, jangan tidak ada yang bisa mengamankan kode JavaScript.
1:06:56Itu satu. - Iya, karena dia jangan di client.
1:06:59- Betul. - Apapun yang ada di producer,
1:07:01aku bisa dibaca. - Jangan percaya gitu.
1:07:04Dan kalau butuh authentication, ya tetap pakai authentication dengan benar.
1:07:09- Harus ada server side. - Oauth, harus ada server side.
1:07:13Oauth ke JWT ke apapun itulah. JWT itu JSON Web Token.
1:07:21Jadi apapun itu tetap butuh server side authentication
1:07:27kalau memang datanya sensitif dan butuh diproses.
1:07:31Jadi tidak bisa full 100% di client. - Oke.
1:07:37Eka mau namain? - Sebenarnya belum ada pengalaman pribadi entripsi.
1:07:45Cuma kalau pertanyaannya bandel dengan webpack, bandeling ya kayak yang kita tadi barusan udah bahas,
1:07:52bandeling sih fungsi utamanya bukan itu. Jadi kalau tujuannya untuk entripsi,
1:07:57ya itu tadi harus mencari obscure, untuk obscure kode.
1:08:04Cuma mungkin kalau misalnya tujuan. Kan gimana pun kalau udah masuk browser,
1:08:09ya JavaScript-nya bisa dibaca. Cuma mungkin sudah di-minify dan kalau di-obscure lebih jauh lagi,
1:08:16ya apa, mungkin bukan aman atau entripsi tapi nggak human readable ya.
1:08:24Jadi semua kayak yang udah karakter-karakter 1, 2 karakter dan nggak ada spasinya dan lain-lain.
1:08:31Jadi kalau tujuannya cuma untuk menyembunyikan apa ya, kayak kode komponen aslinya, kode react-nya,
1:08:38mungkin masih bisa. Cuma ya tetap bisa di-kan,
1:08:43kalau di-minify atau aglify, itu maksudnya yang spasinya segala macam diilangin,
1:08:50kan bisa di-pretify, bisa di-reverse engineering dengan pretify.
1:08:55-Beautify. -Beautify.
1:09:01-Yaitu bisa dibalikin lagi intinya. -Pretify nggak ada, adanya pretier.
1:09:06-Oh iya. -Iya.
1:09:11-Beautify ya, oh iya. Cuma kalau buat ngumpetin kode react,
1:09:16misalnya kode react atau kode swelled aslinya, ya masih mungkin.
1:09:20-Jadi itu bukan Encrypt tapi ya, nggak tahu kan kalau Encrypt.
1:09:25Encrypt itu kan semacam JWT atau apa ya? Cuma kan nggak punya segala kode di Encrypt.
1:09:33-Mungkin maksudnya gini bahasanya, kalau Encrypt itu,
1:09:36kalau communication, kalau encryption, ya pasti gunakan HTTPS, SSL, KSTS,
1:09:43itu untuk komunikasi antar client dengan server, pakai SSL untuk encryption-nya.
1:09:49Kalau gilakan data payload itu kan sudah bisa mungkin jangan bisa dibaca oleh
1:09:55network admin, ya third party. -Ya, oke.
1:10:01Mau nambahin dikit, mungkin nggak tahu ya, ini relevan atau nggak.
1:10:07Maksudnya Encrypt ini di sini masih agak membingungkan.
1:10:10Encrypt di sini maksudnya apa, tapi kalau dulu sempat ada, misalkan kita bikin
1:10:16aplikasi web nih, tapi server-side ya, PSP misalkan.
1:10:20Nah, zaman dulu itu ada PSP, ada ZEN encoder namanya.
1:10:24-Ada ZEN dan IonCube. -Ya, gitu.
1:10:28Nah, jadi kode PHP-nya kita tanam di server orang misalkan, gitu kan.
1:10:34Dan ketika orang yang punya server itu mau ngambil file PHP-nya itu nggak bisa dibaca,
1:10:39ya memang di Encrypt. Tujuannya supaya misalkan kita diminta untuk bikin
1:10:49aplikasi, tapi bikin aplikasinya aja, tidak disertakan source code-nya.
1:10:53Nah, ini berbeda dengan JavaScript. -Tapi hosting-nya di tempat client.
1:10:58-Sama aja analoginya kayak gini, kita bikin aplikasi, file-nya executable,
1:11:04ya kita kasih kan, pakai diskette, pakai CD, gitu kan. Dan itu nggak bisa dibaca kan dalamnya.
1:11:09-Binary-nya nggak bisa diambil. -Ya, karena itu sudah executable.
1:11:14Kalau Java sudah jadi war file, sudah jadi war.
1:11:19-Ya. -Ketawa banget gua umurnya ya.
1:11:23-Jadi kalau di JavaScript sepertinya nggak bisa, belum bisa, belum ada.
1:11:28Jadi mungkin sekarang juga udah mulai nggak relevan karena nggak perlu install
1:11:35di servernya dia, tinggal taro di cloud, jadikan software as a service.
1:11:39-Sebagai service-nya ya. -Betul.
1:11:41Kalau misalkan dia mau pakai aplikasinya, ya silahkan, register, bayar,
1:11:45kemudian pakai. -Dapat key connect ke situ.
1:11:49-Iya, mungkin solusinya kesana sih, lebih kesana. Dan barusan banget ada yang nanya nih
1:11:55tentang bundler, walaupun mungkin tadi sudah kita jawab secara tidak langsung,
1:12:00tapi boleh kita jawab sekali lagi, kenapa modul bundler itu ada?
1:12:04Apa permasalahan yang ingin diselesaikan? Kenapa nggak pakai CDN aja?
1:12:08Selama pakai CDN sih, selama mungkin aku pakai CDN, silahkan pakai CDN sih.
1:12:13-Karena... -Apa kalau mau import?
1:12:15-Iya, karena semakin... -Apa umurnya modul bundler dengan CDS?
1:12:22-Iya, maksudnya seluruhnya, seluruh library-nya dipanggil dari CDN.
1:12:27-Iya. -Technical-nya bisa.
1:12:29-Iya, misalkan mau pakai RIA, kenapa harus pakai NPM listal, pakai CDN aja, gitu.
1:12:34-Oh ya, nggak apa-apa. -Silahkan kalau masih bisa, kan?
1:12:37-Iya, contohnya yang tadi, yang saya demo-kan tadi, mungkin bisa mundur.
1:12:42Itu plugin yang saya develop, plugin yang untuk di block editor itu di WordPress,
1:12:48itu yang saya bundler cuma kodonya saya.
1:12:53Sisanya dari CDN. Atau dari Core WordPress, ya.
1:12:58Bisa ya, dari Core WordPress, kan external bahasanya ya.
1:13:01External dari Core WordPress, dan nanti ujung-ujungnya Core WordPress itu di-serve oleh CDN.
1:13:06Which is pretty much the same ya, maksudnya konsepnya sama.
1:13:11Dan hanya kodonya saya aja yang saya bundler.
1:13:14Dan itu nanti di-serve via CDN.
1:13:17-Mungkin pertimbangannya beratikan kalau sudah minified, dan kita pasti langsung pakai itu ya.
1:13:24Ya udah, panggil dari CDN aja beratikan.
1:13:26-Iya. -Itu.
1:13:29Ya intinya sebenarnya selama masih bisa pakai CDN dan performanya bagus, silahkan pakai CDN.
1:13:34Nggak usah pakai yang aneh-aneh, gitu ya.
1:13:36-Gak bahaya juga ya, kalau kerjakan web personal, ya nggak apa-apa pakai web CDN.
1:13:46Tapi kalau sudah sampai kelasnya enterprise, kita ada rule-nya atau policy-nya nggak bisa melod dari...
1:13:53-External. -External, itu nggak boleh.
1:13:56Karena ada data yang perlu dijagal, juga ada sniffing atau segala macam, itu perlu ditutup semua.
1:14:03Jadi kita harus di-serve, bahkan font nggak boleh load dari Google Font.
1:14:07-Oh, harus dari internal? Harus serve sendiri?
1:14:10-Ya, font-nya itu kita download, nanti kita serve hosted sendiri.
1:14:15Jadi nggak boleh load dari CDN.
1:14:19Terus kalau CDN-nya down, kayak dulu kan pernah tuh kejadian cloud rate down, terus semuanya...
1:14:25-Iya, selesai. -Semuanya down.
1:14:27-Semuanya nggak enteng-enteng. -Iya.
1:14:29Ya, tapi kalau misalkan proyeknya aman-aman aja menggunakan CDN tadi, silahkan pakai sampai dibutuhkan.
1:14:37Dibutuhkannya kapan? Kalau misalkan katakanlah, sekarang kan aplikasi, kalau misalkan kita bikin website
1:14:43atau company profile, mungkin CDN oke.
1:14:46Tapi kalau misalkan kita bikin aplikasi web, itu dependensinya berapa banyak sih?
1:14:50Misalkan kita pakai React. Terus kita butuh React, apa lagi? React Query.
1:14:55Kita butuh GraphQL, client. Kita butuh apa lagi? Lodes.
1:14:59-GraphQL. -Mungkin, momen JS lah, gitu.
1:15:02Atau apa, gitu kan? Banyak kan?
1:15:044-5 dependensi kita load dengan CDN itu performanya nggak bagus.
1:15:09Makanya muncul si web bundler ini untuk menggabungkan. Karena dia akan dikost 5 kali.
1:15:15Plus bundler itu juga ada 3-shaking, kan?
1:15:19Jadi misalkan Lodes pun nggak paling kita gunakan.
1:15:23Lodes itu kan ada banyak isinya, ya. Ngapain, kita import semua, gitu.
1:15:27Jadi perlu 3-shaking, hanya butuh yang dibutuhkan saja.
1:15:31Sampai bahasa internationalization dan lain-lain.
1:15:33A, pusing itu. Kalau momen JS. Cuma mereka kan ada translation, ya.
1:15:39Jadi dari bahasa Azerbaijan sampai bahasa si Bapu yang gitu.
1:15:43A sampai Z, kalau nggak 3-shaking bisa-bisa ke-include semua.
1:15:48Bengkak, ya. Bengkak.
1:15:50Apa, kalau misalkan loading, jQuery.
1:15:53JQuery-nya padahal yang dipakai cuma untuk selektornya doang, gitu kan.
1:15:57Dan lain-lain. Jadi CDN bisa digunakan kalau masih sederhana.
1:16:05Satu atau dua, oke.
1:16:07Tapi kalau udah 3 sampai 5, apalagi 10, terus ada hubungannya dengan dependency.
1:16:13Jadi satu library tergantung ke library yang lain.
1:16:16Nah, itu susah tuh CDN-nya, ya kan?
1:16:21Nah, kalau CDN nggak ada logic, logicnya kita harus enroll.
1:16:24Mungkin kita harus tecek ada library tersebut.
1:16:28Satu lagi, dependency juga bisa bahaya, kan.
1:16:32Kalau misalnya ada dependency yang nggak keload, misalnya masalah network.
1:16:36Iya, betul.
1:16:38Kalau misalnya kita ada 10 request itu karena butuh dependency, 10 request dari CDN.
1:16:42Tapi ada satu yang nggak keload karena masalah network.
1:16:48Ya, jadi api rasinya broken.
1:16:50Iya, jadi kalau misalkan kita kayak npm install react gitu kan, dia udah install react-dom.
1:16:56Tapi kalau misalkan CDN-nya kita pakai react doang, react-dom-nya nggak ada, ya nggak jalan, kan.
1:17:00Jadi itulah yang apa, yang permasalahan yang ingin diselesaikan.
1:17:06Dan kebetulan sekali saya udah pernah bahas sebenarnya di video ya, di salah satu conference ya, conference online ya, WWID.
1:17:16Jadi saya bahas tentang itu yang tadi tentang model bundler.
1:17:22Apa sih model bundler itu dan kenapa diperlukan gitu.
1:17:26Karena ya kalau dulu ya, karena nggak ada export-import yang utama.
1:17:30Loh, iklan, niaga-hostar.
1:17:32Tolong, niaga-hostar, tolong sponsor kita ya.
1:17:36Kita udah nggak punya.
1:17:38Kita bisa skip ads.
1:17:40Ini saya bahas di sini.
1:17:42Kebanyakan yang saya bahas adalah yang era sebelum si Fit ini.
1:17:48Jadi belum ada export-import, belum ada IS modul.
1:17:50Jadi hanya karena dia nggak...
1:17:52Ini talkshare ini yang saya ingat, Pak Stiza.
1:17:56Oh iya, ini WWID, bukan JSConf.
1:17:58Eh, bukan JSID.
1:18:00JS Asia.
1:18:02Yes.
1:18:04Oke.
1:18:08Gimana, kita, kalau pertanyaan-pertanyaan lain ini, kita bisa bikin jadi satu topik sendiri ya.
1:18:14Kalau ini ada tema, terima kasih sarannya.
1:18:16Kita sangat apresiasi.
1:18:18Dan ini kita butuh banget.
1:18:20Karena kita butuh banyak topik nantinya.
1:18:22Terus teknologi ads juga kita akan bahas nanti ya, kapan-kapan.
1:18:26Belain waktu.
1:18:28Ads ini maksudnya?
1:18:30Microsoft Ads.
1:18:32Enggak lah.
1:18:34Ads function.
1:18:36Soalnya pertanyaannya ini muncul setelah kita bahas tentang ads function.
1:18:40Oke, oke, got it.
1:18:42Terus, ini PWA Flutter juga kita akan bahas nanti.
1:18:46Ini juga kebetulan ada dua ya.
1:18:48Kita juga akan mendatangkan ahlinya, mudah-mudahan ya.
1:18:52Doakan saja.
1:18:54Jadi, untuk malam ini, ada lagi yang mau ditambahkan?
1:18:56Dari Ivan atau Eka?
1:18:58Enggak dulu.
1:19:00Enggak, ya.
1:19:02Cukup ya, kita sudah satu jam 19 menit.
1:19:04Bahasanya menarik, bahasa hari ini.
1:19:06Seru, seru.
1:19:08Terima kasih banyak.
1:19:10Terima kasih banyak buat semua.
1:19:12Terima kasih banyak juga buat teman-teman yang sudah komentar dan sudah hadir.
1:19:16Kita ketemu lagi minggu depan.
1:19:18Minggu depan.
1:19:20Kalau ada yang mau follow-follow, bisa follow saya di twitter.com/rizafahmi22
1:19:26Kalau Ivan, kemana?
1:19:28ifancris.com
1:19:36Karena nama...
1:19:38Gue pernah punya twitter dulu, tapi kena ban.
1:19:40Kok bisa di ban?
1:19:46Politik ya?
1:19:48Enggak.
1:19:50Dulu pakai twitter untuk cari duit, jadi pakai bot gitu.
1:19:54Oh, pakai bot.
1:19:58Kalau Eka, ada di sini ya?
1:20:00Eka FYI.
1:20:02Oke.
1:20:04Kalau gitu, terima kasih banyak.
1:20:06Sampai ketemu lagi minggu depan.
1:20:08Kita pamit. Bye bye.
1:20:10Bye bye. Thank you semua.
1:20:12Selamat malam.
Suka episode ini?
Langganan untuk update episode terbaru setiap Selasa malam!
Episode Terkait
15 Okt 2024
Ngobrolin ViteConf - Ngobrolin WEB
Yuk mari kita diskusi dan ngobrol ngalor-ngidul tentang dunia web. Agar tetap up-to-date dengan teknologi web terkini. ...
12 Mei 2026
Bedah Web - Ngobrolin WEB
Berhubung banyak yang submit, malam ini kita akan kembali membedah beberapa situs. Penasaran gimana pendapat para pakar ...
5 Mei 2026
Zona Waktu - Ngobrolin WEB
Salah satu topik yang sebagian besar dari kita banyak tergocek nih. Pernah tergocek dengan urusan timezone, dan daylight...