Hardship
What is Tauri?
Tauri is a framework for building small, fast binaries for all major desktop platforms. Developers can integrate any front-end framework that compiles to HTML, JS and CSS to build their user interface. The application's backend is a Rust binary with an API that the frontend can interact with.
installation method
Xcode
$ xcode-select --install
Rust
$ curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
If an error occurs during installationcurl: (7) Failed to connect to raw.githubusercontent.com port 443: Connection refused
Proxy needs to be enabled:
# 7890 和 789 需要换成你自己的代理端口
$ export https_proxy=http://127.0.0.1:7890 http_proxy=http://127.0.0.1:7890 all_proxy=socks5://127.0.0.1:789
To make sure Rust was installed successfully, run the following command
$ rustc --version
$rustc 1.59.0 (9d1b2106e 2022-02-23)
Start a new Tauri
$ yarn create tauri-app
When creating a project, if an error is reportedAn unexpected error occurred: "https://registry.yarnpkg.com/create-vite: tunneling socket could not be established
Similarly, you need to enable the proxy, use:
$ yarn config set proxy http://username:password@host:port
$ yarn config set https-proxy http://username:password@host:port
Follow the instructions to choose your favorite Webfront-end framework, create-tauri-appcreate a template project based on your input, and then you can go directly to checktauri info
start up
$ yarn tauri dev
Pack
$ yarn tauri build
Electron
What is Electron?
The Electron framework allows you to write cross-platform desktop applications using JavaScript, HTML, and CSS. It is based on Node.js and Chromium and is used by the Atom editor and many other applications.
installation method
create project
$ mkdir my-electron-app && cd my-electron-app
$ yarn init
Modify package.jsonthe "main" field to main.js, your package.jsonshould look like this:
{
"name": "my-electron-app",
"version": "1.0.0",
"description": "Hello World!",
"main": "main.js",
"author": "Jiang Chen",
"license": "MIT"
}
Electron
$ yarn add --dev electron
execute Electron. In package.jsonthe configuration field scripts, add startthe following command
{
"scripts": {
"start": "electron ."
}
}
Add main.js to the root directory
code show as below
// main.js
// Modules to control application life and create native browser window
const { app, BrowserWindow } = require('electron')
const path = require('path')
const createWindow = () => {
// Create the browser window.
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}
})
// and load the index.html of the app.
mainWindow.loadFile('index.html')
// Open the DevTools.
// mainWindow.webContents.openDevTools()
}
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(() => {
createWindow()
app.on('activate', () => {
// On macOS it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') app.quit()
})
// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.
Add index.html to the root directory
code show as below
<!--index.html-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
<meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'">
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
We are using Node.js <span id="node-version"></span>,
Chromium <span id="chrome-version"></span>,
and Electron <span id="electron-version"></span>.
<!-- You can also require other files to run in this process -->
<script src="./renderer.js"></script>
</body>
</html>
Add renderer.js to the root directory
code show as below
window.addEventListener('DOMContentLoaded', () => {
const replaceText = (selector, text) => {
const element = document.getElementById(selector)
if (element) element.innerText = text
}
for (const type of ['chrome', 'node', 'electron']) {
replaceText(`${type}-version`, process.versions[type])
}
})
start up
$ npm run start
Pack
Add Electron Forge as a development dependency for your application
$ cnpm install --dev @electron-forge/cli
$ npx electron-forge import
make uses the Forge command to create a package
$ yarn run make
difference between the two
-
Compare the sizes
-
The official introduction of Electron mentioned that it is based on Node.js and Chromium. The obvious problem is that the package is too large (62.5mb) and the decision to use Chromium is also to solve some compatibility problems that WebView cannot solve temporarily.
-
Tauri, the front end is through the system's WebView2, the back end uses Rust, the package is small (4.32MB)
-
official document
-
Electron's official documentation and community iterations are relatively stable at present, with multiple versions released, which can be used stably in production
-
Tauri is a new desktop development framework, version 1.0.0 is not out yet, you can continue to pay attention and try to make some small tools
Summarize
As a new desktop-side development framework, Tauri stepped on the shoulders of the two giants of Rust and WebView2. It can be said that it is a product of the times. Rust has been very popular in recent years. Deno adopted Rust, and Microsoft embraced Rust. Start to promote WebView2, natural advantages
epilogue
If you think this content is very inspiring to you, don't forget to like + follow
Welcome to add my personal WeChat: Jiang9684, remark nickname + [position or profession], example Faker-front-end, pass faster, let's exchange front-end technology together