Making Rust GUI app with HTML/CSS/JavaScript

Table of Contents

In early 2000s, when most of the world still using Windows, creating GUI applications is such a piece of cake. Visual Studio from Microsoft is the dominating tool that you can use to build anything you want, from desktop apps to games.

Almost 20 years later, now people use a lot of platforms, from Linux to macOS, iOS to Android,… if you want to acquire more users, you need to support as many platform as you can. And to save up development cost, you have to consider a cross-platform solution to build your applications.

But when it comes to cross-platform GUI development, its a painful process, let's take a quick look at current GUI development solution we have. Since this is a post about Rust, I'll just talking about Rust related solutions.

1 Ton of choices, but no best choice

1.1 GTK

On top of the list, the first thing come up when thinking about GUI is GTK, a great platform to build cross platform UI, many great applications built with it, for example, Inkscape or GIMP.

But, building GTK on macOS is not quite easy, since it required X11, which is no longer included in macOS.

1.2 Cross-platform native GUI… wait, what?

I'm talking about libui, or any equivalent (dunno, is there any?). It wraps the native API and provide an interface so you can just write your code once, and run everywhere.

This approach is great until you realized you want to give your app some unique looks, or heavily customized UI. How do you create a fancy UI like Slack or Atom with libui? It's not impossible but it would take a lot of pain.

1.3 JavaFx

Speaking of building fancy apps, JavaFx is a good platform for Java developers, with unlimited ability to customize the UI. The deal breaker for me is you have to ship your app with JRE. Not to mention that we are using Rust here.

1.4 OpenGL based GUI frameworks

Here come OpenGL, you build your app as if it's a game. Alacritty is a famous terminal emulator using this approach.

In Rust, there's conrod, a very good library to build OpenGL-based UI. With a lot of widget, and you can easily create your own customized components. Another approach is ImGui, which is pretty powerful and has been around quite a long time.

But power consumption is one of the thing you need to consider. Also, since it's a custom rendered UI in a graphical environment, you will feel the pain when you have to deal with stuff like input methods,…

1.5 Qt Framework

Probably the best approach today. Based on C++, and used in many great applications like Tesla's dashboard UI (well, I don't have a Tesla so I did not see it on my own), or albert.

1.6 Web-based UI

Finally, the least appreciated way, but the easiest, it just works, and very easy to customize the UI using HTML/CSS. Sound like Electron huh?

Apparently, Electron is one of the most popular choice for this approach, it's very easy to use, but it come with so many flaws, from security to memory/battery consumption, to unreasonable large bundle size,… but it also come with many helpful features like auto updating,… I personally don't like it, mostly because my bad experience with Slack and VSCode, both are very laggy and speed up my computer's fan to a ridiculus loudy state.

Without using Electron, you can still use web-based UI for your applications. It's just an old techniques, that you will ship your app with a small portion of code to add a native webview component and load up your frontend code.

I made a tiny application using this technique, with Elm for the web UI and Rust for the desktop client, the total bundle size is just 800KB, comparing to 100MB that you will have to ship with Electron.

Date: 2019-01-19 Sat 00:00

Author: Huy Tran

Created: 2019-05-12 Sun 23:50