比較NEAR BOS的兩個框架：ROC與Além

前言#

BOS 的全稱是 Blockchain Operation System，是由 NEAR 開發的一個框架，旨在為用戶開發開放網絡應用程序提供支持。擅長 React 的開發者可以在 NEAR Sandbox 直接編寫 React 代碼來構建應用程序。發布後的 React 代碼將托管到 IPFS，實現了去中心化前端。

在智能合約方面，為了提高前端開發者的操作體驗，NEAR 通過內置對象 NEAR，提供了便捷的智能合約調用方式，開發者只需使用 NEAR.call 和 NEAR.view 函數即可輕鬆調用智能合約。

由於 BOS 相當於一個單頁應用程序，構建小型應用特別方便。但對於構建稍微大型的應用程序，誕生了兩個框架：ROC 和 Além。

本文主要介紹 BOS 的這兩個框架之間的對比。

介紹#

1. BWE#

BWE 全稱是 BOS Web Engine，是 NEAR 官方開發的一個引擎。官方介紹如下。

BOS Web Engine (BWE) 是下一代去中心化前端執行環境。BWE 使去中心化前端開發更加接近標準 React 開發，並提供增強的、瀏覽器支持的安全性。Note: “BOS Web Engine” 是一個暫定名稱，將在發布前更改

2. Além#

Além 是由推特用戶 wpdas 開發。據推文介紹，該產品通過在 NEAR 的 BOS 上顯著加快頁面加載速度來優化用戶體驗。 Além 是一個 web3 JavaScript/TypeScript 庫，允許您在 NEAR 協議的區塊鏈操作系統上創建 Web3 應用程序。所有組件和其他資源都轉換為 Near VM 可以理解的文件，允許您以與 React 類似的方式創建應用程序。您可以利用 JSX 的全部功能，因為 Além 管理有狀態組件和無狀態組件的子組件，確保它們得到正確處理和理解。

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 modules 似乎無法正常運行。
button click 在渲染的時候也無法運行。

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 運行良好
button click 運行良好

缺點：

不支持 typescript
useModule 使用不簡單，只能調用一些簡單的 js 文件並運算成結果