Cara Kerja Wails

Wails adalah framework untuk membangun aplikasi desktop menggunakan Go untuk backend dan teknologi web untuk frontend. Namun berbeda dengan Electron, Wails tidak membundel browser—ia menggunakan WebView native sistem operasi.

Perbedaan utama dari Electron:

Aspek	Wails	Electron
Browser	WebView dari OS	Chromium terbundel (~100MB)
Backend	Go (dikompilasi)	Node.js (diinterpretasi)
Komunikasi	Bridge in-memory	IPC (antar-proses)
Ukuran Bundle	~15MB	~150MB
Memori	~10MB	~100MB+
Startup	<0.5s	2-3s

Komponen Inti

1. Native WebView

Wails menggunakan mesin rendering web bawaan sistem operasi:

WebView2 (Microsoft Edge WebView2)

Berbasis Chromium (sama dengan browser Edge)
Pra-instal di Windows 10/11
Pembaruan otomatis via Windows Update
Dukungan standar web modern penuh

Mengapa ini penting:

Tanpa browser terbundel → Ukuran aplikasi lebih kecil
Native OS → Integrasi dan performa lebih baik
Pembaruan otomatis → Patch keamanan dari pembaruan OS
Rendering familiar → Sama dengan browser sistem

2. Wails Bridge

Bridge adalah jantung Wails—ia memungkinkan komunikasi langsung antara Go dan JavaScript.

Cara kerjanya:

Frontend memanggil metode Go (via binding yang dihasilkan otomatis)
Bridge meng-encode panggilan ke JSON (nama metode + argumen)
Router menemukan metode Go di service yang terdaftar
Metode Go dieksekusi dan mengembalikan nilai
Bridge mendekode hasil dan mengirim kembali ke frontend
Promise resolve di JavaScript dengan hasil

Karakteristik performa:

In-memory: Tanpa overhead jaringan, tanpa HTTP
Zero-copy jika memungkinkan (untuk data besar)
Async secara default: Non-blocking di kedua sisi
Type-safe: Definisi TypeScript dihasilkan otomatis

3. Sistem Service

Service adalah cara yang direkomendasikan untuk mengekspos fungsionalitas Go ke frontend.

// Define a service (just a regular Go struct)
type GreetService struct {
    prefix string
}

// Methods with exported names are automatically available
func (g *GreetService) Greet(name string) string {
    return g.prefix + name + "!"
}

func (g *GreetService) GetTime() time.Time {
    return time.Now()
}

// Register the service
app := application.New(application.Options{
    Services: []application.Service{
        application.NewService(&GreetService{prefix: "Hello, "}),
    },
})

Service discovery:

Wails memindai struct Anda saat startup
Metode yang diekspor menjadi dapat dipanggil dari frontend
Informasi tipe diekstrak untuk binding TypeScript
Penanganan error otomatis (error Go → exception JS)

Binding TypeScript yang dihasilkan:

// Auto-generated in frontend/bindings/GreetService.ts
export function Greet(name: string): Promise<string>
export function GetTime(): Promise<Date>

Mengapa service?

Type-safe: Dukungan TypeScript penuh
Auto-discovery: Tanpa registrasi manual metode
Terorganisir: Kelompokkan fungsionalitas terkait
Dapat diuji: Service hanyalah struct Go

Pelajari selengkapnya tentang service →

4. Sistem Event

Event memungkinkan komunikasi pub/sub antar komponen.

Kasus penggunaan:

Komunikasi window: Satu window memberi tahu yang lain
Tugas background: Service Go memberi tahu UI tentang progres
Sinkronisasi state: Menjaga beberapa window tetap sinkron
Loose coupling: Komponen tidak memerlukan referensi langsung

Contoh:

// Go: Emit an event
app.Event.Emit("user-logged-in", user)

// JavaScript: Listen for event
import { Events } from '@wailsio/runtime'

Events.On('user-logged-in', (user) => {
    console.log('User logged in:', user)
})

Pelajari selengkapnya tentang event →

Siklus Hidup Aplikasi

Memahami siklus hidup membantu Anda mengetahui kapan menginisialisasi resource dan membersihkannya.

Lifecycle hooks:

app := application.New(application.Options{
    Name: "My App",

    // Cleanly intercept quit requests (e.g. unsaved changes).
    ShouldQuit: func() bool { return true },

    // Called when the app is confirmed to be quitting — save state, close connections, etc.
    OnShutdown: func() {},
})

