Orbiton JS Orbiton JS is the ultimate JavaScript library for creating UIs. Orbiton JS is a lightweight, minimalist JavaScript library for creating browser UIs that provides an easy-to-use API for creating fast, painless high-performance applications.

The rise of Web frameworks has transformed Web development by making it possible to ship Web concepts to other platforms, such as mobile devices as desktops. With a focus on JavaScript front-end development, libraries such as React, vue.js, and Angular play an important role in UI development and make up the largest portion of the developer base. This is changing, with new libraries like Svelte JS introducing new concepts, namely compilation frameworks.

Speaking of new, Orbiton JS is here. It is a new JavaScript library for building UIs and has been described as “the ultimate JavaScript library for building user interfaces”.

Orbiton JS is primarily focused on performance, and to achieve this goal, the core team writes code that tries to use as little memory as possible, depending on how different JavaScript engines, such as V8 and Gecko, compile and run JavaScript. Faster and with high performance, Svelte was first Orbiton, then Vue.js, and finally React.

Orbiton JS also uses existing tools in the JavaScript ecosystem to easily transition from other frameworks.

  • It uses JSX as its default template syntax.
  • There are also Babel and SWC plug-ins that convert JSX into working JavaScript.

One major disadvantage of this library is its use of the virtual Dom. The library’s authors tried to preserve this because they wanted Orbiton to be portable in applications of any size.

start

Here is a sample application to create a project by following the steps on the official website:

npx degit Orbitonjs/template orbiton_app
Copy the code

After the command completes, the basic project structure is generated:

cd orbiton_app
npm install
Copy the code

Activation:

npm run start
Copy the code

Next create an Avatar component:

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

In use, it can be used by
reference, the complete code is as follows:

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);Copy the code

Effect after operation: