Utilize 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!
Top comments (17)
Hey @dedsyn4ps3 !
Good article, I have rated this as High Quality!
I personally had written on this topic 2 years ago and it went quite viral.
Its sad 😔 to see that people till now haven't yet adapted to this change. But thanks for posting!
Thanks for the comment @akashpattnaik! I started using Tauri a couple years ago myself and have written a couple articles since then. It's been an awesome experience to share the project with others and see it continue to grow such as it has!
tauri is amazing, i've been using it in my project kftray (a menu bar app for kubernetes users) and it's been a very good experience. i'm excited to migrate to tauri v2.
I could see the potential of this framework. The major problem of the electron was the package size and memory usage. This really gives a boost to desktop app environment around the globe. Lets hope for a good community to develop around this tauri for a better support.
It gives it a huge boost, lemme tell ya! I've been using Tauri for several of my desktop projects, and they've been working on Mobile support as well that's still in development (which I've written a walkthrough about too btw)!
Tauri uses the native platform WebView which can make it behave inconsistently across different platforms. Whereas electron ships with chromium which guarantees a consistent cross platform experience.
This is the gotcha with tauri.
I was going to say same thing, API inconsistency, CSS inconsistency and the best is extremely limited Safari APIs and Apple’s interference
Tauri is incredibly satisfying; I've completed a couple of projects using it, and I'm quite fond of the experience. Paired with the Matine framework, you get everything you need.
Yoooo, this is a game changer! Seems promising. Thanks for the tip!
Great article!
Do you have any experience or comparison regarding the memory usage differences between using tauri and electron?
Thanks for sharing your thoughts!
I primarily focused on binary size comparisons between the two, and shared a screenshot of the differences in my Medium article. As for memory usage, I have not documented all of the various facets of resource utilization, but I can say that because both are using the same web-based frameworks under the hood (presumably) the overall memory usage would probably be fairly similar,
It's important to keep in mind though that even if that happens to be the case (though I can almost certainly guarantee that Tauri is slightly more efficient resource-wise), the biggest improvement over Electron is the eradication of needing the same kind of bridge originally needed by Electron for the front end to make function calls to the back end.
With Tauri, the inter-process communication is seamless and much smoother than I usually experienced in my Electron-based projects!
One of the major challenges of Tauri is that it doesn't guarantee a consistent, or even eventually-consistent degree of API support.
An immediate example of this is WebGPU access. If Tauri ran Chromium everywhere, an app could use WebGPU on most desktops that will support it's current version, either right now, or very soon.
Because Tauri uses the default browser, the release date for a Linux app using GPU compute is "soon-ish?" and Mac is "ehhhhh". And because it goes with what is on the path, there is no accounting for version, either.
I’d really like there to be a dynamic installer process that allowed you to check for certain requirements and then check for other browsers, and then install a different head, as a last resort. No WebGPU in Safari? Is Chrome installed? Go with that. No? Then let me install a portable version that this Tauri app and all others can use.
I been using Tauri for over a year now. It's a great project.
Except for Linux users, the web engine used is webkit and it's crap. I can't express how much I hate it, it's like you're back in the stone age. Windows uses webview2 engine and it's great but it will never(as I can see) be available on Linux and I don't code on either windows or mac, I only use Linux and this saddens me.
This is not a Tauri issue, but somehow an issue nonetheless for Linux users. :(
Greetings and welcome to the comprehensive guide on adhering to the criteria and procedures of the Biglots survey. Through the Big Lots Survey, you may provide us with insightful input that helps us understand you and your ideas better.
biglots.com/survey
I thoroughly enjoyed this article! I’ve used electron in the past, and just wasn’t fully satisfied. I think I may have to give Tauri a go!
Nice read.
Thanks for sharing this great information, i would appreciate if you share this type of information regularly. biglots.com/survey