Tauri
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 backend of the application is a Rust binary with an API that the frontend can interact with.
Installation method
Xcode
$ xcode-select --installRust
$ curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh If an error is reported during the installation process curl: (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:789To make sure Rust is 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 reported An unexpected error occurred: "https://registry.yarnpkg.com/create-vite: tunneling socket could not be established
Similarly, you need to open 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 Web front-end framework, create-tauri-app create a template project based on your input, then you can go directly to check tauri info
start up
$ yarn tauri devPack
$ yarn tauri buildElectron
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.json , the "main" field is main.js , your package.json should 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 the package.json configuration field scripts , add start the 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 startPack
Add Electron Forge as a development dependency of the application
$ cnpm install --dev @electron-forge/cli
$ npx electron-forge importmake uses Forge's commands to create a package
$ yarn run makeDifference between the two
- comparing the size
- As mentioned in the official introduction of Electron, it is based on Node.js and Chromium. There are obvious problems. The decision to use Chromium because the package is too large (62.5mb) 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, and the package is very small (4.32MB)
- official documentation
- Electron's official documents and community iterations are relatively stable at present, and multiple versions have been released, which can be used stably in production
- Tauri is a new desktop development framework. Version 1.0.0 has not been released yet. You can continue to pay attention and try to make some gadgets.
Summarize
As a new desktop development framework, Tauri has stepped on the shoulders of the two giants Rust and WebView2. It can be said that it is a product of the times. Rust has been very popular in recent years. Deno adopts Rust, Microsoft embraces Rust, etc., and Microsoft has Start to promote WebView2, a natural advantage
Epilogue
If you think this content is very inspiring to you, don't forget to like + follow
Welcome to add my personal WeChat: Jiang9684, note nickname + [job or professional], example Faker-front-end, pass faster, let's exchange front-end technology together
程序员
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。