Pembelajaran Interaktif Menggunakan Yjs

• learn.yjs.dev saat ini penyebarannya dijeda sementara, sehingga konten pembelajarannya tidak dapat dilihat
• Pada halaman tersebut, selain status This deployment is temporarily paused, penyebab penghentian tidak disebutkan
• Waktu atau jadwal dimulainya kembali deployment juga belum dipublikasikan
• Struktur, fitur, dan contoh dari konten pembelajaran Yjs saat ini tidak dapat diperiksa dari halaman tersebut
• Hal yang dapat dinilai saat ini hanya bahwa learn.yjs.dev berada dalam status dijeda sementara

[GN⁺]

Opini Hacker News

• Hey HN! Saya pengembang Jamsocket yang membuat ini. Kalau belum familiar dengan Yjs, anggap saja ini sebagai library CRDT untuk membuat aplikasi kolaboratif dan local-first.
  Kalau belum pernah menangani state terdistribusi, kurva belajarnya cukup terasa, dan bahkan increment counter seperti “hello world” di demo framework JavaScript pun jadi rumit ketika melibatkan beberapa klien.
  Banyak tutorial berakhir seperti “pasang integrasi library ini dengan editor teks, maka aplikasi selesai”, sehingga tidak memberi model mental tentang apa yang sebenarnya terjadi.
  Karena itu saya membuat Learn Yjs, sebuah tutorial Yjs interaktif, dan memasukkan banyak demo yang bisa dieksplorasi serta latihan coding agar orang yang baru mengenal pengembangan local-first pun bisa memahaminya secara intuitif.

  • Saya memang tertarik dengan CRDT dan fitur kolaborasi, tetapi setiap kali mulai belajar, hambatan terbesarnya justru tutorial bergaya “pasang library, selesai”.
    WebSocket juga tampaknya sedikit lebih sulit dicari hosting gratisnya, dan tutorial CRDT yang sudah ada pun sangat membantu.
  • Saya penasaran apakah ada contoh membuat aplikasi local-first.
    Saya sedang bekerja dengan HTML/JS murni dan Alpine, dan ingin tahu apakah Yjs juga bisa dipakai di aplikasi seperti ini.
  • Saya penasaran apakah ini juga bekerja dengan Yrs [0], atau merupakan proyek terpisah.
    Saya juga ingin tahu apakah Y-Sweet bekerja dengan library CRDT lain seperti Automerge atau Loro, atau hanya khusus Yjs.
    Strukturnya terlihat mirip karena semuanya saling mengirim file biner, jadi saya penasaran seberapa kompatibel Y-Sweet dengan implementasi CRDT serupa.
    [0] https://github.com/y-crdt/y-crdt
  • Dibuat dengan sangat baik. Saya penasaran apakah akhirnya saya bisa memahami CRDT lewat ini, dan berencana menuntaskannya akhir pekan ini.

• Yjs bagus, dan mudah mendapatkan hasil P2P.
  Namun backend Yjs, persistensi, penyelesaian konflik final (misalnya ketika satu editor terlalu lama offline), dan memutar balik riwayat tampaknya merupakan tantangan engineering yang sulit.
  Saya selalu menginginkan pengalaman yang bagus di editor blok seperti Platejs https://platejs.org/.
  Solusi seperti Liveblocks https://liveblocks.io/text-editor memang bagus sebagai upaya menyederhanakan pengalaman pengembangan, tetapi kebanyakan mengharuskan kita melepas sebagian kendali atas data.
  Kalau mencari kata kunci CRDT di HN, selalu terlihat hasil dan minat yang bagus, tetapi di sisi backend open-source saya belum melihat pilihan yang bagus. Saya sudah beberapa kali mengeceknya dulu, jadi kalau ada yang saya lewatkan, saya senang diberi tahu.
  https://hn.algolia.com/?dateRange=pastYear&page=0&prefix=tru...
  Kebanyakan orang berharap setidaknya perilakunya seperti Google Docs atau Notion, dan dari sisi developer mereka ingin data tersimpan secara privat dalam format mirip Postgres JSONB tanpa harus menggali terlalu dalam detail implementasinya.

  • Secara teori, cukup mendistribusikan patch yang sudah diserialisasi, tetapi dalam backend nyata kita mungkin juga perlu mengetahui state dokumen saat ini, identitas pengguna, dan sampai tingkat tertentu kontrol akses.
    Beberapa kali saya ingin memakai Y.js di backend Go, tetapi sulit menemukan implementasi referensi yang sederhana, sehingga setiap kali saya menyerah karena keterbatasan waktu.
    Setelah dicek lagi selama beberapa tahun, di luar Node.js masih terlihat sulit.

