Krestianstvo SDK 4 | Реализация крокета и рекурсивных порталов на Solid JS

Позвольте представить вам новую 4-ю версию Krestianstvo SDK!

Главной особенностью 4-ой версии является полнофункциональная реализация архитектуры приложения Croquet в функционально-реактивной парадигме с использованием SolidJS / S.JS и внедрение рекурсивных порталов. Единственными частями, которые остались такими же, как и в 3-й версии Krestianstvo SDK, являются: Reflector и Virtual Time. Их реализация основана на Virtual World Framework, поэтому они были лишь слегка модифицированы в соответствии с функционально-реактивной парадигмой.

Четвертая версия Krestianstvo SDK распространяется как отдельный модуль ESM для JavaScript. Он может быть легко встроен в любое веб-приложение Solid JS или Astro, размещенное и работающее только в облаке.

Работа над 4-й версией была начата в 2019 году, когда я работал над Luminary и внедрял функциональные реактивные потоки в архитектуру приложения Croquet. Проект с кубиком Рубика показал, как Croquet получает новый взгляд на виртуальное время и обещания внутри действий, все это поддерживается FRP. Например, участники могли задерживать виртуальное время и наблюдать за своими действиями в виртуальном мире в «замедленной съемке».

Затем в 2021 году я принял участие в первом Фестивале музыки на основе веб-технологий. На фестивале я и художница Делия Рамос создавали веб-арт-проект «ЭТО НЕ КОНЦЕРТ». В этом проекте аудитория совместно исследовала произведение искусства в виртуальном пространстве холста в рамках многоконтекстных / концептуальных творческих слоев, прикасаясь к виртуальным объектам, взаимодействуя или просматривая их через «фильтры» в веб-браузере. Основным объектом, который мне понадобился для этого проекта, был рекурсивный портал, который должен был работать как фильтр, портал в другие виртуальные пространства холста, а также как портал в самого себя.

Но, по сравнению с оригинальной Smalltalk версией Croquet, как в Virtual World Framework, так и в 3-й версии Krestianstvo SDK все еще не хватает Порталов, включая зависимость от глобального объекта Window. Croquet.io ввел Порталы для Web, используя песочницу HTML iFrames (Многоплоскостные Порталы для Metaverse). Но в Krestianstvo я хотел реализовать Порталы так же, как это делает версия Croquet Smalltalk, как чистые объекты с возможностью создавать ссылки на себя, формируя Рекурсивные Порталы.

Наконец, мне повезло сделать это на чистом JavaScript, благодаря Solid JS! Чтобы воплотить все это в жизнь, мне потребовалось реализовать архитектуру приложения Croquet практически с нуля, используя функциональную реактивную парадигму в Solid JS / S.JS.

Типичное приложение в 4-й версии Krestianstvo SDK — это приложение, которое будет построено из основных типов строительных блоков Solid JS: Компонентов и Реактивных Примитивов. Мелкозернистая реактивность Solid построена на трех основных примитивах: Сигналы, Заметки и Эффекты. Вместе они образуют механизм синхронизации с автоматическим отслеживанием. Реактивные вычисления принимают форму выражений, обернутых в функции, которые выполняются синхронно (подробнее в документации SolidJS).

Krestianstvo использует реактивность Solid JS для реализации концепции Croquet о взаимосвязи модели и представления. Модели Croquet — это просто чистые сигналы, заметки и хранилища Solid JS. Представления Croquet — это просто легкие компоненты Solid JS без состояния и экземпляров. Все полученные внешние сообщения от Reflector и все внутренние сообщения Future, которые отвечают за действия, оборачиваются в Signals и затем отправляются Effects соответствующим образом. Например, сообщение Smalltalk типа «doesNotUnderstand» легко реализуется в Krestianstvo.

Вот пример простого рабочего приложения в Krestianstvo SDK | 4 (запустите его на codesandbox)

import { render } from "solid-js/web";
import { Selo, createLocalStore } from "krestianstvo";

const Counter = (props) => {
  const [local, setLocal] = createLocalStore(
    {
      data: {
        type: "Node",
        nodeID: props.nodeID,
        properties: {
          name: props.nodeID,
          count: 0,
          ticking: false,
          initialized: false
        }
      }
    },
    props
  );

  const inc = () => {
    setLocal("data", "properties", "count", (c) => c + 1);
    props.selo.future(props.nodeID, "inc", 1);
  };

  const initialize = () => {
    inc();
  };

  props.selo.createAction(props.nodeID, "inc", inc);
  props.selo.createAction(props.nodeID, "initialize", initialize);

  return (
    <>
      <h1>{local.data.properties.count}</h1>
    </>
  );
};

render(
  () => (
    <Selo
      nodeID={"counter"}
      seloID={"sandbox_counter"}
      component={Counter}
      reflectorHost={"https://time.krestianstvo.org"}
    />
  ),
  document.getElementById("root")
);

Продолжение следует…

Демо-проект: https://play.krestianstvo.org
Демо-проект глитча: https://krestianstvo-playground.glitch.me

Исходный код для Krestianstvo SDK 4:

• Playground: GitHub
• Основная библиотека на Solid JS: GitHub
• Прототип на S.js: GitHub
• Сервер Reflector: GitHub