Ed RutherfordUtilize the Rust-powered backend framework paired with a React frontend to offer an awesome browser-less experience
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.
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!
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.
Diving In
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!
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.
Conclusions
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!
gitlab.com
💻 Check out my Github, too!
