How Tauri Turns Web Designs into Compact Native Apps

“Open source, small secure and why burn down the world?” — Listening to one of the key developers of Tauri describe his motivations on a Changelog podcast made me reflect on how developers choose to make small native apps. Tauri was built for the “security-focused, privacy-respecting, and environmentally-conscious” (that is, small and less power consuming) software engineering community. How does that map to average developer decisions?

Working out the best technology to write a maintainable app with ends up being a balance between where you are, what you know as well as what’s available.

If you develop behind a corporate firewall, you may have to make do with whatever your curtailed reality allows. Small apps are usually tools, and some of these need to know about your system in a way that web-based tools are not trusted to do. But just for efficiency, using the native UI and windowing system of the target machine makes sense.

So where does Tauri fit in?

Tauri is a framework to build desktop applications with any frontend framework and a Rust core. Each app consists of two parts:

• A Rust binary that creates the windows and exposes native functionality to those windows
• A web frontend of your choice that produces the user interface inside the window

A Tauri elevator pitch may sound slightly contradictory at first – use web technologies to build native apps. Obviously, the best way to display HTML, JS and CSS is in a browser — but that isn’t the end of the story. These technologies have become the de facto methods of putting information on a screen, and it is now legitimate to use them to build UI regardless of the target. This idea has evolved; I’m writing this with the Notion app, which is wrapped in Electron, which shares the same initial concepts. (Having said that, the Notion app is a whopping 668MB!)

The core of Tauri is written in Rust, which is a new language for me, but I don’t intend to get too involved with that. In a simplistic sense, the Rust core controls the native windowing and message passing, allowing a simulation of a browser for web-like components. While this type of modular hand-off tends to make for complex architectural diagrams, it does make for a more orderly approach at a local level. UI concerns are well separated from OS concerns etc. If I see a candlestick in the garden, I know I’m playing Cluedo — because it has no business being there otherwise.

💡 Tauri is a framework to build desktop applications with any frontend framework and a Rust core.

I’d probably prefer to be writing less JavaScript, but I’m a pragmatist. Most of the worlds UI is written for the web, after all. So for my test drive, I’ve used the start guide with the given Vite example. Tauri presents itself as a glue-like technology that focuses on the toolchain, which means it might feel a bit rougher on new developers because you touch a lot of pieces in passing. It’s always harder to tell what made you sick when you eat from a buffet. Conversely, it is well suited to leveraging the knowledge of an experienced frontend developer.

I’ll follow the steps in the guide with my mac. I know one prerequisite is Rust, but I also figure my node setup is totally out of date.

From my shell, I check I have the all-important Xcode libraries:

Now I already have the node version manager (nvm) installed, but I thought I would install a newer but stable node:

And I get a compatible version of npm thrown in.

Then I go for Rust itself:

So after reloading the shell, and seeing the word “cargo” already, I now have a more rusty Mac. If you guessed that Cargo is Rust’s build system and package manager, you guessed correctly.

After a strange bug that was fixed by fiddling with my registry settings, I was able to use npm as suggested by the guide. I chose a nice vanilla build from the questions asked that are used to set up a configuration:

Now the working directory has the normal node development elements in it, including some simple HTML, some CSS, a soupçon of javascript to deal with the counter, a “package.json”, a node modules folder and the logo images you can see. In a subdirectory labeled “src-tauri” we see more of the rust world, and a file “tauri.conf.json”. This file preserves the name that I chose for the app title window, as well as the name for the app as it appears as a file.

So let’s run the development process:

And I got the very nice default app below. It has a little bit of logic in a count button (it increases when you press it) and it opens the appropriate web page in an external browser if you click on either of the two icons. Otherwise, it is just a nice native window.

We can also make a release build, that will build a fully installable application:

The resulting .dmg file that was created allowed me to install via a drag into the Applications folder in the normal Mac way, as my Launchpad search confirms:

This was a 9MB file inside my Applications folder. Small enough. So I made a very simple app, but the toolchain was comprehensible and fairly quick on my elderly machine.

Before I leave, let’s see if we can use Tauri to make the app a bit smaller. I note that an “allowlist” in “tauri.conf.json” mentions which modules will be built. Now the only special bits this app needs is the ability to open an HTML page on an external browser, so using the documentation, I tried this quick hack:

And the resulting build went down to a size of 8MB, which was still functional.

From 9MB to 8MB is certainly an effective crash diet, more importantly, underlining how relatively easy it is to control the size.

Now to delve deeper would involve a little more familiarity with Rust, but that language is in vogue at the moment so it would likely be a rewarding task. As I mentioned, Tauri is more of a methodology with some tools, as opposed to a complete platform approach. It looks like a strong option for engineering teams looking to turn web designs into small apps.

David has been a London-based professional software developer with Oracle Corp. and British Telecom, and a consultant helping teams work in a more agile fashion. He wrote a book on UI design and has been writing technical articles ever since....

Read more from David Eastman