NEAR BOSの2つのフレームワーク：ROCとAlémの比較

前言#

BOS の全称は Blockchain Operation System であり、NEAR によって開発されたフレームワークで、ユーザーがオープンネットワークアプリケーションを開発するためのサポートを提供します。React に精通した開発者は、NEAR Sandbox で直接 React コードを書いてアプリケーションを構築できます。公開された React コードは IPFS にホスティングされ、分散型のフロントエンドを実現します。

スマートコントラクトの面では、フロントエンド開発者の操作体験を向上させるために、NEAR は組み込みオブジェクト NEAR を通じて便利なスマートコントラクト呼び出し方法を提供し、開発者は NEAR.call と NEAR.view 関数を使用するだけで簡単にスマートコントラクトを呼び出すことができます。

BOS は単一ページアプリケーションに相当するため、小型アプリケーションの構築が特に便利です。しかし、やや大規模なアプリケーションを構築するために、2 つのフレームワークが誕生しました：ROC と Além です。

この記事では、BOS のこれら 2 つのフレームワークの比較について主に紹介します。

介绍#

1. BWE#

BWE の全称は BOS Web Engine であり、NEAR の公式によって開発されたエンジンです。公式の紹介は以下の通りです。

BOS Web Engine (BWE) は次世代の分散型フロントエンド実行環境です。BWE は分散型フロントエンド開発を標準的な React 開発に近づけ、強化されたブラウザサポートのセキュリティを提供します。注： “BOS Web Engine” は仮の名称であり、リリース前に変更される予定です。

2. Além#

Além は Twitter ユーザー wpdas によって開発されました。ツイートによると、この製品は NEAR の BOS 上でページの読み込み速度を大幅に向上させることでユーザー体験を最適化します。Além は web3 JavaScript/TypeScript ライブラリであり、NEAR プロトコルのブロックチェーンオペレーティングシステム上で Web3 アプリケーションを作成することを可能にします。すべてのコンポーネントとその他のリソースは Near VM が理解できるファイルに変換され、React に似た方法でアプリケーションを作成できます。Além は状態を持つコンポーネントと無状態コンポーネントの子コンポーネントを管理し、正しく処理され理解されることを保証するため、JSX のすべての機能を活用できます。

IDE とプレビューの比較#

1. BWE#

BWE はオンラインエディタ Sandbox を使用して編集できます。リアルタイムプレビューが可能です。短期間の活動やプロトタイプの迅速な開発と公開に適しています。

2. Além#

Além はスキャフォールディングを通じてローカル開発が可能で、Installation ページで示されているように、alem スキャフォールディングを使用してプロジェクトを作成できます。ローカルの vscode 編集は、React と同様に便利です。

プレビューに関しては、開発中にローカルリンクを使用してリアルタイムプレビューが可能です。http://127.0.0.1:8080/alem-lib.testnet/widget/Index 。同様に、ローカル BOS を使用してリアルタイムプレビューを行う場合は、https://test.near.org/flags で flags を http://127.0.0.1:8080/api/loader に設定することで、https://test.near.org/alem-lib.testnet/widget/Index で公開後のアドレスをプレビューできます。

react hooks 互換性#

1. BWE#

以下のコードでテストします。

import {useState, useEffect, useRef, useCallback, useMemo} from 'react';

function MyComponent() {
  const [msg, setMsg] = useState("");
  const ref = useRef(null);
  useEffect(( ) => {
    setMsg("Message");
    console.log({ref: ref.current})
  }, []);
  const res = useMemo(() => {
    return 123;
  }, []);
  console.log({res})
  return (
    <div  ref={ref}>
      <p>{msg}</p>
      <button onClick={
        useCallback(()=> {
          console.log("123")
        }, [])
      }>Click Me</button>
    </div>
  );
}

export default MyComponent as BWEComponent;

useState ✅
useEffect ✅
useRef ✅
useCallback ✅
useMemo ✅

2. Alem#

Alem は同じコードを使用してテストし、結果は useRef が存在しないというものでした。

import { useState, useEffect, useCallback, useMemo } from 'react';

