Como o Wails funciona
O Wails é um framework para construir aplicativos de desktop usando Go para o backend e tecnologias web para o frontend. Mas, ao contrário do Electron, o Wails não empacota um navegador; ele usa o WebView nativo do sistema operacional.
Diferenças principais em relação ao Electron:
| Aspecto | Wails | Electron |
|---|---|---|
| Navegador | WebView fornecido pelo SO | Chromium empacotado (~100MB) |
| Backend | Go (compilado) | Node.js (interpretado) |
| Comunicação | Bridge em memória | IPC (inter-processo) |
| Tamanho do pacote | ~15MB | ~150MB |
| Memória | ~10MB | ~100MB+ |
| Inicialização | <0,5s | 2-3s |
Componentes Principais
Seção intitulada “Componentes Principais”1. WebView Nativo
Seção intitulada “1. WebView Nativo”O Wails usa o mecanismo de renderização web integrado ao sistema operacional:
WebView2 (Microsoft Edge WebView2)
- Baseado no Chromium (mesmo do navegador Edge)
- Pré-instalado no Windows 10/11
- Atualizações automáticas via Windows Update
- Suporte completo aos padrões web modernos
WebKit (mecanismo de renderização do Safari)
- Integrado ao macOS
- Mesmo motor do navegador Safari
- Excelente desempenho e eficiência energética
- Suporte completo aos padrões web modernos
WebKitGTK (porta GTK do WebKit)
- Instalado via gerenciador de pacotes
- Mesmo motor do GNOME Web (Epiphany)
- Bom suporte aos padrões
- Leve e performático
Por que isso importa:
- Sem navegador empacotado → Tamanho do aplicativo menor
- Nativo do SO → Melhor integração e desempenho
- Atualizações automáticas → Correções de segurança via atualizações do SO
- Renderização familiar → Igual ao navegador do sistema
2. O Bridge do Wails
Seção intitulada “2. O Bridge do Wails”O bridge é o coração do Wails; ele permite comunicação direta entre Go e JavaScript.
Como funciona:
- Frontend chama um método Go (via binding auto-gerado)
- Bridge codifica a chamada para JSON (nome do método + argumentos)
- Router encontra o método Go nos serviços registrados
- Método Go executa e retorna um valor
- Bridge decodifica o resultado e envia de volta ao frontend
- Promise é resolvida no JavaScript com o resultado
Características de desempenho:
- Em memória: Sem sobrecarga de rede, sem HTTP
- Zero-copy quando possível (para grandes volumes de dados)
- Assíncrono por padrão: Não bloqueante em ambos os lados
- Tipado com segurança: Definições de TypeScript geradas automaticamente
3. Sistema de Serviços
Seção intitulada “3. Sistema de Serviços”Os serviços são a maneira recomendada de expor funcionalidade do Go para o frontend.
// Define a service (just a regular Go struct)type GreetService struct { prefix string}
// Methods with exported names are automatically availablefunc (g *GreetService) Greet(name string) string { return g.prefix + name + "!"}
func (g *GreetService) GetTime() time.Time { return time.Now()}
// Register the serviceapp := application.New(application.Options{ Services: []application.Service{ application.NewService(&GreetService{prefix: "Hello, "}), },})Descoberta de serviços:
- O Wails varre sua struct na inicialização
- Métodos exportados tornam-se chamáveis do frontend
- Informações de tipo são extraídas para bindings de TypeScript
- Tratamento de erros é automático (erros do Go → exceções JS)
Binding de TypeScript gerado:
// Auto-generated in frontend/bindings/GreetService.tsexport function Greet(name: string): Promise<string>export function GetTime(): Promise<Date>Por que serviços?
- Tipado com segurança: Suporte completo ao TypeScript
- Descoberta automática: Sem registro manual de métodos
- Organizado: Agrupe funcionalidades relacionadas
- Testável: Serviços são apenas structs Go
Mais informações sobre serviços →
4. Sistema de Eventos
Seção intitulada “4. Sistema de Eventos”Os eventos permitem comunicação pub/sub entre componentes.
Casos de uso:
- Comunicação entre janelas: Uma janela notifica as outras
- Tarefas em segundo plano: Serviço Go notifica a UI sobre o progresso
- Sincronização de estado: Mantém múltiplas janelas sincronizadas
- Acoplamento fraco: Componentes não precisam de referências diretas
Exemplo:
// Go: Emit an eventapp.Event.Emit("user-logged-in", user)// JavaScript: Listen for eventimport { Events } from '@wailsio/runtime'
Events.On('user-logged-in', (user) => { console.log('User logged in:', user)})Mais informações sobre eventos →
Ciclo de Vida do Aplicativo
Seção intitulada “Ciclo de Vida do Aplicativo”Entender o ciclo de vida ajuda você a saber quando inicializar recursos e fazer a limpeza.
Lifecycle hooks:
app := application.New(application.Options{ Name: "My App",
// Called before windows are created OnStartup: func(ctx context.Context) { // Initialise database, load config, etc. },
// Called when app is about to quit OnShutdown: func() { // Save state, close connections, etc. },})Build Process
Seção intitulada “Build Process”Understanding how Wails builds your application:
Build steps:
-
Analyse Go code
- Scan services for exported methods
- Extract parameter and return types
- Generate method signatures
-
Generate TypeScript bindings
- Create
.tsfiles for each service - Include full type definitions
- Add JSDoc comments
- Create
-
Build frontend
- Run your bundler (Vite, webpack, etc.)
- Minify and optimise
- Output to
frontend/dist/
-
Compile Go
- Compile with optimisations (
-ldflags="-s -w") - Include build metadata
- Platform-specific compilation
- Compile with optimisations (
-
Embed assets
- Embed frontend files into Go binary
- Compress assets
- Create single executable
Result: A single native executable with everything embedded.
Development vs Production
Seção intitulada “Development vs Production”Wails behaves differently in development and production:
Characteristics:
- Hot reload: Frontend changes reload instantly
- Source maps: Debug with original source
- DevTools: Browser DevTools available
- Logging: Verbose logging enabled
- External frontend: Served from dev server (Vite)
How it works:
Benefits:
- Instant feedback on changes
- Full debugging capabilities
- Faster iteration
Characteristics:
- Embedded assets: Frontend built into binary
- Optimised: Minified, compressed
- No DevTools: Disabled by default
- Minimal logging: Errors only
- Single file: Everything in one executable
How it works:
Benefits:
- Single file distribution
- Smaller size (minified)
- Better performance
- No external dependencies
Memory Model
Seção intitulada “Memory Model”Understanding memory usage helps you build efficient applications.
Memory regions:
-
Go Heap
- Your services and application state
- Managed by Go garbage collector
- Typically 5-10MB for simple apps
-
WebView Memory
- DOM, JavaScript heap, CSS
- Managed by WebView’s engine
- Typically 10-20MB for simple apps
-
Bridge Memory
- Message buffers for communication
- Minimal overhead (<1MB)
- Zero-copy for large data where possible
Optimisation tips:
- Avoid large data transfers: Pass IDs, fetch details on demand
- Use events for updates: Don’t poll from frontend
- Stream large files: Don’t load entirely into memory
- Clean up listeners: Remove event listeners when done
Learn more about performance →
Security Model
Seção intitulada “Security Model”Wails provides a secure-by-default architecture:
Security features:
-
Method whitelisting
- Only exported methods are callable
- Private methods are inaccessible
- Explicit service registration required
-
Type validation
- Arguments checked against Go types
- Invalid types rejected
- Prevents injection attacks
-
No eval()
- Frontend can’t execute arbitrary Go code
- Only predefined methods callable
- No dynamic code execution
-
Context isolation
- Each window has its own context
- Services can check caller context
- Permissions per window possible
Best practices:
- Validate user input in Go (don’t trust frontend)
- Use context for authentication/authorisation
- Sanitise file paths before file operations
- Rate limit expensive operations
Next Steps
Seção intitulada “Next Steps”Application Lifecycle - Understand startup, shutdown, and lifecycle hooks
Learn More →
Go-Frontend Bridge - Deep dive into how the bridge works
Learn More →
Build System - Understand how Wails builds your application
Learn More →
Start Building - Apply what you’ve learned in a tutorial Tutorials →
Dúvidas sobre a arquitetura? Pergunte no Discord ou consulte a referência da API.