• Dulu saya memakai Yjs di sebuah proyek sampingan kecil. Di sisi klien, cukup mudah dipelajari dan digunakan.
  Di sisi server, saya ingin mendistribusikannya sebagai satu binary, tetapi contoh dalam bahasa selain Node, misalnya contoh Yrs yang merupakan port Rust, nyaris tidak ada.
  Pada akhirnya saya sedikit memodifikasi https://github.com/yjs/y-websocket dan menambahkan persistensi berbasis LevelDB, tetapi menurut saya itu bukan solusi optimal.
  Saya penasaran apakah ada materi bagus untuk mengimplementasikan sisi server beserta persistensi dalam bahasa seperti Rust.
  Seingat saya, materi klien yang ada sangat condong ke integrasi editor teks, jadi tutorial ini benar-benar berguna. Karena saya tidak memakai integrasi editor teks, saya harus meraba-raba sendiri.

  • Y-Sweet[1] mungkin cocok. Itu adalah server Rust open-source yang menjalankan banner Learn Yjs.
    Ia memakai S3 atau filesystem lokal sebagai penyimpanan, dan dikompilasi menjadi binary beberapa MB yang di-link dengan musl.
    https://github.com/jamsocket/y-sweet

• Disebut sebagai “teknik fractional indexing yang menempatkan indeks sebagai pecahan, bukan bilangan bulat”; saya penasaran berapa kali bisa digunakan sebelum berhenti.

  • Saya coba uji sendiri dan hasilnya 1075 kali, bukan angka yang sangat besar, jadi ini tampaknya bisa menjadi masalah utama bagi library ini.
    Kode pengujiannya sebagai berikut:
    let left = 0, right = 1
    let rightPrevious = 2
    let counter = 0;
    while (right > left && right < rightPrevious) {
    rightPrevious = right;
    right /= 2;
    counter++
    }
    console.log(counter)
    Saya hanya melihat repositorinya sebentar sekali, tetapi tidak menemukan di mana masalah ini ditangani, dan tidak sempat menggali lebih dalam. Kalau ini memang isu nyata, saya mungkin bisa membantu memperbaikinya.

• Saat ini saya memakai Yjs sambil membuat aplikasi yang membutuhkan operasi offline.
  Sebenarnya ini bukan aplikasi kolaborasi real-time, tetapi kalau server dianggap sebagai satu kolaborator dan aplikasi sebagai kolaborator lain, use case-nya mudah dibayangkan.

