mirror of
https://github.com/The-Low-Code-Foundation/OpenNoodl.git
synced 2026-01-12 07:12:54 +01:00
Multi-Target Deployment Initiative
Initiative ID: INITIATIVE-001
Priority: HIGH
Estimated Duration: 16-22 weeks
Status: Planning
Last Updated: 2025-12-28
Executive Summary
Transform Noodl from a web-only visual programming platform into a true multi-target development environment. Users will be able to build once and deploy to:
- Web (current) - Static sites, SPAs, PWAs
- Mobile (Capacitor) - iOS and Android native apps with device APIs
- Desktop (Electron) - Windows, macOS, Linux apps with file system access
- Browser Extension (Chrome) - Extensions with browser API access
Additionally, this initiative introduces BYOB (Bring Your Own Backend), enabling users to connect to any BaaS platform (Directus, Supabase, Pocketbase, Firebase, etc.) rather than being locked to a single provider.
Core Insight
Noodl's visual graph is already target-agnostic in principle. The nodes define what happens, not where it runs. Currently, tooling assumes web-only deployment, but the architecture naturally supports multiple targets through:
- Target-specific node libraries (Capacitor Camera, Electron File System, etc.)
- Conditional runtime injection (Capacitor bridge, Node.js integration)
- Target-aware export pipelines (different build outputs per target)
Strategic Value
| Target | Value Proposition |
|---|---|
| Capacitor | Mobile apps without learning Swift/Kotlin. Hot-reload preview. |
| Electron | Desktop apps with file access, offline capability, local AI (Ollama). |
| Chrome Extension | Browser tools, productivity extensions, content scripts. |
| BYOB | No vendor lock-in. Use existing infrastructure. Self-hosted options. |
Project Architecture
Current State
Graph Definition → Single Runtime (React/Web) → Single Deployment (Static Web)
Target State
┌─→ Web Runtime ─────→ Static Web / PWA
│
Graph Definition → Target Adapter ──┼─→ Capacitor Runtime → iOS/Android App
│
├─→ Electron Runtime ─→ Desktop App
│
└─→ Extension Runtime → Chrome Extension
↓
Backend Abstraction Layer
↓
┌───────────┬───────────┬───────────┬───────────┐
│ Directus │ Supabase │ Pocketbase│ Custom │
└───────────┴───────────┴───────────┴───────────┘
Target Selection System
Philosophy
The graph itself is largely target-agnostic—it's the nodes available and deployment output that differ. This enables maximum flexibility while maintaining focused UX.
User Experience Flow
1. Project Creation
┌─────────────────────────────────────────────────────────────────────┐
│ Create New Project │
├─────────────────────────────────────────────────────────────────────┤
│ │
│ Project Name: [My App ] │
│ │
│ Primary Target: │
│ ┌─────────────────────────────────────────────────────────────────┐ │
│ │ ○ 🌐 Web Application │ │
│ │ Static sites, SPAs, PWAs. Deploy anywhere. │ │
│ │ │ │
│ │ ● 📱 Mobile App (Capacitor) RECOMMENDED │ │
│ │ iOS and Android. Access camera, GPS, push notifications. │ │
│ │ │ │
│ │ ○ 🖥️ Desktop App (Electron) │ │
│ │ Windows, macOS, Linux. File system, local processes. │ │
│ │ │ │
│ │ ○ 🧩 Browser Extension │ │
│ │ Chrome extensions. Browser APIs, content scripts. │ │
│ └─────────────────────────────────────────────────────────────────┘ │
│ │
│ ⓘ You can add more targets later in Project Settings │
│ │
│ [Cancel] [Create Project] │
└─────────────────────────────────────────────────────────────────────┘
2. Adding Additional Targets (Project Settings)
┌─────────────────────────────────────────────────────────────────────┐
│ Project Settings → Targets │
├─────────────────────────────────────────────────────────────────────┤
│ │
│ PRIMARY TARGET │
│ ┌─────────────────────────────────────────────────────────────────┐ │
│ │ 📱 Mobile App (Capacitor) [Change] │ │
│ │ Determines default node palette and preview mode │ │
│ └─────────────────────────────────────────────────────────────────┘ │
│ │
│ ADDITIONAL TARGETS │
│ ┌─────────────────────────────────────────────────────────────────┐ │
│ │ ☑ 🌐 Web Application │ │
│ │ ☐ 🖥️ Desktop App (Electron) [Configure...] │ │
│ │ ☐ 🧩 Browser Extension [Configure...] │ │
│ └─────────────────────────────────────────────────────────────────┘ │
│ │
│ NODE COMPATIBILITY │
│ ⚠️ 3 nodes in your project are incompatible with some targets: │
│ • Camera Capture - Only Capacitor, Electron │
│ • Push Notification - Only Capacitor │
│ • File System Read - Only Electron, Extension │
│ │
│ [View Compatibility Report] │
│ │
└─────────────────────────────────────────────────────────────────────┘
3. Node Palette with Compatibility Badges
┌─────────────────────────────────────────────────────────────────────┐
│ Node Palette [🔍 Search] │
├─────────────────────────────────────────────────────────────────────┤
│ │
│ ▼ DEVICE & PLATFORM │
│ ┌─────────────────────────────────────────────────────────────┐ │
│ │ 📷 Camera Capture [📱] [🖥️] │ │
│ │ 📍 Geolocation [🌐] [📱] [🖥️] [🧩] │ │
│ │ 🔔 Push Notification [📱] │ │
│ │ 📁 File System Read [🖥️] [🧩] │ │
│ │ 📁 File System Write [🖥️] │ │
│ │ ⚙️ Run Process [🖥️] │ │
│ └─────────────────────────────────────────────────────────────┘ │
│ │
│ ▼ BROWSER EXTENSION │
│ ┌─────────────────────────────────────────────────────────────┐ │
│ │ 🗂️ Extension Storage [🧩] │ │
│ │ 📑 Browser Tabs [🧩] │ │
│ │ 💬 Content Script Message [🧩] │ │
│ └─────────────────────────────────────────────────────────────┘ │
│ │
│ ▼ DATA & BACKEND │
│ ┌─────────────────────────────────────────────────────────────┐ │
│ │ 📊 Query Records [🌐] [📱] [🖥️] [🧩] │ │
│ │ ➕ Create Record [🌐] [📱] [🖥️] [🧩] │ │
│ │ ✏️ Update Record [🌐] [📱] [🖥️] [🧩] │ │
│ │ 🌐 HTTP Request [🌐] [📱] [🖥️] [🧩] │ │
│ └─────────────────────────────────────────────────────────────┘ │
│ │
│ Legend: [🌐] Web [📱] Mobile [🖥️] Desktop [🧩] Extension │
└─────────────────────────────────────────────────────────────────────┘
4. Duplicate as Different Target
┌─────────────────────────────────────────────────────────────────────┐
│ Duplicate Project │
├─────────────────────────────────────────────────────────────────────┤
│ │
│ Source: My Mobile App (Capacitor) │
│ │
│ New Project Name: [My Mobile App - Web Version ] │
│ │
│ New Primary Target: │
│ ● 🌐 Web Application │
│ ○ 🖥️ Desktop App (Electron) │
│ ○ 🧩 Browser Extension │
│ │
│ COMPATIBILITY ANALYSIS │
│ ┌─────────────────────────────────────────────────────────────────┐ │
│ │ ✅ 47 nodes are fully compatible │ │
│ │ ⚠️ 3 nodes need attention: │ │
│ │ │ │
│ │ 📷 Camera Capture │ │
│ │ └─ Will use browser MediaDevices API (reduced features) │ │
│ │ │ │
│ │ 🔔 Push Notification │ │
│ │ └─ Will use Web Push API (requires HTTPS, user permission) │ │
│ │ │ │
│ │ 📁 File System Read │ │
│ │ └─ ❌ Not available in web. Will be disabled. │ │
│ └─────────────────────────────────────────────────────────────────┘ │
│ │
│ [Cancel] [Duplicate with Adaptations] │
└─────────────────────────────────────────────────────────────────────┘
Technical Implementation
// Project configuration model
interface NoodlProject {
// Existing fields
name: string;
components: Component[];
settings: ProjectSettings;
// NEW: Target Configuration
targets: TargetConfiguration;
// NEW: Backend Configuration (BYOB)
backends: BackendConfig[];
activeBackendId: string;
}
interface TargetConfiguration {
// Primary target determines default node palette and preview mode
primary: TargetType;
// Additional enabled targets
enabled: TargetType[];
// Per-target settings
web?: WebTargetConfig;
capacitor?: CapacitorTargetConfig;
electron?: ElectronTargetConfig;
extension?: ExtensionTargetConfig;
}
type TargetType = 'web' | 'capacitor' | 'electron' | 'extension';
interface WebTargetConfig {
pwa: boolean;
serviceWorker: boolean;
baseUrl: string;
}
interface CapacitorTargetConfig {
appId: string; // com.example.myapp
appName: string;
platforms: ('ios' | 'android')[];
plugins: string[]; // Enabled Capacitor plugins
iosTeamId?: string;
androidKeystore?: string;
}
interface ElectronTargetConfig {
appId: string;
productName: string;
platforms: ('darwin' | 'win32' | 'linux')[];
nodeIntegration: boolean;
contextIsolation: boolean;
permissions: ElectronPermission[];
}
interface ExtensionTargetConfig {
manifestVersion: 3;
name: string;
permissions: string[]; // chrome.storage, chrome.tabs, etc.
hostPermissions: string[];
contentScripts?: ContentScriptConfig[];
serviceWorker?: boolean;
}
Phase Overview
| Phase | Name | Duration | Priority | Dependencies |
|---|---|---|---|---|
| A | BYOB Backend System | 4-6 weeks | 🔴 Critical | HTTP Node |
| B | Capacitor Mobile Target | 4-5 weeks | 🔴 High | Phase A |
| C | Electron Desktop Target | 3-4 weeks | 🟡 Medium | Phase A |
| D | Chrome Extension Target | 2-3 weeks | 🟢 Lower | Phase A |
| E | Target System Core | 2-3 weeks | 🔴 Critical | Before B,C,D |
Recommended Execution Order
Phase E (Target System Core) ─┬─→ Phase B (Capacitor) ─┐
│ │
Phase A (BYOB Backend) ───────┼─→ Phase C (Electron) ──┼─→ Integration & Polish
│ │
└─→ Phase D (Extension) ─┘
Rationale:
- Phase A (BYOB) and Phase E (Target System) can proceed in parallel as foundation
- Phase B (Capacitor) is highest user priority - mobile apps unlock massive value
- Phase C (Electron) leverages existing
noodl-platform-electronknowledge - Phase D (Extension) is most niche but relatively quick to implement
Success Criteria
MVP Success (Phase A + B complete)
- Users can configure Directus/Supabase as backend without code
- Data nodes work with configured backend
- Schema introspection populates dropdowns
- Capacitor preview with hot-reload works
- Can export iOS/Android-ready Capacitor project
- Camera, Geolocation, and Push nodes work in Capacitor
Full Success (All phases complete)
- All four deployment targets working
- Seamless target switching in project settings
- Compatibility badges on all nodes
- Build-time validation prevents incompatible deployments
- "Duplicate as Target" feature works with adaptation analysis
- Multiple backends configurable per project
Risk Assessment
| Risk | Likelihood | Impact | Mitigation |
|---|---|---|---|
| Capacitor plugin complexity | Medium | High | Start with 3 core plugins, expand gradually |
| Backend abstraction leakiness | High | Medium | Accept platform-specific features won't abstract |
| Electron security concerns | Medium | High | Clear UI separation, sandboxed by default |
| Extension manifest v3 limitations | Medium | Medium | Document limitations, focus on popup use case |
| Scope creep | High | High | Strict phase gates, MVP-first approach |
Related Documentation
- BYOB Backend System - Extensive backend flexibility documentation
- Capacitor Mobile Target - Mobile app deployment
- Electron Desktop Target - Desktop app deployment
- Chrome Extension Target - Browser extension deployment
- Target System Core - Node compatibility and target selection
References
- Previous BYOB discussion: https://claude.ai/chat/905f39ae-973b-4c19-a3cc-6bf08befb513
- Existing deployment system:
packages/noodl-editor/src/editor/src/views/DeployPopup/ - Existing preview system:
packages/noodl-editor/src/frames/viewer-frame/src/views/viewer.js - Platform abstraction:
packages/noodl-platform-electron/ - TASK-002: Robust HTTP Node (prerequisite)