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 >
                            Official Documentation
                        </a>{" "}
                    </code>
                    to Learm Orbiton
                </p>
            </div>
        </div>
    );
}

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

運行后的效果：