DOCSEARCHbyAlgolia
Submit Docs

Orbiton JS

website·Indexed 29 days ago

https://orbiton.js.org/docs/getting-started/quick-start

A JavaScript library for building user interfaces. Orbiton features a declarative XML-like JSX syntax, state management, and support for both client-side and server-side rendering via Orbiton Server.

Tokens
5.1K
Snippets
43
Records
52
Agent score
60%

What's inside Orbiton

  1. Orbiton JS Core Features

    Orbiton JS is designed for high performance and scalability with the following characteristics:

    • Lightweight: The library size is approximately 3.8kb (min+gzip).
    • DOM-centric: The renderer stays close to the native DOM to maintain performance comparable to vanilla JavaScript.
    • Reactive: Built-in reactivity for creating modern web apps and Progressive Web Apps (PWAs).
    • Modern API: Provides scalable and easy-to-understand APIs for application development.

  3. Link Orbiton JS packages for local development

    After building the packages, you must link the internal packages to ensure the development environment recognizes the local versions of the core library, server, and Babel plugin.
    cd packages/orbiton && yarn link && cd ../server && yarn link && cd ../babel-plugin-orbition-jsx && yarn link && cd ../../ && yarn link orbiton @orbiton/server babel-plugin-orbiton-jsx

  4. Implement inline conditional rendering with the ternary operator

    Use the JavaScript ternary operator (condition ? trueValue : falseValue) inside JSX to conditionally render specific text or elements without creating a separate component. This is useful for small changes within a larger block of JSX.
    render() {
  const isLoggedIn = this.state.isLoggedIn;
  return (
    <div>
      You are <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.
    </div>
  );
}

  5. Add attributes to elements in Orbiton

    Orbiton allows adding attributes to elements using either JSX or the createElement function. When using JSX, attributes follow camelCase naming conventions (e.g., data-attr becomes dataAttr). When using plain JavaScript via createElement, attributes are defined within an attributes object using standard HTML attribute keys.
    // JSX Syntax
<div id="special" dataAttr="value"></div>
    // Plain JavaScript Syntax
Orbiton.createElement(
  'div',
  {
    attributes: {
      id: "special",
      "data-attr": "value"
    }
  }
)

  6. Handle DOM events in Orbiton

    Event handling in Orbiton differs based on the syntax used. In JSX, events use camelCase (e.g., onClick) and accept a function as the handler. In plain JavaScript using createElement, events are defined within an events object using the lowercase event name (e.g., click) and a reference to the handler function.
    // JSX Syntax
<button onClick={submitForm}>
  Submit
</button>
    // Plain JavaScript Syntax
Orbiton.createElement(
  'button',
  {
    events: {
      click: submitForm
    },
    children: [
      "Submit"
    ]
  }
)

  7. Access props in Orbiton Class Components

    To access props in a class component, you must define a constructor that accepts props and context as arguments and calls super(props, c). Once initialized, props are accessed via this.props within the class methods.
    import Orbiton, {Component} from "orbiton";

class App extends Component {
  constructor(props, c) {
    super(props, c);
  }
  render() {
    return (
      <div>
        <h1>Your name is {this.props.name}</h1>
      </div>
    )
  }
}

  8. Install Orbiton Server for Node or Deno

    The @orbiton/server package allows for rendering Orbiton Elements into HTML strings on the server. It is compatible with both Node.js and Deno environments.
    # Node
npm install @orbiton/server
    // Deno
import * as OrbitonServer from "https://cdn.jsdelivr.net/npm/@orbiton/server@0.0.2/deno/index.js"

  9. Create dynamic functional components using props

    Functional components are functions that return an Orbiton element. To make a component dynamic, pass a props object as an argument to the function. This allows the same component structure to render different data.
    function Post(props) {
  return (
    <section>
      <img src={props.image} />
      <p>{props.likes} likes</p>
      <button onClick={like}></button>
      <p>{props.caption}</p>
    </section>
  )
}

  10. Group elements without adding DOM nodes using Fragments

    Fragments allow you to group a list of children without adding extra wrapper nodes to the DOM. This is particularly useful when a component needs to return multiple elements but JSX requires a single root element.

    Fragments must follow two rules:

    1. A fragment must always have at least one child element.
    2. The child of a fragment cannot be a string.
    import {Fragment} from "orbiton"

const App = (
  <Fragment>
    <h1> My App</h1>
    <div>...</div>
    <div>...</div>
  </Fragment>
)

  11. Add Orbiton JS to a website via CDN

    To quickly use Orbiton JS in the browser, add a script tag using the jsDeliver CDN. Use the development build for debugging and the minified production build for deployment. To target a specific version, append @version to the package name in the URL (e.g., orbiton@1.2.4).
    <!-- Development mode -->
<script src="https://cdn.jsdeliver.net/npm/orbiton/umd/orbitonjs.development.js" crossorigin></script>

<!-- Production mode (optimized and minified) -->
<script src="https://cdn.jsdeliver.net/npm/orbiton/umd/orbitonjs.production.min.js" crossorigin></script>

<!-- Specific version example (v1.2.4) -->
<script src="https://cdn.jsdeliver.net/npm/orbiton@1.2.4/umd/orbitonjs.development.js" crossorigin></script>

  12. Configure Babel to transpile JSX for Orbiton

    Orbiton uses a custom Babel plugin to transpile JSX. To enable JSX support, you must install both the official Babel JSX syntax plugin and the Orbiton JSX plugin. The syntax plugin must be listed before the Orbiton plugin in the configuration to ensure Babel can parse the JSX syntax before it is transformed.
    # Using NPM
npm install babel-plugin-orbiton-jsx @babel/plugin-syntax-jsx 

# Using Yarn
yarn add babel-plugin-orbiton-jsx @babel/plugin-syntax-jsx 
    {
  "plugins": [
    "@babel/plugin-syntax-jsx", 
    "babel-plugin-orbiton-jsx"
    ]
}