Yjs का उपयोग करके इंटरैक्टिव लर्निंग

 (learn.yjs.dev)
1 पॉइंट द्वारा GN⁺ 2025-01-18 | 1 टिप्पणियां | WhatsApp पर शेयर करें
  • learn.yjs.dev फिलहाल deployment अस्थायी रूप से paused होने के कारण learning content नहीं दिखा रहा है
  • पेज पर This deployment is temporarily paused status के अलावा pause होने का कारण नहीं बताया गया है
  • deployment दोबारा शुरू होने का समय या schedule भी सार्वजनिक नहीं है
  • Yjs learning content की संरचना, features और examples फिलहाल पेज पर देखे नहीं जा सकते
  • अभी जिस हद तक निष्कर्ष निकाला जा सकता है, वह सिर्फ इतना है कि learn.yjs.dev अस्थायी रूप से paused state में है

संबंधित पढ़ाई

1 टिप्पणियां

 
GN⁺ 2025-01-18
Hacker News की राय

  • Hey HN! मैं Jamsocket का developer हूं जिसने इसे बनाया है। अगर आप Yjs से परिचित नहीं हैं, तो इसे collaboration और local-first apps बनाने के लिए एक CRDT library समझ सकते हैं
    अगर आपने distributed state के साथ काम नहीं किया है, तो इसकी learning curve काफ़ी है, और JavaScript framework demo के “hello world” जैसे counter increment तक में कई clients शामिल हों तो चीज़ें पेचीदा हो जाती हैं
    कई tutorials “यह library और text editor integration install कर लें, app तैयार” वाले अंदाज़ में होते हैं, इसलिए वे असल में क्या हो रहा है इसका mental model नहीं देते
    इसलिए मैंने interactive Yjs tutorial, Learn Yjs बनाया, और local-first development में नए लोगों को भी सहज रूप से समझ आए इसलिए इसमें explore किए जा सकने वाले demos और coding exercises काफी रखे हैं

    • मेरी CRDT और collaboration features में दिलचस्पी थी, लेकिन हर बार शुरुआत करते समय सबसे बड़ी बाधा वही “library install करो और बस” वाली tutorials थीं
      WebSocket के लिए भी free hosting ढूंढना थोड़ा ज़्यादा मुश्किल लगता है, और पुराने CRDT tutorials ने भी बहुत मदद की
    • उत्सुक हूं कि local-first app बनाने का कोई example है या नहीं
      मैं pure HTML/JS और Alpine के साथ काम कर रहा हूं, और जानना चाहता हूं कि ऐसी apps में भी Yjs इस्तेमाल किया जा सकता है या नहीं
    • उत्सुक हूं कि यह Yrs [0] के साथ भी काम करता है या यह अलग project है
      यह भी जानना चाहता हूं कि Y-Sweet Automerge या Loro जैसी दूसरी CRDT libraries के साथ भी काम करता है या सिर्फ Yjs के लिए है
      सबका binary files भेजने-लेने वाला structure मिलता-जुलता लगता है, इसलिए उत्सुक था कि Y-Sweet समान CRDT implementations के साथ कितना compatible है
      [0] https://github.com/y-crdt/y-crdt
    • वाकई बहुत अच्छे से बनाया गया है। सोच रहा हूं कि क्या इससे आखिरकार मैं CRDT समझ पाऊंगा, और weekend में इसे पूरा देखने वाला हूं

  • Yjs अच्छा है, और P2P results हासिल करना आसान है
    हालांकि Yjs backend, persistence, eventual conflict resolution (जब कोई editor बहुत लंबे समय तक offline रहा हो), और history rewind कठिन engineering challenges लगते हैं
    Platejs https://platejs.org/ जैसे block editor में हमेशा एक अच्छा experience चाहता था
    Liveblocks https://liveblocks.io/text-editor जैसे solutions developer experience को सरल बनाने की कोशिश करते हैं, यह अच्छा है, लेकिन ज़्यादातर मामलों में data control का कुछ हिस्सा छोड़ना पड़ता है
    HN पर CRDT keyword search करने पर हमेशा अच्छे results और interest दिखते हैं, लेकिन open source backend की तरफ अच्छे विकल्प ज़्यादा नज़र नहीं आए। पहले कई बार देखा है, अगर कुछ छूट गया हो तो बताएं
    https://hn.algolia.com/?dateRange=pastYear&page=0&prefix=tru...
    ज़्यादातर लोग उम्मीद करते हैं कि यह कम-से-कम Google Docs या Notion जैसा काम करे, और developer के नज़रिए से चाहते हैं कि implementation details में गहराई से गए बिना Postgres JSONB जैसे format में private रूप से store हो जाए

    • सिद्धांत रूप में तो सिर्फ serialized patches distribute करने होते हैं, लेकिन असली backend में current document state, user identity, और कुछ हद तक access control भी साथ में जानना पड़ सकता है
      कई बार Go backend में Y.js इस्तेमाल करना चाहा, लेकिन simple reference implementation ढूंढना मुश्किल था, इसलिए समय की कमी के कारण हर बार छोड़ दिया
      कई सालों से दोबारा चेक करने पर भी Node.js के बाहर यह अब भी मुश्किल दिखता है

  • पहले एक छोटे side project में Yjs इस्तेमाल किया था। client side सीखना और इस्तेमाल करना काफ़ी आसान था
    server side पर मैं इसे single binary के रूप में deploy करना चाहता था, लेकिन Node के अलावा दूसरी languages के examples, जैसे Rust port Yrs के examples, लगभग न के बराबर थे
    आखिरकार https://github.com/yjs/y-websocket को थोड़ा modify किया और LevelDB-based persistence जोड़ दी, लेकिन मेरे हिसाब से यह optimal नहीं था
    जानना चाहता हूं कि Rust जैसी language में persistence सहित server side implement करने के लिए अच्छे resources हैं या नहीं
    याद है कि मौजूदा client resources text editor integration की तरफ काफी झुके हुए थे, इसलिए यह tutorial सच में उपयोगी है। मैंने text editor integration इस्तेमाल नहीं किया था, इसलिए खुद ही टटोलना पड़ा

    • Y-Sweet[1] शायद सही हो सकता है। यह open source Rust server है जो Learn Yjs का banner चलाता है
      storage के लिए S3 या local filesystem इस्तेमाल करता है, और musl-linked कुछ MB के binary में compile होता है
      https://github.com/jamsocket/y-sweet

  • इसमें कहा गया है, “index को integer नहीं बल्कि fraction रखने वाली fractional indexing technique”, तो उत्सुक हूं कि रुकने से पहले इसे कितनी बार इस्तेमाल कर पाना चाहिए

    • खुद test किया तो 1075 बार निकला, और यह बहुत बड़ा value नहीं है, इसलिए यह इस library की मुख्य समस्या भी हो सकती है
      test code यह है:
      let left = 0, right = 1
      let rightPrevious = 2
      let counter = 0;
      while (right > left && right < rightPrevious) {
      rightPrevious = right;
      right /= 2;
      counter++
      }
      console.log(counter)
      repository को बहुत थोड़ी देर देखा, लेकिन यह issue कहां handle होता है, नहीं ढूंढ पाया, और गहराई से देखने का समय नहीं था। अगर यह वास्तविक issue है तो इसे हल करने में मदद कर सकता हूं

  • अभी offline operation की ज़रूरत वाली app बनाते हुए Yjs इस्तेमाल कर रहा हूं
    असल में यह real-time collaboration app नहीं है, लेकिन server को एक collaborator और app को दूसरा collaborator मानें तो use case आसानी से समझ आ जाता है

  • Yjs में जिस बिंदु को मैं आखिर तक पार नहीं कर पाया, वह यह था कि इस tutorial के todo app में items को move करने वाले example को generalize करते ही चीज़ें बहुत जल्दी जटिल हो जाती हैं
    अगर कई objects आपस में related हों, तो उन्हें उसी Document में रखना मन करता है, और उस relationship को synchronized state में बनाए रखने में tutorial की fractional indexing जैसी कई pitfalls हैं
    फिर जब database-scale items जमा होने लगते हैं, तो सब कुछ एक ही document में डालने वाला toy model इसका मतलब बन जाता है कि किसी भी item को पढ़ना चाहने वाले को पूरा DB और उसका history भेजना पड़ेगा
    अंत में items को अलग objects में बांटकर खुद persist करना पड़ता है, लेकिन documentation इस tutorial [0] के अलावा है ही नहीं, और spoiler यह है कि वह कई सालों से “Work in Progress - come back later” वाली खाली page है
    इसलिए Provider बनाकर manage करने की कोशिश करें तो भी documentation की स्थिति वही है [1]
    Subdocuments मिले तो खुशी हुई कि शायद इस आम समस्या का कोई solution है [2], लेकिन कुछ Providers subdocuments के बीच relationships handle नहीं कर पाते, और कुछ Providers subdocuments को ही support नहीं करते। आखिरकार खुद Provider बनाना पड़ता है, और फिर documentation न होने वाली उसी समस्या पर लौट आते हैं
    code पढ़ने की कोशिश करें तो अंत में पता चलता है कि Yjs का core असल में protocol है। लेकिन Yjs का सार वही protocol भी पूरी तरह documented नहीं है, और काफी अजीब code के कई हिस्सों में बिखरा हुआ है। अगर 10 साल पहले Yjs के predecessor के काम करने के तरीके पर लिखे paper को documentation न मानें तो
    इसे शिकायत के तौर पर लिखने का इरादा नहीं था, लेकिन कई सालों तक इसे चलाने की कोशिश में बहुत समय लगाया है, और “यह जादू की तरह हो जाता है!” जैसे toy demos और असल में कुछ बनाने के बीच की दूरी बहुत बड़ी है। उस हिस्से की docs 10 साल से “Work in Progress” के अलावा खाली ही रही हैं
    उम्मीद है कि इस article के author जैसी Yjs से monetization करने की कोशिश कर रही companies इस gap को भरेंगी
    [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] यह लिखते समय उम्मीद थी कि हालात बदल गए होंगे, लेकिन सारी docs 5 साल पहले की तरह अब भी work in progress हैं, और subdocument support भी वैसा ही लगता है

  • interactive demo में latency slider network latency नहीं बल्कि debounce buffer जैसा behave करता है, जो थोड़ा confusing लगा। समझ नहीं आया कि ऐसा क्यों किया गया

    • कई locations पर state बदलने से पैदा होने वाली problem दिखाने के लिए सबसे simple latency model चुना गया था
      इस approach का फायदा यह है कि इसे readers से कोई भी state छिपाए बिना implement किया जा सकता है। pie chart वही एकमात्र internal state हूबहू दिखाता है जो मौजूद है
      मकसद accurate network simulation नहीं, बल्कि intuition बनाना है

  • interactive demo बहुत खूबसूरत है। जानना चाहूंगा कि इसे बनाने में कौन-सी libraries इस्तेमाल की गईं

    • पूरी site Astro से बनी है, और demos React में बने “interactive islands” हैं
      demos सच में अंदर Yjs चलाते हैं। हर “client” के पास अपना document है, और user click करता है तो setTimeout से latency simulate करने के बाद documents को manually आपस में merge किया जाता है। बीच वाली timeline के लिए तीसरा document भी है
      बाकी, todo demo में drag and drop के लिए dnd kit [1], animations के लिए Motion [2], और text editor के लिए CodeMirror [3] इस्तेमाल किया गया है
      [1] https://dndkit.com
      [2] https://motion.dev
      [3] https://codemirror.net

  • banner image game बेवकूफाना है, लेकिन मजेदार है

    • पुराने Reddit के place जैसा खेल याद आता है
      Team purple ftw:
      https://imgur.com/a/Oxc6jUA

  • आखिरकार चार पत्तों वाला clover बना लिया, लेकिन करीब 2 मिनट बाद किसी ने बिगाड़ दिया
    edit: रुकिए, सब लोग कहाँ चले गए? लगता है हमने इसे तोड़ दिया या मुझे block कर दिया गया। फिर भी बनाने वाले को शाबाशी। बढ़िया चीज़ है

    • block तो निश्चित रूप से नहीं किया गया है। लगता है थोड़ी देर के लिए लोग कम हो गए थे, और अब काफी cursors दिख रहे हैं
      वैसे secret emoji दो और हैं