การเรียนรู้แบบอินเทอร์แอ็กทีฟด้วย Yjs

 (learn.yjs.dev)
1 คะแนน โดย GN⁺ 2025-01-18 | 1 ความคิดเห็น | แชร์ทาง WhatsApp

  • แนะนำ

    • Learn Yjs คือชุดบทเรียนแบบอินเทอร์แอ็กทีฟสำหรับเรียนรู้วิธีสร้างแอปพลิเคชันการทำงานร่วมกันแบบเรียลไทม์ด้วยไลบรารี CRDT อย่าง Yjs
    • หน้านี้เองก็เป็นตัวอย่างของแอปพลิเคชันการทำงานร่วมกันแบบเรียลไทม์ โดยจะแสดงเคอร์เซอร์ของผู้ใช้อื่นแบบเรียลไทม์
    • เมื่อคลิกที่ต้นไม้ การเปลี่ยนแปลงจะสะท้อนไปยังผู้ใช้อื่นด้วย

  • พื้นฐานของ Yjs

    • เริ่มจากแนวคิดพื้นฐานของ Yjs และครอบคลุมเทคนิคในการจัดการสถานะในแอปพลิเคชันแบบกระจาย
    • อธิบายว่า CRDT คืออะไร และเหตุใดจึงควรใช้งาน
    • นำเสนอปัญหาที่อาจเกิดขึ้นในแอปพลิเคชันแบบทำงานร่วมกัน และวิธีหลีกเลี่ยงปัญหาเหล่านั้น
    • สามารถทดลองดูการทำงานของ Yjs ได้ผ่านเดโมที่สำรวจได้และแบบฝึกหัดโค้ด

  • ตัวอย่างเดโม

    • แต่ละกล่องแสดงถึงคอมพิวเตอร์แยกกัน (ไคลเอนต์) ที่กำลังรันแอปพลิเคชันซึ่งใช้ Yjs
    • เมื่อโต้ตอบบนไคลเอนต์หนึ่ง ระบบจะซิงก์ไปยังไคลเอนต์อื่นโดยอัตโนมัติ
    • สามารถปรับเวลาแฝงของเครือข่ายด้วยสไลเดอร์มุมซ้ายบน เพื่อดูการโต้ตอบระหว่างไคลเอนต์ได้

  • แนะนำเว็บไซต์

    • Learn Yjs เป็นโปรเจ็กต์ของ Jamsocket ซึ่งเป็นแพลตฟอร์มสำหรับสร้างแอปแบบเรียลไทม์
    • เคอร์เซอร์แบบเรียลไทม์และสวนแบบมัลติเพลเยอร์ของหน้านี้ขับเคลื่อนด้วย Y-Sweet ซึ่งเป็นเซิร์ฟเวอร์ Yjs แบบโอเพนซอร์ส
    • เว็บไซต์สร้างด้วย Astro และเดโมกับแบบฝึกหัดแบบอินเทอร์แอ็กทีฟสร้างด้วย React และ Yjs

บทความที่เกี่ยวข้อง

1 ความคิดเห็น

 
GN⁺ 2025-01-18
ความเห็นบน Hacker News

  • นักพัฒนาของ Jamsocket ได้สร้างบทเรียนแบบโต้ตอบเพื่อช่วยสร้างแอปแบบ collaborative และ local-first โดยใช้ Yjs โดย Yjs เป็นไลบรารี CRDT ที่มีช่วงการเรียนรู้สำหรับผู้ที่ไม่คุ้นเคยกับการทำงานกับสถานะแบบกระจาย บทเรียนนี้เข้าใจง่าย และออกแบบมาให้ค่อย ๆ สร้างความเข้าใจตั้งแต่พื้นฐานผ่านเดโมที่สำรวจได้และแบบฝึกหัดการเขียนโค้ด

  • ความสามารถแบบทั่วไปของ Yjs อาจซับซ้อนได้ โดยเฉพาะเมื่อมีหลายอ็อบเจ็กต์ที่เกี่ยวข้องกัน โมเดลง่าย ๆ ที่ใส่ทุกอย่างไว้ในเอกสารเดียวทำให้เกิดปัญหาที่ต้องส่งข้อมูลทั้งฐานข้อมูล ดังนั้นจึงจำเป็นต้องแยกรายการออกเป็นอ็อบเจ็กต์เดี่ยวและจัดการ persistence โดยตรง

    • สามารถใช้ Subdocuments เพื่อแก้ปัญหานี้ได้ แต่ Provider บางตัวไม่รองรับ โปรโตคอลหลักของ Yjs ไม่มีเอกสารกำกับ และโค้ดที่เกี่ยวข้องก็กระจัดกระจายอยู่หลายจุด

  • Yjs มีข้อดีตรงที่ทำให้ได้ผลลัพธ์แบบ P2P ได้ง่าย อย่างไรก็ตาม ความท้าทายด้านวิศวกรรมอย่าง persistence ฝั่งแบ็กเอนด์ การแก้ไขความขัดแย้ง และการย้อนประวัติยังคงทำได้ยาก มีความต้องการประสบการณ์ที่ดีกับบล็อกเอดิเตอร์อย่าง Platejs และมีความพยายามจากโซลูชันอย่าง Liveblocks ที่จะทำให้ประสบการณ์การพัฒนาง่ายขึ้น

  • กำลังพัฒนาแอปที่ต้องทำงานได้แม้ออฟไลน์โดยใช้ Yjs แม้จะไม่ใช่แอป collaborative แบบเรียลไทม์ แต่ถ้ามองว่าเซิร์ฟเวอร์เป็นผู้ร่วมมือคนหนึ่ง ก็สามารถจินตนาการถึงกรณีใช้งานได้หลากหลาย

  • เคยใช้ Yjs กับโปรเจ็กต์ขนาดเล็ก โดยฝั่งไคลเอนต์เรียนรู้ง่ายและใช้งานง่าย ส่วนฝั่งเซิร์ฟเวอร์แทบไม่มีตัวอย่างในภาษาอื่นนอกจาก Node และได้ใช้งาน y-websocket ของ Node โดยแก้ไขเล็กน้อยร่วมกับ persistence ที่อิง LevelDB

  • เทคนิคที่เรียกว่า fractional indexing คือการใช้อินเด็กซ์เป็นเศษส่วนแทนที่จะเป็นจำนวนเต็ม มีข้อสงสัยว่าสามารถใช้งานแบบนี้ได้มากแค่ไหน

  • ตัวเลื่อนค่าหน่วงเวลาในเดโมแบบโต้ตอบดูเหมือนทำงานเป็น debounce buffer มากกว่าจะเป็น network latency จึงเข้าใจได้ยากว่าทำไมถึงเป็นเช่นนั้น

  • เดโมแบบโต้ตอบนั้นสวยงามมาก จึงสงสัยว่ามีไลบรารีที่ใช้สร้างสิ่งนี้หรือไม่

  • ได้ four-leaf clover มาแล้ว แต่มีคนทำพังไป เสียงชื่นชมแก่ผู้สร้าง สนุกดี

  • เกมในภาพแบนเนอร์ดูเด็ก ๆ แต่ก็สนุก