banner
Steve Yu

Steve Yu

随着浪潮前进
twitter

比较NEAR BOS的两个框架:ROC与Além

前言#

BOS 的全称是 Blockchain Operation System,是由 NEAR 开发的一个框架,旨在为用户开发开放网络应用程序提供支持。擅长 React 的开发者可以在 NEAR Sandbox 直接编写 React 代码来构建应用程序。发布后的 React 代码将托管到 IPFS,实现了去中心化前端。

在智能合约方面,为了提高前端开发者的操作体验,NEAR 通过内置对象 NEAR,提供了便捷的智能合约调用方式,开发者只需使用 NEAR.call 和 NEAR.view 函数即可轻松调用智能合约。

由于 BOS 相当于一个单页应用程序,构建小型应用特别方便。但对于构建稍微大型的应用程序,诞生了两个框架:ROCAlé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 进行编辑。可以进行实时预览。适合短期做活动,和快速开发原型并发布的产品。

image

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 这边预览发布后的地址。

image

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;

渲染后的效果:

image

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

优点:

  1. 无须定义 esm 地址
  2. 可以通过 import 导入包
  3. 支持 typescript

缺点:

  1. 在测试 classnames 的时候,发现 css modules 似乎无法正常运行。
  2. button click 在渲染的时候也无法运行。

2. Alem#

  1. 首先定义 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"
}

  1. 新建一个 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;

  1. 修改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;

预览效果:

image

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

优点:

  1. 可以自定义 esm 的路径,选择版本
  2. css 运行良好
  3. button click 运行良好

缺点:

  1. 不支持 typescript
  2. useModule 使用不简单,只能调用一些简单的 js 文件并运算成结果
加载中...
此文章数据所有权由区块链加密技术和智能合约保障仅归创作者所有。