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