Exploring The Various Ways to Make Desktop Apps With Web Technologies

My interest in this topic started when I wanted to make available my JavaScript based web games as desktop apps that could eventually be sold on Steam.

After doing some research and trying various options, I think I have a better view of the landscape and would like to share my findings in this post.

Here is the list of technologies I’ll cover :

• Electron

• NW.js

• Tauri

• Wails

2 Approaches to Building Desktop Apps With Web Tech

1. Packaging a Chromium Instance

The first one consists in packaging an entire Chromium instance with your app. This is what Electron and NW.js does.

Advantages

• UI will remain and behave the same regardless of the operating system used since the same renderer (Chromium) and a fixed version are used.

• For Electron and NW.js, you can use Node modules which allows you to interact with the underlying operating system. For example, you can create, read, delete files on the user’s disk. You have access to everything else available on NPM. This eliminates the need to use another language for the backend portion of your app. This is an advantage if you only know JS/TS and only want to stick with one language.

Disadvantages

• The app is heavier since it needs to package a whole Chromium instance on top of your app’s existing files.

• Chromium is known to consume a lot of RAM.

2. Using The Operating System’s WebView

The second option consists in using the operating system’s webview to display the app instead of packaging a Chromium instance with your app. This is what Tauri and Wails does.

Advantages

• The app is going to be lighter since there is no need to package a Chromium instance.

• You can use another language for the backend part of your app. For Tauri, it’s Rust (JS API is available though) and for Wails, it’s Golang.

Disadvantages

• There can be disparity in UI rendering on different platforms since each operating system uses a different web engine for their webview. This can lead to visual bugs that appear only on one platform and not the other and makes debugging annoying. I assume that if your UI is simple, this shouldn’t be much of an issue.

• If you use Tauri and only know JavaScript, the API limits what you can do in your app compared to using Electron or NW.js where you can use everything on NPM. Additionally, if you only know JS you’ll have to learn Golang if you want to use Wails.

Electron VS NW.js

They are similar, but NW.js is easier to use. Electron has an architecture where the Frontend is separated from the Backend. Meaning that you can’t use Node modules in the JavaScript you use to write your UI. There is a separation between your UI’s JavaScript code (which is your Frontend) and the JavaScript that runs in Node.js (which is your backend).

To communicate between the two, you use inter-process communication (ipc) acting as a bridge between the two JS worlds.

While this is probably better for security, it’s a hassle when your goal is to just bring a JavaScript web game to desktop. I just want my game to work in an app shell and be able to use the built-in fs module which allows me to create save files on the user’s disk.

NW.js is therefore much more convenient since I can call Node.js modules directly within my Frontend JavaScript. There is no separation.

However, maybe for entreprise apps, Electron is the way to go.

Tauri VS Wails

Tauri not only allows you to build desktop apps but it also allows you to build mobile apps. Having used Tauri, the developer experience was nice and I didn’t need to use Rust because they provide a JavaScript API. Last time I tried Tauri, I couldn’t do cross-compilation on a single machine for all operating systems. You could only compile for your machine.

As for Wails, it’s similar to Tauri except there isn’t mobile support and you need to use Golang for the backend portion of your app.

That means that if you want to create, read, delete files, you have to use Go. In terms of developer experience, Wails is very easy to setup. It’s also very easy to build your app for both Windows and Mac on the same machine. Unfortunately, Wails doesn’t support building your app for Linux if you’re on a Windows or Mac machine but you can build for all 3 platforms if your machine uses a Linux based operating system.

Golang is also a language that’s easier to pick up than Rust, so it’s very much worth considering as a JS/TS dev if you want to expand your horizons.

Electron or NW.js VS Tauri or Wails

Which one should you use in the end?

If your app has a complex UI it might be better to stick with Electron or NW.js. If your app is more backend heavy with a simpler UI, it’s probably worth going with Tauri or Wails so that you can make a lightweight app and benefit from the performance of Rust or Go.

What’s Best for My Use Case?

Since my goal is to wrap my JavaScript game as a desktop app, NW.js is the one that’s a better fit. It’s simple and easy to use and is already being used extensively by already published games on Steam.

If you’re interested in a tutorial teaching you how to setup NW.js for gamedev, subscribe to not miss it out when I post it.

In the meantime, you can check out my other posts