Realtime & Automatic Conflict Resolution

Replicated Data Types (RDT)

Abstraction for storing application state
Optimistic Replication
Observable

Replicated Data Types (RDT)

Abstraction for storing application state
Optimistic Replication
Observable

RDT Example: Yjs

import * as Y from 'yjs'

const ydoc = new Y.Doc()

const webrtcProvider = new WebrtcProvider('room-name', ydoc, { password: 'optional-room-password' })
// const websocketProvider = new WebsocketProvider(url, 'room-name', ydoc)
// const matrixProvider = new MatrixProvider(ydoc, matrixClient, {type: "alias",alias: "matrix-room-alias"});

const ymap = ydoc.getMap('map')
const yarray = ydoc.getArray('array')
const ytext = ydoc.getText('text')
const yxml = ydoc.getXmlElement('el')

ymap.observe(event => {
  console.log(event.changes.keys) // { "my key": { action: 'add', oldValue: undefined } }
})

ymap.set('my key', 'new value')

Lexical Editor by Meta is built on-top of Yjs

Lexical Editor

SyncedStore

import React from "react";
import { useSyncedStore } from "@syncedstore/react";
import { store } from "./store";

export default function App() {
  const state = useSyncedStore(store);

  return (
    <div>
      <p>Todo items:</p>
      <ul>
        {state.todos.map((todo, i) => (
          <li key={i} style={{ textDecoration: todo.completed ? "line-through" : "" }}>
            <label>
              <input type="checkbox" checked={todo.completed} onClick={() => (todo.completed = !todo.completed)} />
              {todo.title}
            </label>
          </li>
        ))}
      </ul>
      <input
        onKeyPress={(event) => {
          if (event.key === "Enter") {
            state.todos.push({ completed: false, title: event.target.value });
            target.value = "";
          }
        }}
      />
    </div>
  );
}