Orbiton JS: biblioteca de JavaScript para construir UI

Orbiton JS es la biblioteca de JavaScript definitiva para crear interfaces de usuario, una biblioteca de JavaScript minimalista y liviana para crear interfaces de usuario de navegador que proporciona una API fácil de usar para crear aplicaciones rápidas, sencillas y de alto rendimiento.

El auge de los marcos web ha transformado el desarrollo web, lo que hace posible enviar conceptos web a otras plataformas, como dispositivos móviles como computadoras de escritorio. Con un enfoque en el desarrollo front-end en JavaScript, las bibliotecas como React, Vue.js y Angular desempeñan un papel importante en el desarrollo de la interfaz de usuario y representan la mayor parte de la base de desarrolladores. Y esto está cambiando, nuevas librerías como Svelte JS están introduciendo nuevos conceptos, compilando frameworks.

Hablando de nuevos, Orbiton JS está aquí. Es una nueva biblioteca de JavaScript para crear interfaces de usuario, denominada "la biblioteca de JavaScript definitiva para crear interfaces de usuario".

Orbiton JS se enfoca principalmente en el rendimiento y, para lograrlo, el equipo central escribe un código que trata de usar la menor cantidad de memoria posible dependiendo de cómo los diferentes motores de JavaScript (como V8 y Gecko) compilan y ejecutan JavaScript. Más rápido y eficaz, Svelte fue primero Orbiton, luego Vue.js y finalmente React.

Orbiton JS también utiliza las herramientas existentes en el ecosistema de JavaScript para realizar una transición sencilla desde otros marcos.

• Utiliza JSX como su sintaxis de plantilla predeterminada.
• También hay complementos de babel y SWC que convierten JSX en JavaScript válido.

Una de las principales desventajas de esta biblioteca es que utiliza Dom virtual. Los autores de esta biblioteca intentaron preservar esto porque querían hacer que Orbiton fuera portátil en aplicaciones de cualquier tamaño.

Comienzo

Construyamos una aplicación de muestra y creemos un proyecto de acuerdo con los pasos del sitio web oficial:

npx degit Orbitonjs/template orbiton_app
复制代码

Una vez que se completa el comando, se genera la estructura básica del proyecto:

cd orbiton_app
npm install
复制代码

puesta en marcha:

npm run start
复制代码

A continuación, cree un Avatarcomponente :

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

En uso, se puede usar por <Avatar />referencia , el código completo es el siguiente:

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

El efecto después de correr: