Skip to content

mDNS support #4493

Open
Open
@haslinghuis

Description

@haslinghuis

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 ⚠️ Custom Rust implementation ❌ Multiple platform-specific plugins
Serial Implementation ✅ Via Node.js serialport ⚠️ Via Rust serialport crates ❌ Multiple platform-specific plugins
WebBluetooth ✅ Full support ⚠️ Variable by system WebView ⚠️ Variable by platform
App Size ❌ Large (~100-200MB) ✅ Small (~10-20MB) ✅ Moderate
Performance ⚠️ Higher resource usage ✅ Efficient ✅ Good
Development Complexity ✅ Low (familiar web stack) ⚠️ Medium-High (Rust knowledge) ⚠️ Medium (plugin development)

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

  1. 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
  2. Mobile Platform (Android): Use Capacitor

    • Create platform-specific implementations for serial and mDNS
    • Share core application logic between platforms

Implementation Strategy

  1. 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
  2. mDNS Implementation:

    • For Electron: Use bonjour-service or similar Node.js package
    • For Capacitor/Android: Create custom plugin using Android NSD
  3. Architecture:

    • Create platform detection module to load appropriate implementations
    • Design modular hardware access APIs that can be swapped based on platform

Next Steps

  1. Create proof-of-concept for serial communication in Electron
  2. Evaluate effort required for Android implementation if mobile support is needed
  3. Design common abstraction layer for hardware access
  4. Begin implementation of mDNS discovery services

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions