Bundler JavaScript yang Dikembangkan Secara Stream of Consciousness (Transpiler & Compiler TypeScript Native Zig)
(github.com/ohah)Di era AI, bagaimana seharusnya kita belajar?
Saya tidak benar-benar punya gambaran tentang keahlian seperti apa yang dibutuhkan, atau kemampuan apa yang paling bernilai di zaman sekarang.
Sepertinya perusahaan yang merekrut developer maupun para developer sendiri sama-sama tidak punya tolok ukur yang jelas,
Bagaimanapun juga, saya merasa kalau hanya diam saja pasti rugi.
Jadi saya berpikir, mari membuat apa pun dulu.
Awalnya, untuk belajar, saya mulai dengan membuat Chrome Remote DevTools sederhana.
Saat mengerjakannya, saya berpikir sekalian saja membuat React Native juga didukung oleh remote debugger.
-> Saya tidak paham Metro, jadi sangat membingungkan.
-> Coba pelajari sambil clone coding Metro
-> Apakah tidak bisa membuat bundler yang lebih baik daripada Metro untuk React Native?
-> Saya mengutak-atik berbagai hal lewat Rolldown, swc, dan Bun sambil berusaha membuat bundler yang lebih baik daripada Metro bundler.
Yang paling terlihat berpotensi adalah Bun dan Rolldown, tetapi saya merasa ada batas dalam melakukan berbagai kustomisasi di sisi utama atau membuat fork.
Selain itu, tidak ada bundler web yang sepenuhnya kompatibel dengan Metro bundler: ada Flow, sintaks JavaScript yang diizinkan oleh engine Hermes, serta urutan pemanggilan penting yang, tidak seperti web pada umumnya, harus dijaga.
Ah... toh ini untuk belajar juga, sekalian saja buat bundler sendiri dan coba gantikan Metro di React Native.
Hal yang saya rasakan saat membuat bundler:
Kalau begitu tinggal dukung web juga, kan?
Masukkan juga dukungan ES5 yang sudah ditinggalkan Rolldown
Karena harus menjalankan RN, mari dukung parser Flow juga
Mari dukung wasm juga
Mari coba kalahkan kecepatan Bun dan Rolldown juga
Mari tambahkan HMR sendiri juga
Mari buat tree-shaking lebih agresif
Mari buat minify lebih unggul dibanding bundler lain
Saya mengembangkannya dengan pikiran: setidaknya dalam benchmark, saya ingin mengalahkan semua fitur yang saya ketahui dari bundler-bundler yang ada.
Tentu saja saya juga merasa mungkin masih kalah di banyak tempat.
Dibanding bundler lain, jelas masih banyak bagian yang belum matang, seperti stabilitas, fitur, komunitas ekosistem yang didukung, dan seperti yang disebutkan di atas, tree-shaking atau minify kadang unggul di sebagian modul tetapi tertinggal di modul lainnya.
Namun, dari hasil uji jalan sampai tingkat tertentu, ada juga beberapa bagian yang berhasil unggul. Masih banyak yang harus dikerjakan (SSL, MCP, CLI, stabilisasi, dokumentasi API, dll.), tetapi target awal saya, yaitu build dan menjalankan aplikasi React Native, sudah berhasil diverifikasi tanpa masalah pada 3 aplikasi produksi melalui release build, development build, dan development server. Karena itu, saya merasa tidak masalah untuk merilisnya sekarang lalu terus mengembangkannya, sehingga saya menulis postingan ini.
Meski begitu, pengembangan dan fungsi bundling sudah berjalan cukup baik (zntc juga dibuild dan didistribusikan menggunakan zntc sendiri),
fitur penting seperti decorator, serta fitur yang nyaris wajib di React Native seperti worklet, TypeScript, Flow, dan lain-lain juga berjalan baik tanpa masalah pada library yang saya uji,
selain itu tersedia juga plugin untuk vite dan rspack, lingkungan pengembangan seperti vite dan rspack juga disediakan (RN, Web), ada dokumentasi, ada React HMR, juga mendukung module federation, dan lain-lain.
Jadi saya rasa setidaknya fungsi dasar sebagai bundler dan transpiler sudah dimiliki, dan sambil menerima masukan saya ingin terus mengembangkannya setelah dipublikasikan.
Kode yang ditulis dengan tangan: 0, semuanya dikembangkan lewat diskusi intens dengan AI.
Rasanya saya lebih “memeras” AI untuk proyek ini daripada produk apa pun yang pernah saya buat.
Awalnya saya hanya memakai Claude, lalu belakangan juga menggunakan Codex.
Waktu pengembangan bundler itu sendiri sekitar 3 bulan (sekitar 3000 PR); jika termasuk alur stream of consciousness yang saya ceritakan di atas, totalnya sekitar 6 bulan saya mengerjakannya siang malam tanpa henti.
Saya mengerjakannya terus-menerus tanpa jeda, baik hari kerja maupun hari libur, dan mungkin karena rasa minder? atau kesadaran saat membandingkannya dengan bundler lain,
saya juga menulis sangat banyak test case sampai bisa dibilang kebablasan, demi melewati berbagai test case seperti test262 100%, lalu mengembangkannya.
Saya sangat menantikan banyak masukan (__)
5 komentar
Sebagai pengganti Metro, ada juga Re.Pack yang menggunakan RSPack atau WebPack.
Saya menulisnya agak tanpa urutan jadi ada yang terlewat.
Seperti yang Anda sampaikan, saya juga banyak merujuk ke Re.pack.
Setahu saya, Re.pack dan Rspack sama-sama berbasis swc sehingga tidak mendukung flow secara native,
dan untuk Re.pack, mulai versi 5 seingat saya basisnya adalah Rspack; sama seperti itu, Re.pack juga memakai swc+babel, jadi plugin populer seperti flow, reanimated, dan nativewind (zntc berencana mendukungnya) sepengetahuan saya masih ditranspilasi dengan Babel.
Secara pribadi saya ingin lepas dari Babel, jadi untuk zntc saya membuatnya dengan opsi yang didukung secara bawaan.
zntc juga mendukung kompatibilitas Babel, tetapi saya ingin sebisa mungkin membuat dependensi Babel menjadi nol.
Kodenya sangat stabil dan sudah teruji, tetapi karena keterbatasan JS, dari sisi kecepatan selalu menjadi bottleneck.
Sebenarnya selama pengembangan saya terus membandingkan benchmark dengan bundler lain, dan seperti yang terus saya rasakan sendiri, tentu dibanding bundler lain masih kalah dalam hal fitur, stabilitas, dan ekstensibilitas, jadi bagian ini akan terus saya coba perbaiki.
Namun, karena kompatibilitas parser untuk library React Native utama sudah dibangun langsung di dalamnya, saya merasa pada area bottleneck struktural yang mau tidak mau muncul di Re.pack, zntc lebih unggul!
Kelihatannya ini proyek yang tidak mudah, semoga sukses.
Terima kasih!!
Hmm... test262 100% ya... cuma lihat badge-nya, saya sempat kira ini sekelas V8 hehe