const App = () => {
  const [msg, setMsg] = useState("");
  useEffect(() => {
    setMsg("Message");
    console.log({ ref: ref.current })
  }, []);
  const res = useMemo(() => {
    return 123;
  }, []);
  console.log({ res })
  return (
    <div>
      <p>{msg}</p>
      <button onClick={
        useCallback(() => {
          console.log("123")
        }, [])
      }>Click Me</button>
    </div>
  );
};

export default App;

useState ✅
useEffect ✅
useRef ❌
useCallback ✅
useMemo ✅

packages と互換性#

私は web3 フロントエンドで一般的に必要とされるいくつかのライブラリを挙げ、それらが正常に使用できるかどうかを比較しました。

1. BWE#

以下のコードでテストします。

import Big from 'big.js';
import dayjs from 'dayjs';
import clsx from 'classnames';
import lodash from 'lodash';
import s from './styles.module.css';
import toast, { Toaster } from 'react-hot-toast';

const notify = () => toast('Here is your toast.');

function HelloWorld() {
  return (
    <div>
      <p>Num: {Big(10).pow(8).minus(1).toFixed()}</p>
      <p>Date: {dayjs('1713161771413').format('YYYY MMMM DD')}</p>
      <button className={s.red}>AAA</button>
      <button className={clsx(
        s.Red,
        s.Small
      )}>
        Click Me
      </button>
      <p>{lodash.uniq([2, 1, 2, 3, 3, 3]).join(", ")}</p>
      <button onClick={notify}>Make me a toast</button>
      <Toaster />
    </div>
  );
}

export default HelloWorld as BWEComponent;

レンダリング後の効果：

big.js ✅
classnames ✅
dayjs ✅
lodash ✅
react-hot-toast ❌

利点：

esm アドレスを定義する必要がない
import でパッケージをインポートできる
TypeScript をサポート

欠点：

classnames をテストした際、CSS モジュールが正常に動作しないようです。
ボタンクリックがレンダリング時に動作しない。

2. Alem#

まず esm のパッケージを定義し、新しいファイルを作成します。名前は alem.modules.json とします。

{
  "javascript-time-ago": "https://unpkg.com/[email protected]/bundle/javascript-time-ago.js",
  "dayjs": "https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.10/dayjs.min.js",
  "classnames": "https://cdnjs.cloudflare.com/ajax/libs/classnames/2.5.2/index.min.js",
  "big.js": "https://cdnjs.cloudflare.com/ajax/libs/big.js/6.2.1/big.min.js",
  "lodash": "https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"
}

新しい HomePage.jsx を作成します。

import { useModule, useState } from "alem";

const HomePage = () => {
  const [date, setDate] = useState("");
  const [cn, setCn] = useState("");
  const [big, setBig] = useState("");
  const [lo, setLo] = useState("");
  useEffect(() => {
    useModule({
      code: `dayjs('1713161771413').format('YYYY MMMM DD')`,
      onComplete: (data) => {
        setDate(data)
      },
    });
    useModule({
      code: `classNames("Red", "Small")`,
      onComplete: (data) => {
        setCn(data)
      },
    });
    useModule({
      code: `Big(10).pow(8).minus(1).toFixed()`,
      onComplete: (data) => {
        setBig(data)
      },
    });
    useModule({
      code: `_.uniq([2, 1, 2, 3, 3, 3]).join(", ")`,
      onComplete: (data) => {
        setLo(data)
      },
    });
  }, []);
  return <div>
    <p>Date: {date}</p>
    <p className={cn}>Small Red</p>
    <p>Big: {big}</p>
    <p>Lodash: {lo}</p>
  </div>;
};

export default HomePage;

index.jsx を修正します。

import HomePage from "./components/HomePage";
import { ModulesProvider } from "alem";

const App = () => {
  return (
    <div>
      <p>dayjs testing:</p>
      <ModulesProvider />
      <HomePage />
    </div>
  );
};

export default App;

プレビュー効果：

big.js ✅
classnames ✅
dayjs ✅
lodash ✅
react-hot-toast ❌

利点：

esm のパスをカスタマイズでき、バージョンを選択できる
CSS が正常に動作する
ボタンクリックが正常に動作する

欠点：

TypeScript をサポートしていない
useModule の使用が簡単ではなく、単純な JS ファイルを呼び出して結果を計算することしかできない