Building Desktop Apps with Wails: Combining Go and Web Technologies

Wails is a project that allows you to write desktop applications using Go and web technologies. It can be seen as a fast, lightweight alternative to Electron. By combining rich modern frontends, you can easily build applications using Go's flexibility and powerful features.

In the previously published AsBot client, xiaoz used Wails technology for development.

Wails Features

• Native menus, dialogs, themes, and transparency
• Support for Windows, macOS, and Linux
• Built-in templates for Svelte, React, Preact, Vue, Lit, and Vanilla JS
• Easy invocation of Go methods from JavaScript
• Automatic conversion of Go structs to TypeScript modules
• No CGO or external DLLs required on Windows
• Real-time development mode using Vite
• Powerful command-line tools for creating, building, and packaging applications
• Rich runtime libraries
• Applications built with Wails are compatible with Apple and Microsoft stores

When to Choose Wails

When mentioning cross-platform client development, Electron often comes to mind. Electron is the preferred choice for cross-platform client development, and many well-known software, such as VSCode and the refactored Tencent QQ, are developed using Electron. However, Electron also has some drawbacks, such as high memory usage, large application size, and the need to be familiar with Node.js. If you cannot tolerate these drawbacks and meet the following conditions, you can consider using Wails.

Suitable Scenarios:

1. Developing some simple clients
2. You are already familiar with the Golang programming language
3. You are already familiar with a web frontend framework, such as Vue3

If you have mastered the above requirements, you can fully use Wails to develop cross-platform clients. However, if you are not familiar with the above tech stack, I do not recommend choosing Wails, as the learning cost may be higher than that of Electron.

Quick Start with Wails

When xiaoz used Wails for development, the frontend technology paired was Vue3, but Wails supports not only Vue3 but also Svelte, React, and more.

Environment Requirements:

• Go 1.18+
• NPM (Node 15+)

For installing Wails, refer to the help documentation: Wails Installation

Start Development

After successfully creating a Wails project, you can start frontend development in the frontend directory. If using Vue3 as the frontend technology, you usually need to pair it with JavaScript libraries such as Vue Router, Pinia, and axios.

Then, choose a Vue 3 UI component library you are familiar with, such as Element Plus.

Parameter Options

If you need to modify application parameters, you can set them in main.go, such as default window size, title, etc. For details, refer to the official documentation: Application Options

Frontend and Backend Communication

If you want to call backend methods provided by Golang in the frontend, you can write your own methods in app.go. For example:

// Scan files and import into the database
func (a *App) ScanFiles(path string) string {
   result := controller.Scan(path)
   return result
}

If the frontend needs to call the ScanFiles() method, it must first import:

import {ScanFiles} from "../../wailsjs/go/main/App.js"

Then call it:

ScanFiles(path.value)
   .then((res)=>{
       console.log(res)
   })
   .catch((err)=>{
       console.log(err)
   })

I personally feel that this calling method is quite tedious, especially when handling complex data. We can also change the approach and use HTTP calls for communication, such as using Gin as a WEB service on the backend.

Using Gin to Communicate with the Frontend

If we use Gin on the backend to provide WEB services, the frontend only needs to perform HTTP calls, but please note the following:

1. The Gin framework must run before wails.Run(), otherwise Gin will block Wails.
2. Gin needs to keep running on the backend, otherwise it will also be blocked.

Gin can be run in the background using the following method:

   go func() {
       r.Run(":11280")
   }()

Packaging Wails

Use the command wails build to package into a binary file. You can also use wails build -upx to use upx for compression, making the volume smaller. upx is available by default on Windows, but needs to be installed separately on other platforms. In some cases, compression with upx may cause anomalies, so please choose according to the actual situation.

If there are anomalies in the packaged client, you can use wails build -debug for compilation to allow you to use frontend debugging tools.

No Cross-Compilation Support

Wails does not support cross-compilation, meaning you cannot package MacOS programs on Windows. Therefore, xiaoz set up a Hackintosh, see: How to Install MacOS on Intel NUC8i5BEH: Tutorial and Experience Sharing to specifically package MacOS applications.

Pitfalls

Wails cannot automatically compile and update after modifying files

The reason for this problem is that Wails automatically generates the folder frontend/Views when creating a project. Note that Views starts with a capital letter. On Windows machines, case sensitivity is default. When using Vue Router to import, pay attention to the case of the path; otherwise, it will not report an error, but Wails will not automatically compile and update after modifying files.

Conclusion

The emergence of Wails gives us another choice when developing cross-platform clients. Wails is more suitable for developing some relatively simple client programs. If you are not familiar with Golang and do not care about factors such as volume, perhaps Electron is more suitable. In short, you should choose according to your own situation and scenario.