• Titik yang akhirnya tidak pernah bisa saya lewati di Yjs adalah bahwa jika contoh pemindahan item aplikasi to-do dalam tutorial ini digeneralisasi, kompleksitasnya menjadi terlalu cepat meningkat
  Jika ada beberapa objek yang saling terkait, kita jadi ingin memasukkannya ke dalam Document yang sama, dan untuk menjaga relasi itu tetap tersinkron ada banyak jebakan seperti fractional indexing dalam tutorial
  Lalu ketika item yang skalanya setara database mulai menumpuk, model mainan yang memasukkan semuanya ke dalam satu dokumen berarti pihak mana pun yang ingin membaca item apa pun harus dikirimi seluruh DB beserta riwayatnya
  Pada akhirnya item harus dipecah menjadi objek terpisah dan dipersistensikan sendiri, tetapi dokumentasinya tidak ada selain tutorial ini [0], dan sebagai spoiler, itu adalah halaman kosong yang sudah bertahun-tahun bertuliskan “Work in Progress - come back later”
  Jadi meskipun ingin membuat dan mengelola Provider sendiri, situasi dokumentasinya sama saja [1]
  Saat menemukan Subdocuments, saya sempat senang karena mengira ada solusi untuk masalah umum ini [2], tetapi sebagian Provider tidak bisa menangani relasi antar-subdokumen, dan sebagian Provider tidak mendukung subdokumen itu sendiri. Akhirnya kita harus membuat Provider sendiri, dan kembali lagi ke masalah tidak adanya dokumentasi
  Ketika mencoba membaca kodenya, pada akhirnya terlihat bahwa inti Yjs adalah protokol. Namun protokol yang menjadi esensi Yjs itu pun tidak terdokumentasi lengkap, dan tersebar di beberapa bagian kode yang cukup unik. Kecuali kalau makalah tentang cara kerja pendahulu Yjs 10 tahun lalu dianggap sebagai dokumentasi
  Saya tidak bermaksud menulis ini sebagai keluhan, tetapi selama beberapa tahun saya menghabiskan terlalu banyak waktu untuk membuatnya berjalan, dan jarak antara demo mainan bergaya “ajaib, kan!” dan sesuatu yang nyata terlalu besar. Bagian dokumentasi itu selama 10 tahun kosong selain tulisan “Work in Progress”
  Saya berharap perusahaan-perusahaan yang mencoba memonetisasi Yjs, seperti penulis artikel ini, bisa menjembatani kesenjangan itu
  [0] https://docs.yjs.dev/tutorials/persisting-the-document-to-a-...
  [1] https://docs.yjs.dev/tutorials/creating-a-custom-provider
  [2] https://docs.yjs.dev/api/subdocuments
  [3] Saat menulis ini saya berharap situasinya sudah berubah, tetapi semua dokumentasi tampaknya masih dalam pengerjaan seperti 5 tahun lalu, begitu juga dukungan subdokumen

• Dalam demo interaktif, slider latensi terasa membingungkan karena berperilaku seperti buffer debounce, bukan latensi jaringan. Saya tidak mengerti kenapa dibuat seperti ini

  • Saya memilih model latensi paling sederhana yang cukup untuk menunjukkan masalah yang muncul saat status diubah dari beberapa lokasi
    Keuntungan pendekatan ini adalah bisa diimplementasikan tanpa menyembunyikan status apa pun dari pembaca. Diagram pai menampilkan apa adanya satu-satunya status internal yang ada
    Tujuannya bukan simulasi jaringan yang akurat, melainkan membangun intuisi

• Demo interaktifnya indah. Penasaran library apa yang dipakai untuk membuatnya

  • Seluruh situs dibuat dengan Astro, dan demonya adalah “pulau interaksi” yang dibuat dengan React
    Demo tersebut benar-benar menjalankan Yjs di dalamnya. Setiap “klien” memiliki dokumennya sendiri, dan saat pengguna mengklik, penundaan disimulasikan dengan setTimeout, lalu dokumen-dokumen digabungkan satu sama lain secara manual. Ada juga dokumen ketiga untuk timeline di tengah
    Selain itu, untuk drag-and-drop pada demo to-do digunakan dnd kit [1], untuk animasi Motion [2], dan untuk editor teks CodeMirror [3]
    [1] https://dndkit.com
    [2] https://motion.dev
    [3] https://codemirror.net

• Game gambar bannernya konyol tapi menyenangkan

  • Mengingatkan pada permainan seperti place di Reddit dulu
    Team purple ftw:
    https://imgur.com/a/Oxc6jUA

• Akhirnya saya berhasil membuat semanggi berdaun empat, tapi sekitar 2 menit kemudian seseorang merusaknya
  Sunting: tunggu, semua orang ke mana? Sepertinya kita merusaknya atau saya diblokir. Tetap saja, tepuk tangan untuk pembuatnya. Ini karya yang keren

  • Jelas kamu tidak diblokir. Sepertinya orang-orang sempat berkurang sebentar, dan sekarang cukup banyak kursor yang terlihat
    Sebagai catatan, ada dua emoji rahasia lagi