Compare the two frameworks NEAR BOS: ROC and Além.

Introduction#

1. BWE#

BWE stands for Blockchain Operation System Web Engine, which is a framework developed by NEAR. It aims to provide support for users to develop open network applications. Developers proficient in React can directly write React code in NEAR Sandbox to build applications. The released React code is hosted on IPFS, achieving decentralized front-end.

In terms of smart contracts, in order to improve the operational experience of front-end developers, NEAR provides a convenient way to call smart contracts through the built-in NEAR object. Developers only need to use the NEAR.call and NEAR.view functions to easily call smart contracts.

Since BOS is equivalent to a single-page application, it is particularly convenient to build small applications. However, for building slightly larger applications, two frameworks have emerged: ROC and Além.

This article mainly introduces the comparison between these two frameworks of BOS.

Introduction#

1. BWE#

BWE, short for BOS Web Engine, is an engine developed by NEAR. The official introduction is as follows.

BOS Web Engine (BWE) is the next-generation decentralized front-end execution environment. BWE makes decentralized front-end development closer to standard React development and provides enhanced browser-supported security. Note: "BOS Web Engine" is a temporary name and will be changed before release.

2. Além#

Além is developed by Twitter user wpdas. According to tweets, the product optimizes the user experience by significantly speeding up page loading on NEAR's BOS. Além is a web3 JavaScript/TypeScript library that allows you to create Web3 applications on NEAR's blockchain operating system. All components and other resources are converted into files that Near VM can understand, allowing you to create applications in a similar way to React. You can take advantage of the full functionality of JSX, as Além manages the child components of stateful and stateless components to ensure that they are handled and understood correctly.

IDE and Preview Comparison#

1. BWE#

BWE can be edited using the online editor Sandbox. Real-time preview is available. It is suitable for short-term activities, rapid prototyping, and product development.

2. Além#

Além can be developed locally through scaffolding, as shown on the Installation page. This software can create a project using the alem scaffolding. It is convenient, similar to editing with React, using local vscode.

In terms of preview, real-time preview is available during development through the local link: http://127.0.0.1:8080/alem-lib.testnet/widget/Index. Similarly, if you want to preview the address after publishing through the local bos, you can set the flags to http://127.0.0.1:8080/api/loader on this website: https://test.near.org/flags, and you can preview the published address at https://test.near.org/alem-lib.testnet/widget/Index.

React Hooks Compatibility#

1. BWE#

Tested using the following code:

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. Além#

Tested using the same code, and found that useRef does not exist.

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 and Compatibility#

I have listed some common libraries that web3 front-end may need. Compare whether they can be used normally.

1. BWE#

Tested using the following code:

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;

Rendered result:

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

Advantages:

No need to define esm address
Packages can be imported
Supports TypeScript

Disadvantages:

When testing classnames, it seems that CSS modules cannot run properly.
Button click cannot run during rendering.

2. Além#

First, define the esm import. Create a new file named 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"
}

Create a new HomePage.jsx file.

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;

Modify 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;

Preview result:

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

Advantages:

Customizable esm paths, version selection
CSS runs well
Button click runs well

Disadvantages:

Does not support TypeScript
useModule is not simple to use, can only call simple JS files and compute results