CodeCafé - editor open source untuk coding kolaboratif di browser

 (github.com/mrktsm)
11 poin oleh xguru 2025-05-15 | 3 komentar | Bagikan ke WhatsApp
  • Lingkungan pengembangan kolaboratif real-time berbasis browser yang dikembangkan untuk mengatasi keterbatasan alat kolaborasi berbasis dokumen yang kurang cocok untuk kelas atau pair programming
  • Dirancang untuk mematahkan anggapan bahwa "coding kolaboratif real-time itu rumit", melalui Zero Setup, real-time sejati, dan UI yang intuitif agar siapa pun bisa langsung coding bersama
  • Mendukung pratinjau real-time pixel-perfect: begitu kode HTML/CSS/JS ditulis, hasilnya langsung tercermin di WebView
  • Fitur kolaborasi: berbasis Operational Transformation sehingga banyak pengguna dapat mengetik secara bersamaan tanpa konflik
  • Editor bergaya VS Code: menggunakan Monaco Editor untuk menghadirkan antarmuka yang familier serta fitur autocomplete, penyorotan sintaks, dan penanda error
  • Termasuk terminal di browser berbasis Xterm.js untuk memeriksa input dan output
  • Berjalan tanpa instalasi: dapat langsung digunakan hanya dengan browser
  • Lisensi GNU AGPL 3.0

Tumpukan teknologi

  • Frontend: React, TypeScript, Tailwind CSS, Zustand, Xterm.js, Monaco Editor
  • Backend: Java Spring Boot, WebSocket, Jackson
  • Sinkronisasi real-time: algoritma Operational Transformation kustom
  • Pemrosesan pesan: pemrosesan data atomik melalui Redis + skrip Lua
  • Hosting: frontend di Vercel, backend di AWS EC2, Redis di ElastiCache

Operational Transformation (OT)

  • OT adalah teknologi inti yang memungkinkan pengeditan dokumen simultan secara real-time, dan Google Docs juga dibangun di atas dasar ini
  • CodeCafé mengimplementasikan OT secara langsung untuk mendukung hal berikut:
    • Deteksi dan transformasi input simultan
    • Menjaga intensi dan menyelesaikan konflik
    • Mempertahankan sinkronisasi status antar-klien
  • Dengan ini, pengalaman pengguna dalam lingkungan kolaborasi real-time menjadi alami dan mulus

Rencana ke depan

  • Autentikasi pengguna dan fitur penyimpanan proyek
  • Integrasi chat suara/teks
  • Fitur pemutaran ulang riwayat coding
  • Perluasan dukungan untuk berbagai bahasa

Bacaan terkait

3 komentar

 
kaydash 2025-05-16

Karena code server sudah ada, saya kurang paham apa pembeda utamanya
Tapi akan bagus jika ditambahkan chat dan pemutaran ulang riwayat coding
 
pcj9024 2025-05-15

Saya jadi teringat fitur Live Share di vscode.
Dulu bisa menaruh kode di obrolan real-time lalu mengeditnya bersama secara serentak juga.
Tapi saat dipakai untuk mentoring junior, kuliah online, atau diperkenalkan, ternyata tidak banyak yang benar-benar memakainya.
 
turastory 2025-05-15

Sama seperti Zed, saya juga tidak yakin seberapa besar sebenarnya kebutuhan untuk kerja bersama secara real-time. Sepertinya juga ada masalah bahwa semua orang yang bekerja harus menggunakan editor yang sama, dan karena ini perangkat lunak yang performa maupun pengalaman penggunanya benar-benar sangat penting..