SECRET OF CSS

Goodbye Electron. Hello Tauri, A Rust Backend Framework | by Ed Rutherford | Sep, 2022


Utilize the Rust-powered alternative paired with a React frontend to offer an awesome browser-less experience

Goodbye Electron. Hello Tauri. Rust backend framework. Desktop apps.
Adiós Electron. Image by author

Many a developer can tell you about their love-hate relationship with the JavaScript GUI framework that helped revolutionize the way many desktop applications are made. The fact is that many of the apps we all use today, whether it pertains to development, social media, communications…you name it, have been built using the Electron framework.

If you’re ever curious, check out the curated list of apps that use Electron from their website.

The point is, Electron offered developers with web development experience the opportunity to create standalone desktop applications for multiple platforms…all without having to learn any new programming languages! It offered the ability to use the same JavaScript, CSS, and HTML that many of us use all the time, which of course is quite wonderful!

To briefly summarize how Electron was able to offer this:

Electron is a framework for building desktop applications using JavaScript, HTML, and CSS. By embedding Chromium and Node.js into its binary, Electron allows you to maintain one JavaScript codebase and create cross-platform apps that work on Windows, macOS, and Linux — no native development experience required.

1*Z24CSnOX2f9ZVcvbBDv79Q
A glimpse of Electron’s influence

One of the biggest downsides to building desktop apps using Electron, as some of you have probably seen throughout Stack Overflow and other forums…is the resulting binary tends to be outrageously large! So much so, that even just a medium-sized code base could result in a final binary ~60MB.

After experiencing this frustration firsthand, I started wondering if there was a magical solution to this problem…and as it turns out, Rust just so happened to offer one!

Say hello to Tauri!

Tauri is a toolkit that helps developers make applications for the major desktop platforms — using virtually any frontend framework in existence. The core is built with Rust, and the CLI leverages Node.js making Tauri a genuinely polyglot approach to creating and maintaining great apps.

For some, learning to write code using Rust can be a somewhat daunting task, especially if they are not familiar with statically typed languages. I started re-writing a number of my own smaller Python scripts to see what kind of performance improvements I could make. Some things ended up being worth the effort, others not so much.

Still, I was rather curious and started delving into the documentation offered by Tauri. To my excitement, their command-line scaffolding tool creates all the Rust files you need to get up and running using familiar frontend frameworks. Not only that, but once I was ready to start adding my own functions to the backend for the UI to use, Tauri makes getting everything working together rather seamless!

1*aKFcR7i qNCMgUzS02GMJw
Get started quickly and easily

I decided to give Tauri a try to create a new desktop dashboard application for a community project I was planning on contributing to, and spoiler…it didn’t disappoint!

As I mentioned previously, getting started was rather straightforward:

  • Ensure your system has Rust installed
  • If on Windows or Linux, make sure to install the relevant dependencies
  • Run a simple command to set up your project

After that, it was a matter of getting the frontend source files all put together, while occasionally referencing the docs from Tauri when I needed some pointers on Inter-Process Communication between the UI and backend.

The beauty of using Tauri to create my dashboard is I no longer had to bother with creating a separate preload.js file just to be able to utilize inter-process communication properly.

All that was required was the proper annotation in the main.rs above the function that I wanted to call from the UI, and a simple additional import line in my React jsx file:

import { invoke } from '@tauri-apps/api/tauri'

The power of a Tauri-built app, in the end, comes down to the fact that its backend utilizes Rust. This allows developers such as myself to build their final product into a native-running binary at a fraction of the size of many Electron-built applications.

Once the final pieces of my project were in place, all I had to do was run the build script and wait for cargo to do its thing. The size of the final resulting binary for my dashboard: ~13.6MB. Curious how large a nearly identical project was after building using Electron? Try 58.2MB!

1*c0El wEokTFOrQMEYpMnLw
The end result

It’s become clear, at least to me, that Tauri certainly has the potential to continue growing to the point in which it topples Electron as the dominant “front-end” GUI framework. Even though there may be an intimidation factor due to being built on Rust, the small amount of time needed to understand its internals is well worth it!

I encourage anyone looking to start their journey into front-end GUI development to check out the Tauri framework, and resist the urge to immediately look to Electron as the immediate solution…you’ll be pleasantly surprised I assure you!

For completeness, you can find the entire code base for my community project on my Gitlab. Check it out if you’re looking for any ideas for your own projects!



News Credit

%d bloggers like this: