CodeCafé - Open-Source-Editor für kollaboratives Coding im Browser

 (github.com/mrktsm)
11 Punkte von xguru 2025-05-15 | 3 Kommentare | Auf WhatsApp teilen
  • Als browserbasierte Echtzeit-Entwicklungsumgebung für kollaboratives Arbeiten entwickelt, um die Grenzen bestehender dokumentbasierter Kollaborationstools zu überwinden, die sich für Unterricht oder Pair Programming nur bedingt eignen
  • Entwickelt, um mit dem Vorurteil „Echtzeit-Coding in Zusammenarbeit ist kompliziert“ zu brechen, und so gestaltet, dass dank Zero Setup, echter Echtzeit und intuitiver UI jede*r sofort gemeinsam coden kann
  • Pixelgenaue Echtzeitvorschau: Sobald HTML/CSS/JS-Code geschrieben wird, wird er sofort in der WebView angezeigt
  • Kollaborationsfunktionen: Auf Basis von Operational Transformation können mehrere Nutzer gleichzeitig ohne Konflikte Eingaben vornehmen
  • Editor im VS-Code-Stil: Vertraute Oberfläche auf Basis des Monaco Editor mit Autovervollständigung, Syntax-Highlighting und Fehleranzeige
  • Enthält ein browserbasiertes Terminal auf Basis von Xterm.js zur Überprüfung von Ein- und Ausgabe
  • Ohne Installation nutzbar: Mit einem Browser sofort einsatzbereit
  • GNU AGPL 3.0-Lizenz

Technologie-Stack

  • Frontend: React, TypeScript, Tailwind CSS, Zustand, Xterm.js, Monaco Editor
  • Backend: Java Spring Boot, WebSocket, Jackson
  • Echtzeit-Synchronisierung: Eigener Operational-Transformation-Algorithmus
  • Nachrichtenverarbeitung: Atomare Datenverarbeitung mit Redis + Lua-Skripten
  • Hosting: Frontend auf Vercel, Backend auf AWS EC2, Redis auf ElastiCache

Operational Transformation (OT)

  • OT ist die Schlüsseltechnologie, die gleichzeitige Echtzeitbearbeitung von Dokumenten ermöglicht; auch Google Docs basiert darauf
  • CodeCafé implementiert OT selbst und unterstützt damit Folgendes:
    • Erkennung und Transformation gleichzeitiger Eingaben
    • Wahrung der Intention und Konfliktlösung
    • Aufrechterhaltung der Zustandssynchronisierung zwischen Clients
  • Dadurch wird in kollaborativen Echtzeitumgebungen eine natürliche und flüssige User Experience geboten

Weitere Pläne

  • Nutzerauthentifizierung und Projektspeicherung
  • Integration von Sprach-/Textchat
  • Wiedergabefunktion für die Coding-Historie
  • Erweiterte Unterstützung für verschiedene Programmiersprachen

Verwandte Beiträge

3 Kommentare

 
kaydash 2025-05-16

Es gibt bereits code server, daher ist mir der Unterschied nicht ganz klar,
aber wenn Chat und die Wiedergabe des Coding-Verlaufs hinzukommen, wäre das wohl gut.
 
pcj9024 2025-05-15

Das erinnert mich an die Funktion Live Share in VS Code.
Man konnte Code in einen Echtzeit-Chat stellen und gleichzeitig gemeinsam bearbeiten.
Aber wenn ich damit Junioren mentoriert, Online-Kurse gegeben oder es empfohlen habe, haben es am Ende doch nicht viele wirklich genutzt.
 
turastory 2025-05-15

Wie bei Zed frage ich mich, wie groß die Nachfrage nach Echtzeit-Zusammenarbeit tatsächlich ist. Es scheint auch das Problem zu geben, dass alle Beteiligten denselben Editor verwenden müssen, und da es sich um Software handelt, bei der Leistung und Benutzererfahrung wirklich entscheidend sind, ...