Background
We recently decided to develop an open-source desktop application (keeping it a secret for now, but stay tuned! Follow to avoid missing out!), and chose Tauri as our tech stack. It's a lesser-known option for most people, but for those interested, let's dive deeper!
Introduction to Tauri
- Official Website: https://tauri.app/ (v2.0)
- GitHub: https://github.com/tauri-apps/tauri (84k Stars)
Official Description: Create small, fast, secure, and cross-platform applications
Simple Understanding
Tauri is a cross-platform desktop application framework that allows developers to use familiar web technologies (like HTML, CSS, JS, and frameworks such as Vue.js, Svelte, React, SolidJS, Angular, Preact, etc.) to easily build desktop applications.
For us web developers looking to delve into desktop application development, Tauri is a great choice, without the steep learning curve. Web technologies have become one of the most powerful UI tools, running seamlessly on platforms with web browsers. With Tauri, we can design the UI exactly as we would on the web, meaning we can continue using our familiar web development skills to create amazing and user-friendly interfaces.
In some cases, desktop applications perform better than web apps. One of the key reasons for choosing desktop applications is that web apps are often limited by the native APIs available within a browser and can't interact with the operating system in the way desktop apps can (e.g., we can't access the file system or read clipboard data with web apps). Desktop applications can interact more deeply with the operating system's APIs and can be optimized for performance with more efficient languages (e.g., Rust). So, if a framework can combine the flexibility of a web UI with full access to native APIs, it is the perfect choice.
Tauri combines two major ecosystems and provides access to native APIs, creating a more complete developer experience.
The architecture of Tauri consists of two core components:
- The frontend, built with Web technologies
- The backend, developed using the Rust programming language, called Tauri Core.
The frontend allows us to use the Web technologies we are comfortable with (like React and Vue) to create flexible and visually appealing UIs, while the Rust backend opens the door to native APIs through inter-process communication (e.g., clipboard access or file system operations). Thanks to Rust’s performance, even computationally intensive tasks can be efficiently and smoothly handled.
This is why we believe Tauri is the ideal choice for building cross-platform desktop apps based on web technologies (our tech stack decision).
VS Electron
Introduction to Electron
- Electron Website: https://www.electronjs.org/ (v33.0)
- GitHub: https://github.com/electron/electron (114k Stars)
At this point, we must mention Electron, which might be the most popular cross-platform framework today. The iteration of its versions and the number of stars it has accumulated speaks for itself. Electron has proven its value by being the foundation of many well-known applications. The Electron apps directory is a showcase of its wide usage and powerful functionality, with a community that highly acknowledges Electron's achievements.
Before diving into any technical details, I think it’s important to compare Electron with other frameworks, so we can better assess which framework best fits our needs.
State of JavaScript User Data Comparison
To make a fair comparison, let’s take a look at the State of JavaScript survey data. It covers various aspects such as usage, awareness, retention, enthusiasm, etc.
Survey data link: https://2023.stateofjs.com/zh-Hans/libraries/mobile_desktop/
- Usage
- Awareness
- Interest
- Retention
- Enthusiasm
Technical Comparison
Regarding the technical comparison, I’m still getting started, so I can’t offer too much advice, but many people online have provided comparison results. Let’s take a look.
Here’s a comparison table between ElectronJS and Tauri, showing their differences across multiple dimensions:
| Feature | ElectronJS | Tauri |
|---|---|---|
| Framework Size | Large application size, usually over 100MB | Much smaller application size, typically under 10MB |
| Memory Usage | High memory usage, each app instance requires more memory | Lower memory usage, uses fewer resources |
| Tech Stack | Based on Chromium and Node.js (bundles the entire browser runtime) | Based on WebView and Rust (no need to bundle the entire browser) |
| Performance | Lower performance due to bundling Chromium | Higher performance with native WebView component |
| API Access | System APIs available via Node.js | Rust backend provides easy access to native OS APIs |
| Security | Must be careful about communication between Node.js and web content | More secure by default, with strict security policies |
| Packaging & Publishing | Requires electron-builder or electron-forge for packaging | Built-in packaging tools (AppImage, DMG, EXE), no external dependencies |
| Supported Languages | JavaScript, TypeScript | JavaScript, TypeScript (frontend) and Rust (backend) |
| Ecosystem | Rich community and plugin ecosystem, many templates and tools | Growing community, stable official templates |
| Developer Experience | Strong documentation and community support, easy to start | Lightweight solution, documentation is complete but learning Rust may have a steeper curve |
| Cross-Platform Support | Supports Windows, macOS, Linux | Supports Windows, macOS, Linux, with easier optimizations for size and performance |
| Debugging Tools | Supports Chrome DevTools, easy to develop and debug | Supports DevTools, similar frontend debugging, but Rust debugging requires additional tools |
| Update Mechanism | Requires manual update configuration, like electron-updater | Built-in auto-update feature, simplified update process |
| Project Initialization | - Requires manual creation of npm projects, install Electron libraries. | - Provides a built-in CLI tool to quickly generate projects. |
| - Start from scratch, configure project structure manually. | - Uses official templates to automatically configure the project structure, reducing manual setup. | |
| Official Template Support | - Lacks official templates, relies on community-maintained boilerplates. | - Offers multiple official templates, supporting frameworks like React, Vue, Svelte, etc. |
Summary of Major Differences:
- Complexity: Tauri has built-in tools, official templates, and simplified configuration files; Electron requires more tools and dependencies, with fewer official templates.
- Size & Performance: Tauri is much lighter and performs better, making it ideal for resource-sensitive scenarios; Electron is heavier but has a more mature ecosystem.
- System API Access: Tauri provides more direct access to native OS APIs, ideal for apps that require native functionality; Electron relies on Node.js, needing extra configuration for system resource access.
- Packaging & Publishing: Tauri has more efficient and simple packaging, particularly when generating lightweight apps.
References for Comparison:
- Tauri VS. Electron - Real World Application
- Electron vs Tauri: Unexpected Results!
- Tauri vs. Electron: A Technical Comparison
- ElectronJS vs Tauri
- Tauri vs. Electron: A New Dawn in Desktop App Development
Conclusion
With the rapid development of Web technologies, developers are no longer limited to traditional native programming languages when building desktop apps. Tauri, as a lightweight, cross-platform desktop application framework, perfectly combines the flexibility of web development with the power of desktop apps. It opens the door to desktop development for developers familiar with front-end technologies without the steep learning curve. In this article, we explored why Tauri is an ideal choice for web developers, as it not only leverages existing web skills but also enables seamless access to native APIs, making it easier to build outstanding desktop apps.
Open Source
Recently, I’ve been working on a project based on Tauri called Coco. It’s open source and under continuous improvement. I’d love your support—please give the project a free star 🌟!
This is my first Tauri project, and I’ve been learning while exploring. I look forward to connecting with like-minded individuals to share experiences and grow together!
- Official website: coco.rs/
- Frontend repo: github.com/infinilabs/coco-app
- Backend repo: github.com/infinilabs/coco-server
Thank you for your support and attention!
Top comments (0)