Technische Umsetzung der 90er-TV-Zeitleiste ohne Entwickler | Analyse

# Interaktive TV-Zeitlinie der 90er: Technische Umsetzung ohne Budget oder Entwickler

Ein Team aus Designern und Redakteuren, ohne einen einzigen hauseigenen Entwickler, hat ein groß angelegtes Webprojekt zur Evolution des russischen Fernsehens umgesetzt. Ein interaktives Haus mit 108 Fenstern, invertiertes Scrollen und ein maßgeschneidertes CMS wurden in nur sechs Monaten mit vanilla JavaScript bei Nullbudget erstellt. Wir zerlegen die technischen Lösungen, die stabile Performance sogar in Safari lieferten.

Framework-freie Architektur: Warum sie React abgelehnt haben

Das Projekt startete mit der bewussten Ablehnung moderner Frontend-Frameworks. Hauptgrund? Keine professionellen Entwickler im Team. Der Design-Lead, der die technische Umsetzung übernahm, verließ sich auf neuronale Netze als primäres Tool für die Code-Generierung. Vanilla JS war der einzige Weg, um Kontrolle über die Qualität des KI-generierten Codes zu gewährleisten.

Wichtige architektonische Entscheidungen:

• Invertiertes Scrollen via flex-direction: column-reverse
• Dynamische Zeitlinie mit Fischaugen-Effekt
• ES6-Module statt Bundles
• Eigener Videoplayer ohne Drittanbieter-Abhängigkeiten

Dieser Ansatz bot einen entscheidenden Vorteil: direktes Laden der Module im Browser ohne Hydration oder Laufzeit-Overhead. Beim initialen Rendering wiegen die Pakete nur 47 KB, im Vergleich zu typischen 200+ KB für React-Apps. Für ein Projekt mit hohen grafischen Anforderungen war das essenziell für die Performance.

Optimierung von Medieninhalten: Von 35 Sekunden auf 2,5

Die anfänglichen Ladezeiten der Seite lagen bei 35 Sekunden aufgrund von 108 hochauflösenden Innenraum-Bildern. Die Lösung umfasste mehrstufige Verarbeitung:

• Automatische Konvertierung von PNG zu WebP/AVIF beim Upload über das Admin-Panel
• Generierung von Blur-up-Vorschauen (50px Breite) für sofortiges visuelles Feedback
• Streaming-Bildverarbeitung statt In-Memory-Buffering
• Begrenzung paralleler Konvertierungen auf zwei Prozesse

// Fish-eye effect for timeline
const distanceFromCenter = Math.abs(timelineCenterY - elementCenterY);
if (distanceFromCenter < fishEyeRadius) {
    const ratio = 1 - (distanceFromCenter / fishEyeRadius);
    const scale = 1.0 + (maxScale - 1.0) * ratio;
    element.style.transform = `scale(${scale})`;
}

Der Knackpunkt war der OOM-Killer in Kubernetes: Sharp erschöpfte die Speicherlimits bei paralleler AVIF-Verarbeitung. Die Lösung bestand darin, den effort-Parameter auf 2 zu senken und auf Streaming-Verarbeitung umzusteigen. Ergebnis: Komprimierung eines 4,7 MB PNG auf 152 KB WebP (31-fach) ohne sichtbaren Qualitätsverlust.

Preloader als Teil des Konzepts

Der thematische Preloader mit TV-Statik wurde mit Canvas statt Videodateien umgesetzt. Das brachte drei zentrale Vorteile:

• Kein sichtbares Loopen (Rauschen generiert via Math.random())
• Kleinere Größe (310 Zeilen JS vs. 5+ MB für WebM)
• Wiederverwendbare Logik

// Generating static for the headline
function generateHeadlineNoise() {
    const frames = [];
    for (let i = 0; i < 4; i++) {
        frames.push(generateNoiseFrame());
    }
    document.documentElement.style.setProperty('--noise-frames', frames.join(','));
}

Der Preloader löst eine technische Herausforderung, indem er alle schweren Assets vor dem Anzeigen der Oberfläche sammelt. Das Haus erscheint sofort, ohne Texturunschärfe. Derselbe Rauschgenerierungsalgorithmus treibt ein Oster-Ei beim Hover über den Header an.

Backend: Vom JSON-File zu Kubernetes

Die anfängliche Einrichtung speicherte Daten in data.json auf einem 5$-VPS. Skalierung auf Enterprise-Infrastruktur erforderte:

• Ersetzen von JSON durch MariaDB
• Integration mit MinIO statt lokaler Speicherung
• Einrichtung von Nginx als Reverse-Proxy
• Anpassung an eine GitLab CI/CD-Pipeline

Der visuelle Editor im Admin-Panel erlaubt Designern, Inhalte direkt im Gitter zu bearbeiten – Fenster anklicken, Parameter anpassen. Das ist entscheidend für nicht-technische Teammitglieder. Alle Mediadateien werden automatisch verarbeitet: Sharp erzeugt WebP, AVIF und Blur-up-Vorschauen ohne menschliches Zutun.

Wichtigste Erkenntnisse

• Invertiertes Scrollen via column-reverse ist günstiger umzusetzen als JS-Animationen und funktioniert in allen Browsern
• Streaming-Bildverarbeitung verhindert OOM-Crashes sogar auf schwachen Servern
• Canvas statt Video für dynamische Effekte spart Bandbreite und verbessert die wahrgenommene Qualität
• Eigener Videoplayer ohne Bibliotheken verkleinert die Bundle-Größe um 120 KB
• Blur-up-Vorschauen erzeugen die Illusion von instantem Laden und sparen echte Bandbreite

Technischer Schuldenstand ist minimal: 92 % des Codes wurden beim ersten Versuch korrekt von neuronalen Netzen generiert, die restlichen 8 % waren manuelle Safari-Fixes. Die Übernahme moderner Tools (Kubernetes, AVIF) erfolgte ohne Budgeterhöhungen, dank der Unternehmensinfrastruktur. Die große Lektion: Selbst ein nicht-technisches Team kann ein komplexes Webprojekt mit dem richtigen Stack und Fokus auf Ressourcenoptimierung bauen.

— Editorial Team