Tidak ada field OnStartup pada application.Options. Pekerjaan startup termasuk dalam ServiceStartup(ctx, options) service, callback yang didaftarkan via app.Event.OnApplicationEvent(events.Common.ApplicationStarted, ...), atau cukup sebelum app.Run().

Pelajari selengkapnya tentang siklus hidup →

Proses Build

Memahami bagaimana Wails mem-build aplikasi Anda:

Langkah build:

Analisis kode Go
- Pindai service untuk metode yang diekspor
- Ekstrak tipe parameter dan return
- Hasilkan signature metode
Hasilkan binding TypeScript
- Buat file .ts untuk setiap service
- Sertakan definisi tipe lengkap
- Tambahkan komentar JSDoc
Build frontend
- Jalankan bundler Anda (Vite, webpack, dll.)
- Minify dan optimasi
- Output ke frontend/dist/
Kompilasi Go
- Kompilasi dengan optimasi (-ldflags="-s -w")
- Sertakan metadata build
- Kompilasi spesifik platform
Embed aset
- Embed file frontend ke binary Go
- Kompres aset
- Buat executable tunggal

Hasil: Executable native tunggal dengan semuanya ter-embed.

Pelajari selengkapnya tentang build →

Development vs Production

Wails berperilaku berbeda dalam development dan production:

Development (wails3 dev)
Production (wails3 build)

Karakteristik:

Hot reload: Perubahan frontend reload instan
Source maps: Debug dengan source asli
DevTools: Browser DevTools tersedia
Logging: Logging verbose diaktifkan
Frontend eksternal: Disajikan dari dev server (Vite)

Cara kerjanya:

Manfaat:

Umpan balik instan atas perubahan
Kemampuan debugging penuh
Iterasi lebih cepat

Model Memori

Memahami penggunaan memori membantu Anda membangun aplikasi yang efisien.

Region memori:

Go Heap
- Service dan state aplikasi Anda
- Dikelola oleh garbage collector Go
- Biasanya 5-10MB untuk aplikasi sederhana
Memori WebView
- DOM, JavaScript heap, CSS
- Dikelola oleh mesin WebView
- Biasanya 10-20MB untuk aplikasi sederhana
Memori Bridge
- Buffer pesan untuk komunikasi
- Overhead minimal (<1MB)
- Zero-copy untuk data besar jika memungkinkan

Tips optimasi:

Hindari transfer data besar: Kirim ID, ambil detail on demand
Gunakan event untuk pembaruan: Jangan polling dari frontend
Stream file besar: Jangan muat seluruhnya ke memori
Bersihkan listener: Hapus event listener saat selesai

Pelajari selengkapnya tentang performa →

Model Keamanan

Wails menyediakan arsitektur secure-by-default:

Fitur keamanan:

Whitelisting metode
- Hanya metode yang diekspor yang dapat dipanggil
- Metode private tidak dapat diakses
- Registrasi service eksplisit diperlukan
Validasi tipe
- Argumen dicek terhadap tipe Go
- Tipe tidak valid ditolak
- Mencegah serangan injeksi
Tanpa eval()
- Frontend tidak dapat mengeksekusi kode Go sembarangan
- Hanya metode yang telah ditentukan yang dapat dipanggil
- Tanpa eksekusi kode dinamis
Isolasi context
- Setiap window memiliki context sendiri
- Service dapat memeriksa context pemanggil
- Izin per window dimungkinkan

Praktik terbaik:

Validasi input pengguna di Go (jangan percaya frontend)
Gunakan context untuk autentikasi/otorisasi
Sanitasi path file sebelum operasi file
Rate limit operasi yang mahal

Pelajari selengkapnya tentang keamanan →

Langkah Selanjutnya

Siklus Hidup Aplikasi - Pahami startup, shutdown, dan lifecycle hooks
Pelajari Selengkapnya →

Jembatan Go-Frontend - Pelajari mendalam cara kerja bridge
Pelajari Selengkapnya →

Sistem Build - Pahami bagaimana Wails mem-build aplikasi Anda
Pelajari Selengkapnya →

Mulai Membangun - Terapkan apa yang Anda pelajari dalam tutorial Tutorial →

Pertanyaan tentang arsitektur? Tanyakan di Discord atau lihat referensi API.