Desktop & Mobile Applications with JavaScript

(Tauri is in Rust, but the frontend can be a js framework, that's why we're talking about it)

Desktop Applications

1. Electron (The historical standard)

Principle: Chrome + Node.js packaged in a native app

Famous Examples:

• VS Code, Discord, Slack, WhatsApp Desktop, Figma

Advantages:

• Huge ecosystem
• Reuses existing web code
• Complete native APIs

Disadvantages:

• Significant memory consumption (entire Chrome)
• App size (~150MB minimum)
• Lower performance than a native app

npm create electron-app@latest my-app

---

2. Tauri (The recommended modern alternative)

Principle: Rust backend + System WebView + JS Frontend

Advantages:

• 10x lighter than Electron (~10MB vs 150MB)
• Native performance (Rust)
• Enhanced security (sandboxing)
• Uses the system WebView (not the entire Chrome)

Disadvantages:

• Newer (ecosystem in development)
• Rust learning curve

npm create tauri-app@latest

Known Apps: GitKraken (migration in progress), several startups

---

3. PWA Desktop (Modern Web)

Principle: Web application installable as a native app

Advantages:

• Single web/desktop code
• Automatic update
• No app store needed

// manifest.json
{
  "name": "My App",
  "display": "standalone",
  "start_url": "/",
  "theme_color": "#000000"
}

Limitations: Limited system access

---

Mobile Applications

1. React Native (Market Leader)

Principle: JavaScript → Native components (not WebView)

Examples: Facebook, Instagram, Uber, Airbnb, Tesla

Advantages:

• Near-native performance
• Shared iOS/Android code (80%+)
• Gigantic React ecosystem
• Hot reload in development

Disadvantages:

• Specific learning curve
• Sometimes need native code

npx react-native@latest init MyApp
# or with Expo (recommended)
npx create-expo-app MyApp

---

2. Expo (Simplified React Native)

Principle: React Native + integrated development tools

Advantages:

• Ultra-fast development
• No need for Android Studio/Xcode
• Test on device via QR code
• OTA (Over-The-Air) updates

Disadvantages:

• Less control over native modules
• Larger app size

npx create-expo-app@latest MyApp
npx expo start

---

3. Ionic + Capacitor (Web to Mobile)

Principle: Web app + native plugins

Advantages:

• Reuses web skills (HTML/CSS/JS)
• One code → Web + iOS + Android
• Framework agnostic (React, Vue, Angular)

Disadvantages:

• WebView performance (less fluid)
• Less native look

npm install -g @ionic/cli
ionic start myApp tabs --type=react
ionic capacitor add ios android

---

4. PWA Mobile (Installable Web apps)

Principle: Website installable as an app

Advantages:

• Single web/mobile code
• No app store
• Instant update

Limitations:

• Limited APIs (especially iOS)
• Lower performance

// Service Worker for offline
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js');
}

---

5. NativeScript (Native Vue/Angular)

Principle: Vue/Angular → Native components

Advantages:

• Native performance
• Reuses Vue/Angular skills

Disadvantages:

• Smaller ecosystem
• Less popular