Wails: Taruhan Golang pada Aplikasi Kelas Desktop untuk Mengalahkan Electron

Bahasa Indonesiaالعربية Deutsch English Español Français हिन्दी 한국어 Português Русский 中文

컴퓨터/소프트웨어AI/미래기술

Transcript

00:00:00Wails adalah teknologi lintas platform yang memungkinkan Anda membangun aplikasi tingkat desktop menggunakan Go.

00:00:04Ini sangat banyak diminta di channel ini setelah saya membuat beberapa video

00:00:08perbandingan aplikasi desktop. Jadi hari ini saya akan mengajak Anda menggunakan Wails untuk membangun aplikasi kelas desktop

00:00:13dan membandingkannya dengan framework seperti Electron dan Tauri. Kita akan melihat proses pembuatan

00:00:17perekam video desktop yang pernah kita buat di video lain, lalu membandingkan hal-hal seperti ukuran file,

00:00:22performa, dan pengalaman developer. Wails sebenarnya benar-benar baru bagi saya, jadi kita akan

00:00:27belajar bersama di video ini. Cara kerja Wails sangat mirip dengan Tauri, tetapi

00:00:36backend-nya menggunakan Go, bukan Rust. Anda tetap membangun front-end di dalam webview menggunakan teknologi web,

00:00:41lalu memanggil API native yang dikelola oleh Golang. Ini berarti Anda dapat mengompilasi aplikasi yang

00:00:47kompatibel dengan Mac dan Windows. Namun tidak seperti Electron, Wails tidak menyematkan browser.

00:00:52Sebaliknya, ia menggunakan kembali mesin rendering native dari tiap platform, persis seperti Tauri. Jadi ukuran bundelnya

00:00:58secara teknis harusnya jauh lebih kecil, tapi kita akan melihatnya nanti saat membuat perbandingan.

00:01:03Jika Anda menyukai konten seperti ini, silakan subscribe untuk menonton video lainnya. Ini adalah alat perekam layar

00:01:07yang saya kembangkan dengan Wails, dan saya juga pernah membuat hal serupa di Electron dan Tauri.

00:01:12Kita pilih layar yang ingin direkam. Tekan rekam. Anda bisa menggerakkan kursor. Aplikasi desktop-nya

00:01:16sendiri tidak akan muncul di dalam rekaman. Saya tekan stop. Lalu Anda bisa melihat layar yang baru saja

00:01:21saya rekam. Saya bisa memotongnya jika mau, lalu tinggal klik ekspor ke MP4 untuk menyimpan videonya

00:01:27langsung ke komputer saya. Jika kita melihat ke dalam struktur build aplikasi ini, Anda akan melihat pengaturan yang sangat mirip

00:01:32seperti yang Anda harapkan di Electron. Semua file front-end berada di dalam folder front-end,

00:01:36dan kita memiliki file entri. Dalam hal ini, itu adalah file Go bernama main.go, dan di dalamnya

00:01:41kita memiliki fungsi main. Sekali lagi, hal serupa juga akan Anda temukan di Electron, dan kita bisa

00:01:47mengatur hal-hal seperti mendeklarasikan judul, lebar dan tinggi, warna latar belakang, serta mengatur

00:01:52opsi khusus untuk Mac. Jadi jika Anda menginginkan perbedaan antara Mac dan Windows, itu sangat

00:01:57mungkin dilakukan. Sekarang jika kita lihat bagian front-end di folder source, Anda akan melihat seluruh

00:02:02kode React. Jadi jika kita lihat di dalam app.tsx, ini adalah kode React standar, hanya saja kita memanggil

00:02:09API yang didefinisikan di sisi Go. Jika kita lihat impor API ini dan penggunaannya di sepanjang

00:02:16file, Anda bisa melihat kita memanggil API.onrecording finished, onrecording failed, start recording, dan API itu

00:02:22dihasilkan secara otomatis oleh Wails. Jadi jika kita lihat di dalam API itu sendiri, Anda bisa melihat semua fungsi

00:02:27utamanya berasal dari file ini: wails.js/go/main/app. Sekarang jika kita lihat

00:02:33ke dalamnya, Anda bisa melihat bahwa file ini dibuat secara otomatis dan terdapat teks bahasa Wales di bagian atas serta bahasa Inggris,

00:02:39dan itu karena percaya atau tidak, pembuat Wails adalah orang Wales. Kita memiliki semua fungsi ini

00:02:43di sini seperti export video, list sources, request screen access, semua yang Anda butuhkan untuk

00:02:49perekam layar. Kemudian jika kita beralih ke sisi Go di app.go lalu kita jadikan komentar pada

00:02:54list sources dan menyimpan file tersebut, Anda akan melihat tiba-tiba muncul error di API.ts karena sekarang

00:02:59list sources tidak ada, dan ini terjadi karena kita menjalankan wails dev. Jadi setiap kali ada perubahan

00:03:05di dalam file Go, ia secara otomatis me-render ulang definisi TypeScript. Jadi jika kita kembali sekarang dan

00:03:11mengaktifkan kembali kode tersebut, error-nya akan hilang lalu aplikasi desktop-nya memuat ulang

00:03:16karena semua perubahan dari sisi Go—yaitu dari backend—secara otomatis mengompilasi ulang dan me-render ulang

00:03:23aplikasinya. Sekarang mari lakukan beberapa perbandingan untuk melihat perbedaan di antara ketiga framework ini.

00:03:27Pertama, kita lihat ukuran bundelnya. Wails berukuran 52 megabita, Tauri 57 megabita, dan Electron

00:03:34tidak mengejutkan berada di angka 324 megabita. Wails dan Tauri jauh lebih kecil di sini, dan itu karena keduanya

00:03:41tidak menyertakan Chromium di dalam bundelnya, jadi hal itu memang sudah diperkirakan. Namun perlu saya katakan, dengan memakai webview native

00:03:47dari masing-masing platform seperti yang dilakukan Wails dan Tauri, Anda mungkin akan melihat beberapa perbedaan antarplatform.

00:03:51Hal itu sebenarnya bukan masalah besar saat ini, tetapi tetap perlu diingat. Jadi pada dasarnya, Tauri dan

00:03:57Wails akan menghasilkan artifak yang serupa dalam hal ukuran bundel karena kedua framework tersebut

00:04:02dirancang dengan cara yang hampir sama, meskipun menggunakan teknologi yang sangat berbeda di balik layarnya.

00:04:07Sekarang mari kita lihat waktu startup, dan seperti pada video sebelumnya tentang aplikasi desktop,

00:04:12kita akan membuka masing-masing aplikasi ini sebanyak 10 kali lalu mengambil nilai rata-ratanya. Wails mencatatkan angka 395

00:04:18milidetik, Tauri 410 milidetik, dan Electron 350 milidetik. Sekarang untuk cold start di mana kita

00:04:26mengahapus cache setiap kali pengujian, Wails mendapatkan 2.337 ms, Tauri 2.049 ms, dan Electron justru sedikit lebih cepat

00:04:34di angka 1.890 ms. Mengenai performa, sama seperti Tauri, performa runtime saat merekam

00:04:40layar jauh lebih baik daripada Electron. Hal itu dikarenakan penyiapan kita yang memakai

00:04:45CaptureKit native dari Mac, sehingga tidak ada data yang melintasi bridge. Sedangkan pada Electron, kita merekam dari

00:04:51webview itu sendiri lalu meneruskan datanya ke backend, yang tentunya menimbulkan sedikit overhead.

00:04:56Secara teknis, Anda bisa menggunakan CaptureKit native jika Anda menulis kode C khusus di Electron,

00:05:02tetapi cara default untuk melakukan hal ini di Electron adalah metode tadi, jadi itulah yang kita bandingkan

00:05:06hari ini. Sekarang mari kita lihat pengalaman developer (DX), dan di sinilah kita akan melihat

00:05:11perbedaan terbesar. Saya sangat menikmati proses pengembangan menggunakan Wails, namun harus saya akui bagian

00:05:15perekaman layarnya tidak semudah saat menggunakan Tauri. Saya harus menulis kode Objective-C untuk mengakses CaptureKit,

00:05:21sedangkan di Tauri, Anda bisa sepenuhnya menggunakan Rust. Ini karena Rust memiliki ekosistem yang besar

00:05:28berupa crate komunitas yang membungkus framework native Apple. Jadi di Tauri, saya tinggal memakai crate bernama screen

00:05:33capture kit dan seluruh API perekamannya menjadi kode Rust biasa. Go tidak memiliki pustaka yang bagus untuk ScreenCaptureKit sejauh yang

00:05:39saya temukan, tetapi Go memiliki fitur bernama Cgo, yaitu fitur bawaan Go untuk mengompilasi kode C.

00:05:44Artinya dengan Go, Anda tinggal menulis C native di file .m, mengeksposnya sebagai fungsi C biasa, lalu

00:05:50memberi tahu Go framework Apple mana yang perlu di-link. Ini membuat Anda akhirnya menulis kode Objective-C sungguhan

00:05:56dan memanggil API Apple yang sama seperti crate Rust, tetapi kali ini Anda memegang kendali penuh atas kode tersebut. Hasil akhirnya

00:06:02membutuhkan sekitar 450 baris kode Objective-C, yang tidak perlu ada di aplikasi Rust. Secara keseluruhan, saya

00:06:08sedikit lebih menyukai Tauri. Ekosistem di sekitar crate Rust terasa lebih matang berdasarkan apa yang saya temukan,

00:06:14tetapi ini benar-benar kembali ke preferensi Anda. Jika Anda suka melakukan pengembangan dengan Go, Wails adalah pilihan yang sangat

00:06:18bagus, dan jika Anda menyukai Rust, pilih saja Tauri. Namun jika Anda memilih Wails, Anda mungkin harus

