Orbiton JS: JavaScript-Bibliothek zum Erstellen von Benutzeroberflächen

Orbiton JS ist die ultimative JavaScript-Bibliothek zum Erstellen von Benutzeroberflächen, eine leichtgewichtige, minimalistische JavaScript-Bibliothek zum Erstellen von Browser-Benutzeroberflächen, die eine benutzerfreundliche API zum Erstellen schneller, problemloser Hochleistungsanwendungen bietet.

Der Aufstieg von Web-Frameworks hat die Webentwicklung verändert und es ermöglicht, Webkonzepte auf andere Plattformen wie mobile Geräte als Desktops zu übertragen. Mit einem Fokus auf Frontend-Entwicklung in JavaScript spielen Bibliotheken wie React, Vue.js und Angular eine wichtige Rolle in der UI-Entwicklung und machen den größten Teil der Entwicklerbasis aus. Und das ändert sich, neue Bibliotheken wie Svelte JS führen neue Konzepte ein und kompilieren Frameworks.

Apropos neue, Orbiton JS ist da. Es ist eine neue JavaScript-Bibliothek zum Erstellen von Benutzeroberflächen, die als „die ultimative JavaScript-Bibliothek zum Erstellen von Benutzeroberflächen“ bezeichnet wird.

Orbiton JS konzentriert sich hauptsächlich auf Leistung, und um dies zu erreichen, schreibt das Kernteam Code, der versucht, so wenig Speicher wie möglich zu verwenden, je nachdem, wie verschiedene JavaScript-Engines (wie V8 und Gecko) JavaScript kompilieren und ausführen. Schneller und leistungsfähiger war Svelte zuerst Orbiton, dann Vue.js und schließlich React.

Orbiton JS verwendet auch vorhandene Tools im JavaScript-Ökosystem, um problemlos von anderen Frameworks zu wechseln.

• Es verwendet JSX als Standardvorlagensyntax.
• Es gibt auch babel- und SWC-Plugins, die JSX in gültiges JavaScript umwandeln.

Ein großer Nachteil dieser Bibliothek ist, dass sie den virtuellen Dom verwendet. Die Autoren dieser Bibliothek versuchten, dies zu bewahren, weil sie Orbiton für Anwendungen jeder Größe portabel machen wollten.

Start

Lassen Sie uns eine Beispielanwendung erstellen und ein Projekt gemäß den Schritten der offiziellen Website erstellen:

npx degit Orbitonjs/template orbiton_app
复制代码

Nach Abschluss des Befehls wird die grundlegende Projektstruktur generiert:

cd orbiton_app
npm install
复制代码

Anlaufen:

npm run start
复制代码

Erstellen Sie als Nächstes eine AvatarKomponente :

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

Im Gebrauch kann es als <Avatar />Referenz , der vollständige Code lautet wie folgt:

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

Die Wirkung nach dem Laufen: