Building a Rust/Electron app

rust_electron.md

Links

Workflow:

• Node version manager on Windows: https://github.com/coreybutler/nvm-windows
• Node version manager on Linux/macOS: https://github.com/nvm-sh/nvm
• Docker and nodejs: https://hackernoon.com/a-better-way-to-develop-node-js-with-docker-cd29d3a0093

React and TypeScript:

• Create a TypeScript based React app: https://create-react-app.dev/docs/adding-typescript
• React + TypeScript cheatsheet: https://github.com/typescript-cheatsheets/react-typescript-cheatsheet

Electron:

• Electron: https://electronjs.org/
• Electron Fiddle, Electron playground without installing dependencies: https://github.com/electron/fiddle
• Electron boilerplates for different frameworks/toolchains: https://github.com/sindresorhus/awesome-electron#boilerplates

Apps

• React Native (Android & iOS): https://reactnative.dev/
• React Native for Windows (Windows & macOS): https://microsoft.github.io/react-native-windows/
• UI Kitten (UI components for React Native): https://akveo.github.io/react-native-ui-kitten/

Rust communication

• Rust native RPC using bincode: https://crates.io/crates/tarpc

Rust and NodeJs/Electron:

• Fast Electron app with rust: https://keminglabs.com/blog/building-a-fast-electron-app-with-rust/
• Neon: Rust/Js bindings, Writing a node.js module with rust: https://neon-bindings.com/

Efficient transfer between main and worker:

• https://nodeaddons.com/how-not-to-access-node-js-from-c-worker-threads/
• https://joji.me/en-us/blog/performance-issue-of-using-massive-transferable-objects-in-web-worker/
• https://developers.google.com/web/updates/2011/12/Transferable-Objects-Lightning-Fast
• https://community.risingstack.com/using-buffers-node-js-c-plus-plus/

Rendering:

• Three.js: https://threejs.org/
• Three.js in Electron
• React Three.js component: https://github.com/react-spring/react-three-fiber
• Manual React and Three.js: https://blog.bitsrc.io/starting-with-react-16-and-three-js-in-5-minutes-3079b8829817

Frameworks:

• Svelte: https://svelte.dev/
• React vs Angular: https://programmingwithmosh.com/react/react-vs-angular/
• React vs Vue: https://medium.com/javascript-in-plain-english/i-created-the-exact-same-app-in-react-and-vue-here-are-the-differences-e9a1ae8077fd
• React: https://reactjs.org/
• Building an Electron app with React: https://www.freecodecamp.org/news/building-an-electron-application-with-create-react-app-97945861647c/
• Electron React Boilerplate: https://github.com/electron-react-boilerplate/electron-react-boilerplate

UI component libs for React:

• Blueprint: https://blueprintjs.com/
• Evergreen: https://evergreen.segment.com/
• Material UI: https://material-ui.com/
• Semantic UI: https://react.semantic-ui.com/
• ProtonKit: https://react-photonkit.github.io/#/
• Ant Design: https://ant.design/
• Prime React: https://www.primefaces.org/primereact/#/
• Controlkit: https://github.com/automat/controlkit.js?files=1
• React Color (color pickers for react) https://github.com/casesandberg/react-color

Setting up projects / Example workflows

• Install latest node.js
• Install yarn: npm install -g yarn@berry

Installing node on Linux

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.2/install.sh | bash

Restart terminal source new enviornment

nvm install 6.14.4  # or latest version number
nvm use node

Create React/Typescript app

yarn create react-app my-app --template typescript
cd my-app
yarn upgrade
yarn start

with yarn2:

yarn dlx create-react-app my-app --template typescript
cd my-app
yarn install
yarn up
yarn start

Create Electron/React app

git clone --depth 1 --single-branch --branch master https://github.com/electron-react-boilerplate/electron-react-boilerplate.git your-project-name
cd your-project-name
yarn upgrade
yarn dev

Electron React Boilerplate hat bug mit windows 10 dark mode wenn du mit yarn dev starten willst. Wenn du Theme auf Hell stellst, dann funktioniert alles richtig. Ansonsten ist hier der bug report.

@digitalillusions Wtf 😂