How Tauri Turns Web Designs Into Compact Native Apps – The New Stack

“Open source, small secure and why burn the world?” — Listening to one of the main developers of Tauri describing his motivations on a Changelog podcast got me thinking about how developers choose to build small native apps. Tauri was designed for the “security-focused, privacy-friendly, and environmentally conscious” (meaning small and less power consuming) software engineering community. How does this correspond to average developer decisions?

Finding the best technology for writing a maintainable application ends up being a balance between where you are, what you know, and what’s available.

If you’re developing behind a corporate firewall, you may have to stick with whatever your restricted reality allows. Small apps are usually tools, and some of them need to know your system in a way that web tools don’t. But just for efficiency, using the target machine’s native UI and windowing system makes sense.

So where does Tauri fit in?

Tauri is a framework for building desktop applications with any front-end framework and a Rust kernel. Each application consists of two parts:

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

A Tauri pitch may seem slightly contradictory at first glance – use web technologies to build native applications. Obviously, the best way to view HTML, JS, and CSS is in a browser, but that’s not the end of the story. These technologies have become the de facto methods of displaying information on a screen, and it is now legitimate to use them to build UIs whatever the target. This idea evolved; I’m writing this with the Notion app, which is wrapped in Electron, which shares the same initial concepts. (That said, the Notion app is 668MB!)

Tauri’s core is written in Rust, which is a new language for me, but I don’t plan to get too involved with it. In a simplistic sense, the Rust core controls native windowing and message passing, allowing a simulation of a browser for web-like components. Although this type of modular transfer tends to create complex architectural diagrams, it allows for a more orderly approach at the local level. User interface issues are well separated from operating system issues, etc. If I see a candlestick in the garden, I know I’m playing Cluedo – because there’s nothing else to do there.

💡 Tauri is a framework for building desktop applications with any front-end framework and a Rust core.

I would probably prefer to write less JavaScript, but I’m pragmatic. Most user interfaces in the world are written for the web, after all. So for my test drive I used the getting started guide with the given Quick example. Tauri bills itself as a glue-like tech that focuses on the toolchain, which means it might feel a little rougher for newer developers because you’re hitting a lot of parts in passing. It’s always harder to tell what made you sick when you’re eating at the buffet. Conversely, it is well suited to leverage the knowledge of an experienced frontend developer.

I will follow the steps in the guide with my mac. I know a prerequisite is Rust, but I also think my node config is totally outdated.

From my shell, I check that I have the most important Xcode libraries:

Now I already have node version manager (nvm) installed, but I was thinking of installing 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 already seeing the word “cargo”, I now have a rustier Mac. If you guessed that Cargo belongs to Rust build system and package manager, you guessed right.

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

Now the working directory contains the normal node development stuff, including some simple html, css, a smattering of javascript to handle the counter, a “package.json”, a node modules folder, and the images of logo you can see. In a subdirectory called “src-tauri” we see more of the rust world and a “tauri.conf.json” file. This file retains the name I chose for the application title window, as well as the name of the application as it appears as a file.

So let’s start the development process:

And I have the very nice default app below. It has some logic in a count button (it increases when pressed) and it opens the appropriate web page in an external browser if you click on either icon. Otherwise, it’s just a nice native window.

We can also create a build build, which will build a fully installable application:

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

It was a 9MB file in my Applications folder. Quite small. So I created a very simple application, but the toolchain was understandable and quite fast on my old machine.

Before we go, let’s see if we can use Tauri to make the app a bit smaller. I note that a “whitelist” in “tauri.conf.json” mentions which modules will be built. Now the only special things 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.

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

Now, going deeper would involve a little more familiarity with Rust, but that language is hot right now, so it would probably be a rewarding task. As I mentioned, Tauri is more of a methodology with a few tools, as opposed to a full platform approach. It looks like a solid option for engineering teams looking to turn web designs into small apps.