devpoint.cn

Orbiton JS 是一个用于创建 UI 的终极 JavaScript 库，是一个用于创建浏览器 UI 的轻量级极简 JavaScript 库，提供了一个易于使用的 API，用于创建快速、无痛的高性能应用程序。

Web 框架的兴起已经改变了 Web 开发，它使得将 Web 概念发送到其他平台（如移动设备作为桌面）成为可能。由于专注于 JavaScript 的前端开发，React、Vue.js 和 Angular 等库在 UI 开发中发挥了重要作用，并占据了开发人员基础的最大部分。而这种情况正在发生变化，像 Svelte JS 这样的新库正在引入新概念，即编译框架。

说到新的，Orbiton JS 出现了。它是一个用于构建 UI 的新 JavaScript 库，被称为“用于构建用户界面的终极 JavaScript 库”。

Orbiton JS 主要关注性能，为了达到这一目标，核心团队编写代码，根据不同的 JavaScript 引擎（如 V8 和 Gecko）编译和运行 JavaScript 的方式，尝试使用尽可能少的内存。其更快并具有高性能，Svelte 首先是 Orbiton，然后是 Vue.js，最后是 React。

Orbiton JS 还使用 JavaScript 生态系统中现有的工具来轻松地从其他框架过渡。

• 它使用 JSX 作为其默认模板语法。
• 还具有将 JSX 转换为有效 JavaScript 的 babel 和 SWC 插件。

这个库有一个主要缺点，那就是它利用了虚拟 Dom。这个库的作者试图保留这一点，因为他们想让 Orbiton 在任何规模的应用程序中都可移植。

开始

下面就根据官方网站的步骤来构建一个示例应用，创建项目：

npx degit Orbitonjs/template orbiton_app

命令完成之后生成基本的项目结构：

cd orbiton_app
npm install

启动：

npm run start

接下来创建一个 Avatar 组件：

const Avatar = (
    <div class="avatar-box">
        <img src="https://p9-passport.byteacctimg.com/img/user-avatar/ee5b3d33c959244bf7b70b28bb3a4d07~300x300.image" />
        <span> DevPoint </span>
    </div>
);

在使用中，可以通过 <Avatar /> 引用使用，完整代码如下：

import Orbiton, { append } from "orbiton";
import "../styles/index.css";

const Avatar = (
    <div class="avatar-box">
        <img src="https://p9-passport.byteacctimg.com/img/user-avatar/ee5b3d33c959244bf7b70b28bb3a4d07~300x300.image" />
        <span> DevPoint </span>
    </div>
);
// just reuse it anywhere you need it

function App(props) {
    const style = {
        margin: "0px auto",
        maxWidth: "800px",
        textAlign: "center",
    };

    return (
        <div className="app">
            <div style={style}>
                <h1>
                    Welcome To the <span className="highlight">Orbiton</span>{" "}
                    Template.
                </h1>
                <p>
                    <Avatar />
                </p>
                <p>
                    You can visit the{" "}
                    <code>
                        <a href="https://orbiton.js.org">
                            Official Documentation
                        </a>{" "}
                    </code>
                    to Learm Orbiton
                </p>
            </div>
        </div>
    );
}

const root = document.createElement("div");
document.body.appendChild(root);
append(<App />, root);

运行后的效果：