Krestianstvo SDK 4 | Solid JS에서 Croquet 및 재귀 포털 구현

Krestianstvo SDK의 새로운 4번째 버전을 소개합니다!

4번째 버전의 주요 기능은 Croquet Application Architecture/SolidJS을 사용하는 Functional Reactive Paradigm에서 S.JS의 전체 기능 구현과 재귀 포털의 도입입니다. Krestianstvo SDK의 3번째 버전과 동일하게 유지되는 유일한 부분은 Reflector 및 Virtual Time입니다. 그들의 구현은 Virtual World Framework을 기반으로 하므로 기능적 반응 패러다임에 맞게 약간 수정되었습니다.



Krestianstvo SDK의 4번째 버전은 JavaScript용 독립 실행형ESM module으로 배포됩니다. 클라우드에서 호스팅되고 실행되는 모든 Solid JS 또는 Astro 웹 응용 프로그램과 쉽게 번들로 묶을 수 있습니다.

4번째 버전 작업은 제가 Luminary 작업을 하던 2019년에 시작되었고 Croquet 애플리케이션 아키텍처에 Functional Reactive Streams를 도입했습니다. The project with Rubik’s Cube는 Croquet이 FRP로 뒷받침되는 가상 시간 및 약속 내부 작업에 대해 어떻게 새로운 모습을 보이는지 보여주었습니다. 예를 들어 참가자는 가상 시간을 지연시키고 "슬로우 모션"으로 가상 세계에서 자신의 행동을 관찰할 수 있습니다.

그러다가 2021년에 1차Festival for Web based Music에 참가했습니다 . 페스티벌에서 저와 아티스트 Delia Ramos는 웹 아트 프로젝트 — “THIS IS NOT A CONCERT”를 만들고 있었습니다. 이 프로젝트에서 청중은 웹 브라우저의 "필터"를 통해 가상 개체를 만지거나 상호 작용하거나 보는 방식으로 다중 맥락/개념적 창의적 레이어 내 가상 캔버스 공간 내부의 작품을 공동으로 탐색했습니다. 그 프로젝트에 필요한 핵심 개체는 재귀 포털이었습니다. 이 포털은 필터 역할을 하고 다른 가상 캔버스 공간에 대한 포털이었으며 자체에 대한 포털이기도 했습니다.

그러나 Virtual World Framework 및 Krestianstvo SDK의 3번째 버전에서와 같이 Croquet의 원래 Smalltalk 버전과 비교할 때 전역 개체 Window에 대한 종속성을 포함하여 Portal이 여전히 부족합니다. Croquet.io은 샌드박스 HTML iFrames( Multiplane Portals for the Metaverse )를 사용하여 웹용 포털을 도입했습니다. 그러나 Krestianstvo에서는 Croquet Smalltalk 버전과 같은 방식으로 포털을 구현하고 싶었습니다. 즉, 재귀 포털을 형성하여 자체 링크를 만드는 기능이 있는 순수 객체로 구현하고 싶었습니다.

마지막으로 Solid JS 덕분에 순수한 JavaScript로 작업할 수 있어서 운이 좋았습니다! 이 모든 것을 실현하기 위해 Solid JS/S.JS의 기능적 반응 패러다임을 사용하여 거의 처음부터 Croquet 애플리케이션 아키텍처를 구현하도록 요구했습니다.



Krestianstvo SDK의 4번째 버전에 있는 일반적인 애플리케이션은 Solid JS 기본 빌딩 블록 유형인 구성 요소 및 반응형 프리미티브에서 빌드되는 애플리케이션입니다. Solid의 세분화된 반응성은 신호, 메모 및 효과의 세 가지 핵심 프리미티브를 기반으로 합니다. 함께 자동 추적 동기화 엔진을 구성합니다. 반응적 계산은 동기식으로 실행되는 함수 래핑 식의 형태를 취합니다( more in SolidJS documentation ).

Krestianstvo는 Croquet의 Model — View 상호 연결 개념을 구현하기 위해 Solid JS 반응성을 사용합니다. Croquet Models — 순수한 Solid JS Signals, Memos 및 Stores입니다. Croquet Views — 상태 및 인스턴스가 없는 Solid JS 경량 구성 요소입니다. Reflector에서 받은 모든 외부 메시지와 작업을 담당하는 모든 내부 Future 메시지는 Signals에 래핑된 다음 그에 따라 Effects에 의해 전달됩니다. 예를 들어 "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의 소스 코드:

놀이터: GitHub

Solid JS의 핵심 라이브러리: GitHub

S.js의 프로토타입: GitHub

리플렉터 서버: GitHub