Open
Description
Native Application Framework Recommendation for Betaflight Configurator
Executive Summary
Based on the analysis of available options for converting the Betaflight Configurator PWA into a native application with mDNS support across multiple platforms, and considering that serial communication code needs to be implemented from scratch, we recommend a hybrid approach using Electron for desktop platforms and Capacitor for mobile support if both are required.
Background
- Current application is a PWA using Vue3 components
- Previous NW.js serial code has been removed and needs new implementation
- Requires support for WebSerial, WebBluetooth, WebSockets
- Needs to restore mDNS functionality
- Target platforms include Windows, macOS, Linux, and potentially Android
Framework Comparison
Feature | Electron | Tauri | Capacitor/PWA Builder |
---|---|---|---|
Desktop Support | ✅ Excellent | ✅ Excellent | ✅ Good |
Mobile Support | ❌ None | 🔜 In development | ✅ Excellent |
mDNS Implementation | ✅ Single implementation via Node.js | ❌ Multiple platform-specific plugins | |
Serial Implementation | ✅ Via Node.js serialport | ❌ Multiple platform-specific plugins | |
WebBluetooth | ✅ Full support | ||
App Size | ❌ Large (~100-200MB) | ✅ Small (~10-20MB) | ✅ Moderate |
Performance | ✅ Efficient | ✅ Good | |
Development Complexity | ✅ Low (familiar web stack) |
Serial Communication Considerations
Since serial code needs to be implemented from scratch:
Electron
- Implement using
serialport
Node.js package - Well-documented with extensive community support
- Works consistently across all desktop platforms
- Example implementation:
<textarea data-mprt="7" class="inputarea monaco-mouse-cursor-text" wrap="off" autocorrect="off" autocapitalize="off" autocomplete="off" spellcheck="false" aria-label="The editor is not accessible at this time. To enable screen reader optimized mode, use Shift+Alt+F4" aria-required="false" tabindex="0" role="textbox" aria-roledescription="editor" aria-multiline="true" aria-autocomplete="none" style="cursor: text; background-color: transparent; border: none; color: transparent; margin: 0px; min-height: 0px; min-width: 0px; overflow: hidden; padding: 0px; position: absolute; resize: none; z-index: -10; outline: none !important; tab-size: 33.6875px; font-family: "Droid Sans Mono", "monospace", monospace; font-weight: normal; font-size: 14px; font-feature-settings: "liga" 0, "calt" 0; font-variation-settings: normal; line-height: 1px; letter-spacing: 0px; top: 10px; left: 8px; width: 1px; height: 1px;"></textarea>const { SerialPort } = require('serialport');const port = new SerialPort({ path: '/dev/tty-usbserial1', baudRate: 115200 });
Tauri
- Implement using Rust's serialport libraries
- Expose functions to JavaScript via Tauri commands
- Potentially better performance but higher development complexity
Capacitor
- Requires platform-specific native plugins
- For Android: implementation using Android's USB Serial API
- For desktop: separate implementations for each OS
Recommendation
Primary Recommendation: Hybrid Approach
Desktop Platforms: Use Electron
- Provides simplest path for both mDNS and serial via Node.js
- Extensive ecosystem for hardware integration
- Lower development complexity for implementing new serial code
Mobile Platform (Android): Use Capacitor
- Create platform-specific implementations for serial and mDNS
- Share core application logic between platforms
Implementation Strategy
Serial Communication Layer:
- For Electron: Implement using Node.js
serialport
package - For Capacitor/Android: Create custom plugin using Android USB Serial API
- Design common JavaScript interface to abstract platform differences
- For Electron: Implement using Node.js
mDNS Implementation:
- For Electron: Use
bonjour-service
or similar Node.js package - For Capacitor/Android: Create custom plugin using Android NSD
- For Electron: Use
Architecture:
- Create platform detection module to load appropriate implementations
- Design modular hardware access APIs that can be swapped based on platform
Next Steps
- Create proof-of-concept for serial communication in Electron
- Evaluate effort required for Android implementation if mobile support is needed
- Design common abstraction layer for hardware access
- Begin implementation of mDNS discovery services