Examples for comparison between the frameworks Tauri and Electron

Small applications made for comparing the frameworks Tauri and Electron.

This repository is an adaptation of the comparisons made by Gordon H. in the article "macOS Performance Comparison: Flutter Desktop vs. Electron", and is heavily based on the repository HayesGordon/flutter-desktop-vs-electron-samples.

🇧🇷 Clique aqui para ler em português 🇧🇷

Index

• Prerequisites
• Compiling the projects with the automation script
  • Linux
  • Windows
• Compiling and running the projects manually
  • Tauri Projects
  • Electron projects
• Applications in this repository
  • Hello World
  • Image Demo
  • Lottie Demo
• Note about workspaces
• About this repository/conclusion

Prerequisites

To run the projects below, you need to install Node.js and NPM, and the Rust language compiler.

Compiling the projects with the automation script

The project root contains scripts that automatically download each project's dependencies, build their installers, show a report of time elapsed for each step, and put the installers on the folders build/electron and build/tauri.

Linux

The script build.sh uses the Bash command interpreter and is made for operating systems/Linux distributions that use Debian packages (.deb) to install their applications. It can be run using one of the following methods:

# Running it with Bash directly
bash build.sh

Or

# Grant executable permission to the script
chmod +x build.sh
# Then run it
./build.sh

Windows

The script build.ps1 was made to be run in the Windows operating system using PowerShell. Run it with the following command:

.\build.ps1

Notice: The execution policy might need to be changed so that PowerShell may run this script successfully. To do this, run this command:

Set-ExecutionPolicy Bypass -Scope Process

And then try to run the script.

This command configures the execution policy so that whatever script can be run (Bypass) during the current PowerShell session (-Scope Process).

After running the script, closing and opening the terminal again resets the configuration made by the command above.

More information: about_Execution_Policies (Microsoft)

Compiling and running the projects manually

It is possible to run the projects manually as well. To do this, change directories to the root of each project and run the adequate commands.

Before doing so, install each project's dependencies:

# Change the path below for the correct one
cd directory/of_Tauri/or_Electron/Project

# This installs the dependencies
npm install

Tauri Projects

# Runs the application in the development environment:
npm run tauri dev

# Builds installers for the app:
npm run tauri build

Files generated by the tauri build command are in {repository root}/target/release/bundle.

• Linux: {repository root}/target/release/bundle/deb/, .deb files (for Linux distributions that use Debian packages)

• Windows: {repository root}/target/release/bundle/msi/, .msi files

Electron projects

# Runs the application in the development environment:
npm run start

# Builds installers for the app:
npm run make

Files generated by the make command are in {electron project root}/out/make.

• Linux: {electron project root}/out/make/deb/x64/, .deb files. (if .deb packages were made).
• Windows: {electron project root}/out/make/squirrel.windows/x64/, .exe files.

On Linux, specifying the --targets parameter on the make command may be necessary to make it work. For instance:

npm run make -- --targets=@electron-forge/maker-deb

By doing this, compiling to other distributions not based on Debian and using your own compiler with Electron Forge is also possible. More information on the Official Documentation.

Applications in this repository

Hello World

Application that shows the text "Hello World!" on the screen.

• Tauri: /hello-world/tauri-hello-world/
• Electron: /hello-world/electron-hello-world/

Image Demo

Application that loads many images on the screen from the website Lorem Picsum

• Tauri: /image-demo/tauri-image-demo/
• Electron: /image-demo/electron-image-demo/

Lottie Demo

Application that loads many Lottie animations stored in JSON files.

• Tauri: /lottie-demo/tauri-lottie-demo/
• Electron: /lottie-demo/electron-lottie-demo/

Note about workspaces

The Cargo packages in this repository are all in the same Cargo workspace, this can be seen in Cargo.toml. This was done to save time, as downloading the dependencies for all these packages can be done once.

However, the NPM packages are not in one NPM workspace, because Electron Forge, when running the package command inside a workspace, cannot find (without further configuration and more dependencies) the Electron executable, since it is not in the package's root anymore.

Because of this, all NPM dependencies need to be downloaded separately and repeatedly (like in the automation script), and all Cargo dependencies are downloaded at the same time and only once on the first build command (in this case, tauri build).

About this repository/conclusion

This project was developed for my final year project/Capstone course (or at least that's what Wikipedia tells me a TCC is called in english).

In the end, the comparisons that were made have confirmed how Tauri uses much less storage space than Electron, and many performance differences between platforms could be observed.

However, CPU usage, memory usage, GPU usage, and frame rates are dependant on the underlying browser that each framework uses. These browsers can range from being different to similar. On Linux, if you compare an Electron app and a Tauri app, the underlying browsers will be Chromium for Electron and WebKitGTK for Tauri, different. On Windows, they will be Chromium for Electron and WebView2 for Tauri, Webview2 is based on Chromium, and this makes them very similar. This inconsistency makes these metrics not relevant for comparing both frameworks if they are individually observed and not put under the same umbrella of platform-specific differences.