Pernah kebayang gimana Google Docs bisa dipakai bareng-bareng sama temen, terus semua orang bisa ngetik di saat yang sama? Nah, fitur kayak gitu bisa kamu bikin sendiri lho di aplikasi kamu dan salah satu alat yang bisa bantu mewujudkannya adalah Yjs.
Apa Itu Yjs?
Yjs adalah library open source berbasis JavaScript yang bikin kamu bisa bangun fitur kolaborasi real-time dengan performa tinggi. Gak cuma cepat, Yjs juga hemat bandwidth dan tetap jalan meski koneksi putus nyambung. Kok bisa? Karena Yjs pakai teknologi CRDT (Conflict-free Replicated Data Types), yang bisa nyinkronin data antar pengguna tanpa ribet nyelesaikan konflik manual.
Intinya, kalau kamu pakai Yjs, semua pengguna bisa ngedit konten secara barengan dan perubahan akan langsung nyebar ke semua orang. Bahkan kalau lagi offline, perubahan tetap disimpan dan nanti otomatis disinkronin pas koneksi balik lagi.
https://yjs.dev
Fitur Utama Yjs
- Kolaborasi Real-Time
Yjs memungkinkan banyak pengguna untuk mengedit data secara bersamaan dengan latensi yang sangat rendah.
- Dukungan Offline & Sinkronisasi Otomatis
Pengguna tetap bisa melakukan perubahan secara offline. Setelah kembali online, Yjs akan menyinkronkan semua perubahan dengan mulus.
- Integrasi Mudah dengan Editor Populer
Yjs menyediakan integrasi untuk editor teks seperti ProseMirror, CodeMirror, Quill, dan Slate. Ini memungkinkan developer membangun aplikasi kolaboratif tanpa harus membangun dari nol.
- Efisiensi Bandwidth
Yjs mengompresi data dengan sangat baik dan hanya mengirim delta (perubahan), bukan seluruh dokumen.
- Modular & Ekstensibel
Yjs bersifat modular. Kamu bisa memilih provider komunikasi (misalnya WebSocket, WebRTC, atau lainnya) dan menyimpannya ke dalam berbagai jenis database seperti IndexedDB atau LevelDB.
Bagaimana Cara Kerjanya?
Yjs menggunakan CRDT untuk merepresentasikan struktur data seperti teks, array, map, dan XML. Ketika seorang pengguna mengubah data, perubahan tersebut dicatat dan dikirim ke pengguna lain dalam bentuk update yang sangat ringan. Karena menggunakan CRDT, konflik perubahan bisa diselesaikan secara otomatis dan deterministik.
Contoh implementasi real-time collaborative editor:
import * as Y from 'yjs'
import { WebrtcProvider } from 'y-webrtc'
import { QuillBinding } from 'y-quill'
import Quill from 'quill'
const ydoc = new Y.Doc()
const provider = new WebrtcProvider('nama-room-kolaboratif', ydoc)
const ytext = ydoc.getText('editor')
const editor = new Quill('#editor')
const binding = new QuillBinding(ytext, editor)
Dengan kode di atas, dua pengguna yang membuka halaman akan langsung melihat perubahan satu sama lain secara real-time.
Kesimpulan
Yjs adalah library yang ringan, fleksibel, dan super efisien buat bikin fitur kolaborasi real-time. Mau dipakai di editor teks, whiteboard, atau app buatan kamu yang lain semuanya bisa.
Dengan dukungan berbagai editor dan sistem komunikasi, ditambah kemampuan offline-nya, Yjs jadi pilihan tepat buat developer yang pengen bikin aplikasi kolaboratif yang modern dan powerful.