00:06:24menulis beberapa kode native karena ekosistemnya belum terlalu mapan. Semoga Anda menikmati video kali ini,

00:06:29dan Anda bisa subscribe untuk konten lainnya seperti ini. Jika Anda ingin melihat lebih banyak video perbandingan

00:06:33framework desktop seperti saat kita membandingkan Deno desktop dengan Electrobun, saya menyertakan link videonya tepat

00:06:39di sini yang bisa Anda tonton. Terima kasih banyak sudah menonton. Saya Warren dari Betterstack,

00:06:43sampai jumpa di video berikutnya. Sayangnya, Milo bilang tidak ada video lagi untuk minggu ini, jadi

00:06:49sampai jumpa hari Senin.

00:06:50*musik dimainkan*

Key Takeaway

Wails memangkas ukuran bundel aplikasi desktop hingga 52 MB dengan memanfaatkan mesin rendering native OS dan Go, meskipun pengembang harus menulis sekitar 450 baris kode Objective-C native untuk fitur tingkat lanjut seperti ScreenCaptureKit.

Highlights

Ukuran bundel aplikasi Wails sebesar 52 MB dan Tauri 57 MB, jauh lebih kecil dibandingkan Electron yang mencapai 324 MB karena tidak menyertakan Chromium.
Rata-rata waktu startup Wails berada di angka 395 md, Tauri 410 md, dan Electron 350 md.
Dalam pengujian cold start dengan pembersihan cache, Electron mencatatkan waktu tercepat 1.890 md, diikuti Tauri 2.049 md dan Wails 2.337 md.
Fitur Cgo di Go memungkinkan integrasi kode Objective-C native sekitar 450 baris untuk memanggil API ScreenCaptureKit Apple secara langsung.
Perubahan kode pada file backend Go mengompilasi ulang dan me-render ulang definisi TypeScript di front-end secara otomatis saat menjalankan perintah wails dev.

Timeline

Arsitektur dan Cara Kerja Wails

Wails menggunakan Go untuk logika backend dan webview native platform untuk tampilan front-end.
Aplikasi Wails tidak menyematkan mesin browser Chromium ke dalam bundel akhir.
Pengoperasian API native dikelola langsung melalui Golang untuk menghasilkan aplikasi lintas platform Windows dan Mac.

Pengembangan aplikasi desktop dengan Wails menggabungkan fleksibilitas antarmuka web dan efisiensi backend Go. Penggunaan kembali mesin rendering native milik sistem operasi meniru pola kerja Tauri, sehingga membedakannya secara langsung dari Electron yang membawa serta browser Chromium.

Struktur Proyek dan Integrasi Otomatis TypeScript

Kode front-end React tersimpan terpisah di folder khusus, sementara logika aplikasi utama berjalan dari file main.go.
Perubahan fungsi di sisi Go secara otomatis memperbarui pustaka binding TypeScript di front-end.
Perintah wails dev memicu kompilasi ulang otomatis backend sekaligus menyegarkan antarmuka aplikasi.

Struktur berkas Wails memisahkan komponen antarmuka React di folder front-end dan konfigurasi aplikasi pada file main.go. Sinkronisasi antara backend dan front-end terjadi secara otomatis melalui pemutakhiran berkas binding TypeScript saat proses wails dev berjalan.

Perbandingan Ukuran Bundel, Startup, dan Performa

Ukuran bundel Wails mencapai 52 MB, Tauri 57 MB, dan Electron 324 MB.
Electron memimpin waktu cold start pada 1.890 md, lebih cepat dibandingkan Tauri sebesar 2.049 md dan Wails sebesar 2.337 md.
Perekaman layar pada Wails dan Tauri menunjukkan performa runtime lebih tinggi dibanding Electron karena memanfaatkan CaptureKit native Mac.

Penghilangan komponen Chromium memberikan keunggulan signifikan pada ukuran bundel Wails dan Tauri. Namun, Electron mencatatkan waktu cold start yang lebih cepat. Penggunaan CaptureKit native Apple secara langsung menghindari overhead pengiriman data melintasi bridge yang biasa terjadi pada antarmuka webview Electron.

Pengalaman Developer dan Integrasi Cgo Native

Tauri menyediakan crate Rust siap pakai seperti screen capture kit untuk integrasi API Apple.
Wails membutuhkan penulisan sekitar 450 baris kode Objective-C native menggunakan fitur Cgo untuk menjangkau API ScreenCaptureKit.
Pemilihan antara Wails dan Tauri bergantung pada preferensi bahasa pemrograman antara Go dan Rust serta kesiapan ekosistem pustaka pendukung.

Pengalaman pengembang pada Wails dipengaruhi oleh ketersediaan pustaka ekosistem yang belum selengkap Rust pada Tauri. Penggunaan Cgo menuntut penulisan kode C atau Objective-C secara langsung di file .m guna menjangkau fungsi sistem native, yang memberikan kontrol penuh atas kode sumber dengan konsekuensi tambahan volume kode.

Community Posts

Write about this video