Will Tauri Be an Electron Killer?

Do you know Tauri?

As a front-end developer, I believe you should know Electron. It uses JavaScript to develop cross-platform desktop applications, but have you heard of Tauri?

What is Tauri?

Tauri is a framework for building tiny, blazingly fast binaries for all major desktop platforms. Developers can integrate any front-end framework that compiles to HTML, JS and CSS for building their user interface. The backend of the application is a rust-sourced binary with an API that the front-end can interact with.

The above introduction comes from the official Github repository. A few short sentences summarise the characteristics of Tauri:

• Small build size
• Good performance
• Binary file
• Cross-platform
• The user interface can use the web front-end technology stack
• The program backend uses Rust

It looks so good! So will it be an Electron killer?

Tauri vs. Electron

Image from Github

The above image is the comparison between Tauri and Electron now.

You can see that it has some advantages over Electron, such as packing size and launch time. It also has some features that Electron does not support.

But Rust is what caught my attention the most. In recent years, it has frequently appeared in the front-end circle, and SWC, Deno, etc. are all using it. It is a statically type-safe language with no runtime and garbage collection mechanisms. It is particularly good at high performance, reliability, and productivity. And the compiler is strict enough to guarantee memory safety and thread-safety.

Here it is used as Backend Binding and Underlying Engine. I’ll describe how it works in the comparison with Electron below.

Next, I’ll compare the two from several perspectives: development, building, auto-update, and architecture.

Development

To create a Tauri APP, you must first prepare the Rust environment and Node.js environment on your local computer. You can go to their official website and follow the steps to install them. Let’s focus on how to create a Tauri project.

yarn create tauri-app
#OR
npx create-tauri-app

Tauri has many templates built-in, so we can choose them freely:

I have chosen Vite + react-ts here and here is the generated directory:

You can see that the project structure is very clear. If you choose another template, the overall project structure is roughly the same. The main change is the front-end project structure.

Let’s take a look at the default generated package.json:

Excellent! Tauri has already done everything for us. We can use yarn tauri dev to start development and yarn tauri build to package the final product.

The web front-end commands can be customized in src-tauri/tauri.conf.json:

Tauri can also optionally be integrated into existing front-end projects. In contrast, Electron officially does not provide a template creation feature. It can only be configured step by step according to the documentation.

So in terms of the development experience, Tauri is out of the box and gives us a clear project configuration, which definitely saves us a lot of time.

Building

Rust has been criticized for its compilation time at this stage, which is a direct result of Tauri’s long packaging time. But the good news is that the next compilation will use caching to reduce the time. In addition, the final product will exist in binary form, adding a layer of security to cracking.

By default, Electron doesn’t package the main process code, it even packs the huge node_modules into the final program as well. This further increases the size of the built product. This also results in no encryption mechanism for the source code. Even if it wraps the source code in asar, it can be easily cracked.

Of course, we can use build tools to package and obfuscate the source code, which is obviously time-consuming and laborious.

It’s also worth noting that Electron can be built cross-platform. For example, it can build packages for the Windows platform on the Mac platform. And Tauri can only be built on the corresponding platform at present. This is a hassle for systems that automatically package and distribute.

Auto-update

To support auto-update on the three major desktop platforms, Electron requires third-party libraries such as electron-builder or electron-packager. And Tauri can support it natively.

Architecture

Architecturally, Tauri does not wrap Chromium. It uses the self-developed WRY to connect the Web engines of various platforms and provides a unified interface to render WebView. Underlying Web engines for each platform it uses:

Use WebView2 from Microsoft Edge Chromium on Windows platform; WebKit on Mac; Use WebKitGTK on Linux platforms.

This means that it has nothing to do with Chromium. If you open DevTools on the Mac platform, you can see that its internal UI is consistent with Safari. If you open the DevTools on the Windows platform, you will find that its internal UI is consistent with Microsoft Edge.

That is to say, it only does the adhesive layer, so its volume is very small.

In addition to this, they also developed TAO, a library for cross-platform application window creation, and re-exported it in WRY for event loop and window creation.

Electron wraps the entire Chromium for front-end rendering. On the event loop, it starts a separate thread that continuously polls the backend_fd in Node.js for new events from libuv. When new events are found, they are forwarded to Chromium’s event loop (MessageLoop). See the figure below for details.

Image from Shelley Vohr | JSHeroes 2019

In the above way, Electron integrates the event loop of Node.js into the event loop of Chromium to ensure the performance of the application.

Comparing the two, my perceptual understanding is:

Electron is more like a fusion technology, which integrates Node.js into Chromium.

Tauri is more like glue, handing over the rendering of WebView to the built-in Web engine of each platform. Tauri is the top layer that can control the GUI through WRY and TAO.

Conclusion

Tauri has good performance and good prospects. It solves many of Electron’s existing problems and brings a simple and convenient development experience. But there are still some issues that need to be improved, and the learning curve of Rust is tortuous and has a certain learning cost.

Electron has developed very well today. And it relies on the thriving Node.js community, and its surrounding ecology is very good. It uses JavaScript in the front and back ends, so learning costs are smaller.

So what do you think of Tauri?

Thanks for reading. If you like such stories and want to support me, please consider becoming a Medium member. It costs $5 per month and gives you unlimited access to Medium content. I’ll get a little commission if you sign up via my link.

Your support is very important to me — thank you.