mirror of
https://github.com/The-Low-Code-Foundation/OpenNoodl.git
synced 2026-01-12 07:12:54 +01:00
335 lines
20 KiB
Markdown
335 lines
20 KiB
Markdown
# 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:
|
||
|
||
1. **Target-specific node libraries** (Capacitor Camera, Electron File System, etc.)
|
||
2. **Conditional runtime injection** (Capacitor bridge, Node.js integration)
|
||
3. **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
|
||
|
||
```typescript
|
||
// 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](../01-byob-backend/README.md) | 4-6 weeks | 🔴 Critical | HTTP Node |
|
||
| **B** | [Capacitor Mobile Target](../02-capacitor-mobile/README.md) | 4-5 weeks | 🔴 High | Phase A |
|
||
| **C** | [Electron Desktop Target](../03-electron-desktop/README.md) | 3-4 weeks | 🟡 Medium | Phase A |
|
||
| **D** | [Chrome Extension Target](../04-chrome-extension/README.md) | 2-3 weeks | 🟢 Lower | Phase A |
|
||
| **E** | [Target System Core](../05-target-system/README.md) | 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:**
|
||
1. **Phase A (BYOB) and Phase E (Target System)** can proceed in parallel as foundation
|
||
2. **Phase B (Capacitor)** is highest user priority - mobile apps unlock massive value
|
||
3. **Phase C (Electron)** leverages existing `noodl-platform-electron` knowledge
|
||
4. **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](../01-byob-backend/README.md) - Extensive backend flexibility documentation
|
||
- [Capacitor Mobile Target](../02-capacitor-mobile/README.md) - Mobile app deployment
|
||
- [Electron Desktop Target](../03-electron-desktop/README.md) - Desktop app deployment
|
||
- [Chrome Extension Target](../04-chrome-extension/README.md) - Browser extension deployment
|
||
- [Target System Core](../05-target-system/README.md) - 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)
|