Change-My-Mind: Hybrid Architecture (Flet-Web Launcher + Desktop Sub-Apps)

[GroveGuard]

Hybrid Architecture: Flet-Web Launcher + Desktop Sub-Apps

1. Why Hybrid?

• Single Codebase
  Your existing Flet-Web launcher and Sub-Apps remain Python code talking HTTP/WebSocket.
• Native Windows & Processes
  By wrapping it in Electron or Tauri, you can spawn OS processes on button-click, each in its own window.
• Automatic Cleanup
  When a window closes, you kill its Python process, reclaiming memory and tearing down UI state completely.

---

2. Electron-Based Launcher

2.1 Architecture

+--------------------------+
| Launcher (Electron App)  |  ← Node.js + Chromium
|  ├─ Main Process         |     • Manages windows & subprocesses
|  └─ Renderer Process     |     • Renders your Flet-Web UI
+-----------+--------------+
            |
            |  onClick “Subapp”
            |
    +-------v--------+      +-----------------------------+
    | spawn(“python  |----->| Sub-App Process:            |
    |  run Subapp”)|      |  • uvicorn flet Web-Server  |
    |  window.loadURL|      |  • listens on e.g. localhost:9001 |
    +----------------+      +-----------------------------+

2.2 Key Code Snippets

Main Process (main.js)

const { app, BrowserWindow, ipcMain } = require('electron');
const { spawn } = require('child_process');

ipcMain.handle('open-app', (evt, appName) => {
  const port = { Subapp: 9001, planungsliste: 9002 }[appName];
  const proc = spawn('python', ['-m', 'uvicorn', `${appName}:app`, '--port', port]);
  let win = new BrowserWindow({ webPreferences: { preload: 'preload.js' } });
  win.loadURL(`http://127.0.0.1:${port}`);
  win.on('closed', () => proc.kill());
});

Preload Script (preload.js)

const { contextBridge, ipcRenderer } = require('electron');
contextBridge.exposeInMainWorld('electronAPI', {
  openApp: (name) => ipcRenderer.invoke('open-app', name)
});

Flet Launcher Button (in Python)

ft.ElevatedButton("Subapp", on_click=lambda e: page.run_js("electronAPI.openApp('Subapp')"))

---

3. Tauri-Based Launcher

3.1 Architecture

+-------------------------+
| Launcher (Tauri App)    |  ← Rust + WebView
|  ├─ Rust Core           |     • Spawns/kills Python processes
|  └─ Web Frontend        |     • Loads your Flet-Web UI
+-----------+-------------+
            |
            |  invokeTauri("open_app", name)
            |
    +-------v--------+      +-----------------------------+
    | Rust Command   |----->| Sub-App Process:            |
    |  std::process::Command("python", …) |  
    +----------------+      +-----------------------------+

3.2 Lifecycle

• Rust command spawns process + window.
• Web frontend (Flet) invokes Rust command via JS.
• Rust tracks PID and kills it on window close.

---

4. Pure PWA / Service-Worker Approach

• All Sub-Apps run on different HTTP ports.
• Launcher opens tabs using window.open.
• Uses service worker to detect tab close and send shutdown requests.
• Less reliable cleanup; can't enforce OS-level process teardown.

---

5. Trade-Offs and Recommendations

Aspect	Electron/Tauri	Pure PWA/Service-Worker
True Process Isolation	✔️ each Sub-App is its own OS process	❌ all run in same server or shared process
Cleanup Guarantee	✔️ window close reliably kills process	⚠️ relies on signals from browser
User Experience	✔️ Native windows, desktop menus	✔️ just browser tabs
Package Size	❌ large (Electron runtime)	✔️ lightweight browser
Implementation Effort	⚠️ moderate (Node/Rust + IPC wiring)	✔️ minimal (JS + HTTP endpoints)

---

Bottom Line

• Electron/Tauri = true desktop windows + process isolation with your existing Flet launcher.
• PWA = browser-based convenience, but unreliable cleanup.

What do you think?