Orbiton JS：用于构建 UI 的 JavaScript 库

2022 年 3 月 27 日
本文字数：1407 字
阅读完需：约 5 分钟

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_appnpm 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);