Pembelajaran Interaktif dengan Yjs

• Pengenalan

  • Learn Yjs adalah seri tutorial interaktif untuk mempelajari cara membangun aplikasi kolaborasi real-time menggunakan pustaka CRDT Yjs.
  • Halaman ini sendiri merupakan contoh aplikasi kolaborasi real-time, di mana kursor pengguna lain ditampilkan secara real-time.
  • Jika Anda mengklik tanaman, perubahannya juga akan diterapkan kepada pengguna lain.

• Dasar-Dasar Yjs

  • Dimulai dari konsep dasar Yjs, pembahasan mencakup teknik menangani state dalam aplikasi terdistribusi.
  • Dijelaskan apa itu CRDT, dan mengapa teknologi ini digunakan.
  • Disajikan masalah-masalah yang dapat muncul dalam aplikasi kolaboratif serta cara menghindarinya.
  • Melalui demo yang dapat dijelajahi dan latihan kode, Anda dapat merasakan langsung cara kerja Yjs.

• Contoh Demo

  • Setiap kotak mewakili komputer terpisah (klien) yang menjalankan aplikasi yang menggunakan Yjs.
  • Saat berinteraksi di satu klien, perubahan akan otomatis disinkronkan ke klien lain.
  • Anda dapat menyesuaikan latensi jaringan dengan slider di kiri atas untuk melihat interaksi antar klien.

• Pengenalan Situs

  • Learn Yjs adalah proyek dari Jamsocket, platform untuk membangun aplikasi real-time.
  • Kursor real-time dan taman multipemain di halaman ini dijalankan dengan Y-Sweet, server Yjs open source.
  • Situs web ini dibangun dengan Astro, dan demo serta latihan interaktif dibuat dengan React dan Yjs.

[GN⁺]

Komentar Hacker News

• Seorang pengembang Jamsocket membuat tutorial interaktif yang membantu membangun aplikasi kolaboratif dan local-first menggunakan Yjs. Yjs adalah pustaka CRDT, sehingga ada kurva belajar bagi orang yang belum terbiasa bekerja dengan state terdistribusi. Tutorial ini intuitif dan dirancang agar pemahaman dibangun dari dasar melalui demo yang bisa dieksplorasi dan latihan coding

• Kemampuan Yjs yang tergeneralisasi bisa menjadi kompleks, terutama saat banyak objek saling berhubungan. Model sederhana yang menaruh semua item dalam satu dokumen menimbulkan masalah karena seluruh basis data harus ditransfer. Karena itu, diperlukan cara untuk memecah item menjadi objek individual dan menyimpannya secara langsung

  • Masalah ini bisa diatasi dengan menggunakan subdocuments, tetapi beberapa provider tidak mendukungnya. Protokol inti Yjs juga tidak terdokumentasi, dan kode terkait tersebar di berbagai tempat

• Yjs memiliki keunggulan karena memudahkan mendapatkan hasil P2P. Namun, persistensi backend, penyelesaian konflik, dan rewind histori merupakan tantangan rekayasa yang sulit. Ada keinginan untuk mendapatkan pengalaman yang baik dengan block editor seperti Platejs, dan solusi seperti Liveblocks merupakan upaya untuk menyederhanakan pengalaman pengembangan

• Sedang mengembangkan aplikasi dengan Yjs yang harus tetap berfungsi secara offline. Ini bukan aplikasi kolaborasi real-time, tetapi jika server dianggap sebagai salah satu kolaborator, berbagai use case bisa dibayangkan

• Pernah menggunakan Yjs pada proyek kecil, dan sisi klien mudah dipelajari serta digunakan. Di sisi server, hampir tidak ada contoh dalam bahasa selain Node, jadi digunakan y-websocket milik Node dengan sedikit modifikasi bersama persistensi berbasis LevelDB

• Teknik yang disebut fractional indexing adalah menggunakan indeks berupa pecahan alih-alih bilangan bulat. Ada pertanyaan tentang berapa kali teknik ini bisa digunakan

• Slider latensi pada demo interaktif tampaknya bekerja sebagai buffer debounce, bukan latensi jaringan. Sulit memahami mengapa demikian

• Demo interaktifnya indah. Penasaran apakah ada library yang digunakan untuk membangunnya

• Mendapat semanggi berdaun empat, tetapi seseorang merusaknya. Pujian untuk pembuatnya. Ini menyenangkan

• Game pada gambar banner terkesan kekanak-kanakan, tetapi tetap menyenangkan