vlambda博客
学习文章列表

Orbiton JS:用于构建 UI 的 JavaScript 库

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
复制代码

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

Orbiton JS:用于构建 UI 的 JavaScript 库

cd orbiton_app
npm install
复制代码

启动:

npm run start
复制代码

接下来创建一个 Avatar 组件:

const Avatar = (
<div class="avatar-box">
<img />
<span> DevPoint </span>
</div>
);
复制代码

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

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

const Avatar = (
<div class="avatar-box">
<img />
<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);
复制代码

运行后的效果: