00:00:00Ini adalah ElectroBun, sebuah framework aplikasi desktop lintas platform yang menghasilkan
00:00:05ukuran bundle yang jauh lebih kecil daripada Electron, tidak mengharuskan Anda menulis Rust seperti Tauri, dan memberikan
00:00:11performa native melalui kekuatan Bun dan wrapper C++ miliknya sendiri. Jadi, tanpa Node.js atau V8.
00:00:18Namun, apakah fakta bahwa ia menggunakan WebView native sistem alih-alih menggunakan Chromium untuk
00:00:22semua sistem operasi membuatnya sulit untuk membangun aplikasi yang benar-benar lintas platform?
00:00:27Tekan tombol subscribe dan mari kita bahas.
00:00:32Sejak Bun mengumumkan executable full-stack tahun lalu,
00:00:36hal itu membuat saya sangat bersemangat menantikan alternatif Electron yang layak.
00:00:40Namun setelah akuisisi oleh Anthropic, yang akan saya bahas nanti di video ini,
00:00:44kecil kemungkinan tim Bun akan mengambil arah pengembangan tersebut.
00:00:49Jadi Yoav dari Blackboard menciptakan ElectroBun, yang merupakan hal terdekat yang bisa kita dapatkan dari Bun Electron,
00:00:55dan dia sudah membangun beberapa hal keren dengannya seperti browser hybrid, terminal, dan alat editor kode
00:01:01bernama Colab, aplikasi text-to-speech yang didukung oleh Quen, dan dia bahkan menjalankan Doom di
00:01:07aplikasi ElectroBun dengan kekuatan WebGPU. Mari kita lihat cara menggunakannya dalam proyek sederhana.
00:01:12Nah, saat pertama kali menginisialisasi ElectroBun, Anda mendapatkan akses ke berbagai template yang bisa
00:01:17digunakan untuk melihat cara kerja aplikasi, seperti aplikasi pencatat yang sangat dasar ini, aplikasi multi-jendela,
00:01:22dan bahkan aplikasi tray yang membuka dokumentasi di dalam browser web Anda.
00:01:26Dan karena ElectroBun mendukung teknologi web, Anda bisa menggunakan framework JS apa pun yang Anda inginkan,
00:01:31mulai dari Svelte, Vue, Solid.js, hingga Angular.
00:01:35Tapi saya akan membahas proyek dasar dari awal untuk membantu Anda memahaminya sepenuhnya.
00:01:40Di sini saya memiliki aplikasi Bun React dasar, yang akan kita ubah menjadi aplikasi Mac native
00:01:45melalui kekuatan ElectroBun. Dan untuk melakukan itu, saya sudah menginstal ElectroBun,
00:01:49dan saya sudah memiliki skrip untuk memulai build pengembangan ElectroBun,
00:01:53serta skrip untuk membangun aplikasi ElectroBun tersebut.
00:01:55Sebenarnya, kita tidak membutuhkan tipe modul di sini karena kita tidak akan menggunakannya.
00:01:59Di dalam root proyek, saya telah membuat file konfigurasi ElectroBun,
00:02:03yang saat ini berisi nama aplikasi saya, pengidentifikasi, serta entry point build Bun.
00:02:09Sekarang, saya belum membuat entry point ini, jadi mari kita lakukan sekarang.
00:02:12Di dalam direktori source, saya telah membuat folder Bun, dan saya akan membuat file index.ts,
00:02:17yang menginstansiasi class browser window dan mengambil judul sebagai argumen,
00:02:22yaitu teks yang akan kita tampilkan di bilah judul kita, dan sebuah URL,
00:02:25yaitu tempat aplikasi akan bernavigasi saat pertama kali dimuat.
00:02:28Jadi jika kita menjalankan Bun start, kita seharusnya melihat aplikasi kita dimuat dengan judul yang benar,
00:02:32tapi tidak ada yang muncul di sini. Ini karena setelah Bun membangun aplikasinya,
00:02:36yaitu mengubah TypeScript ke JavaScript, melakukan tree shaking dan lainnya,
00:02:41ia menempatkan file di direktori yang berbeda, yang perlu kita referensikan di entry point kita.
00:02:46Dan kita belum melakukannya dengan baik di bagian sini.
00:02:48Jadi untuk memperbaikinya, kita perlu membuka file konfigurasi ElectroBun dan menambahkan objek views
00:02:53baru, yang akan berisi tampilan baru yang Anda inginkan untuk diakses oleh ElectroBun.
00:02:57Lalu kita beri nama view kita “main” dan kita beri entry point index.html,
00:03:02yang berisi JS front-end yang mereferensikan aplikasinya,
00:03:06yang menampung semua JavaScript dan CSS yang diperlukan agar ini berjalan dengan baik.
00:03:09Anda bisa menemukan informasi lebih lanjut tentang konfigurasi build di dokumentasi ElectroBun.
00:03:13Sekarang setelah kita memiliki view utama di dalam direktori source Bun kita,
00:03:17kita bisa membuka file index.ts dan memperbarui URL-nya untuk menggunakan direktori views dan main.
00:03:23Yang berarti sekarang saat kita membangun aplikasinya, kita seharusnya melihat semuanya bekerja sesuai harapan.
00:03:28Kita bahkan bisa memberikan kesan lebih seperti aplikasi dengan menambahkan properti ini, yang akan menghapus bilah judul.
00:03:34Dan kita juga bisa menggunakan objek menu aplikasi untuk memberikan menu kustom pada aplikasi kita.
00:03:39Dan saat sudah siap, kita bisa membangun aplikasi untuk produksi, yang menghasilkan file DMG
00:03:44berukuran 17 megabyte dan menciptakan aplikasi 65 megabyte. Dan jika kita bandingkan dengan aplikasi Electron hello world,
00:03:50Anda bisa melihat ukurannya 271 megabyte, lebih dari empat kali lipat ukuran aplikasi ElectroBun.
00:03:56Karena aplikasi ElectroBun dibangun ke web view native OS, yang berarti WebKit untuk Mac,
00:04:01Edge WebView 2 untuk Windows, dan WebKit GTK untuk Linux, Anda harus memikirkan fitur-fitur tertentu
00:04:08yang tidak didukung oleh web view saat mengembangkan aplikasi lintas platform.
00:04:11Meskipun ElectroBun mendukung Chromium Embedded Framework, yang memungkinkan konsistensi
00:04:16lintas platform, hal ini akan menambahkan browser Chromium lengkap ke aplikasi Anda, yang berarti ada
00:04:22implikasi ukuran dan performa, menjadikannya hampir sama dengan Electron, selain fakta bahwa ia menggunakan Bun.
00:04:27Ada juga beberapa fitur keren ElectroBun lainnya yang belum saya bicarakan,
00:04:32seperti arsitektur iframe di luar proses untuk menjalankan setiap WebView yang tertanam dalam proses terisolasi mereka sendiri,
00:04:38RPC ber-tipe untuk komunikasi antar-proses yang mulus, kompresi ZSTD, dan wrapper
00:04:44self-extracting untuk unduhan awal yang lebih kecil, penandatanganan kode, dan masih banyak lagi.
00:04:48Namun sayangnya, saya menemukan beberapa masalah saat membangun aplikasi demo yang saya bahas tadi,
00:04:54seperti dokumentasi yang kurang, terutama mengenai hal-hal di sekitar file entry ElectroBun.
00:04:58Halamannya terkadang berkedip saat reload halaman penuh dan menggunakan alat inspektor agak mengacaukan
00:05:03tata letak saya. Saya tahu ElectroBun masih sangat baru. Commit pertamanya baru ada sejak Februari dan saya
00:05:09yakin mungkin ada beberapa lagi sebelum itu. Dan ini hanya untuk mengatakan, saya tahu fitur-fitur ini akan
00:05:13diperbaiki di masa depan. Bahkan, saya berharap fitur-fitur ini diperbaiki karena tim Bun sejak
00:05:19diakuisisi oleh Anthropic lebih fokus pada peningkatan CLI dan executable daripada
00:05:25mengambil arah membangun alternatif Electron. Jadi sepertinya ElectroBun adalah peluang terbaik kita
00:05:31memiliki alat desktop lintas platform yang didukung oleh Bun. Dan jika Anda tidak tahu apa-apa tentang
00:05:37akuisisi Bun/Anthropic atau hanya ingin tahu lebih banyak tentang arah baru yang diambil tim Bun
00:05:42sejak akuisisi tersebut, silakan tonton video dari James ini, yang membahas semuanya
00:05:48secara mendalam.