RFC-0002: Frontend Architecture

Metadata Value
Status Accepted
Created 2025-02-13
Updated 2026-04-17
Author LessUp Team
Category Architecture

Context

The frontend is a vanilla JavaScript WebRTC client with modular architecture. No build tools, no frameworks — just pure ES6+ modules served directly by the Go HTTP server.

Decision

Technology Stack

Module Architecture

1
2
3
4
5
6
7
8
9
10

web/
├── index.html              # UI structure
├── app.js                  # Main entry point, initialization
├── app.config.js           # Configuration and capability detection
├── app.media.js            # Media stream handling
├── app.peers.js            # PeerConnection management
├── app.signaling.js        # WebSocket signaling
├── app.ui.js               # UI rendering
├── app.stats.js            # Connection statistics
└── styles.css              # Responsive styles

Module Responsibilities

app.config.js

Configuration and capability detection.

Exports:

app.media.js

Media stream handling.

Exports:

app.peers.js

PeerConnection management for Mesh topology.

Exports:

app.signaling.js

WebSocket signaling connection.

Exports:

app.ui.js

UI rendering and state management.

Exports:

app.stats.js

Connection statistics monitoring.

Exports:

State Management

Global state object:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

state = {
    myId: string,              // Unique client ID
    ws: WebSocket | null,      // WebSocket connection
    roomId: string,            // Current room name
    roomState: string,         // 'idle' | 'connecting' | 'joined' | 'reconnecting' | 'calling'
    localStream: MediaStream,  // Local media
    screenStream: MediaStream, // Screen share stream
    usingScreen: boolean,      // Currently screen sharing
    muted: boolean,            // Audio muted
    cameraOff: boolean,        // Video disabled
    peers: Map<string, Peer>,  // Peer connections
    recorder: MediaRecorder,   // Active recorder
    recordedChunks: Blob[],    // Recording data
}

Event Handling

Event Trigger Action
join.click Room input filled connectWS()
call.click Peer selected startCall(peerId)
hangup.click Active call closePeer() or closeAllPeers()
mute.click Local stream Toggle audio track
camera.click Local stream Toggle video track
screen.click In room Toggle screen share

Consequences

Positive:

Trade-offs: