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

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