oneJS

The one framework you need

A functional, JavaScript only, cross platform framework.

oneJS is a next generation, open source JavaScript framework for building modern apps for web and mobile from a single codebase. oneJS is not owned by any Tech Giant; it is an independent project developed by contributors from all around the world. oneJS is based on three principles:

• Functional: Predictable, code efficient and easily testable. Pure functions are the building blocks of oneJS. Fall in love with the functional programming paradigm ❤️.
• JS Only. Really: You can write your entire app in pure Vanilla JS or Typescript. That's right, not a single line of HTML, CSS or JSX needed. Can you believe it?
• Cross Platform: Write the same code for web and native apps. Simplicity is our true cross platform weapon; reduce your effort and multiply your reach! Powered by React and React Native's new architecture.

🗂️ Repositories

All the power in oneJS is contained in two repositories:

• core: The main oneJS repository. It contains all the functions to setup the app, customize the look and feel and manage the state.
• components: A component is a function that receives properties and returns a structure that can be rendered on the screen. This repository contains all the components offered out of the box by oneJS and functions to create your own.

🚀 Get Started

Open your terminal window and navigate to the folder that will contain your app. Once there type the command below:

npx @onejs-dev/create-app

Follow the instructions in the terminal to setup your app. Once ready, type the start command:

npm start

Visit the Start! section of our website for more in depth content.

🧪 Example

Our best publicity is our own code. The example below is our version of the "Hello World!" staple:

/* Imports: Required modules to setup the app ================================================== */
import { app, read, update } from "@onejs-dev/core";
import { Text, View, Input } from "@onejs-dev/components";

/* State: Variable declaration  ================================================================= */
const state = { name: "World" };

/* App Component: Returns the structure to be rendered ========================================== */
const AppComponent = () => {
    return View({ content: { h: "center", v: "center", direction: "column" } })([
        Text({ style: { fontSize: 22, paddingBlock: 60 } })(`Hello ${read("name")}!`),
        Input({ type: "text", value: read("name"), onChange: update("name") })
    ]);
};

/* App Function: Renders the App Component in the screen ======================================== */
app({component: AppComponent, theme: {preset: "oneJS"}, state: state });

100% JavaScript as promised. You won’t have to write a single line in any other language.

Use the online Playground to put your skills to test.

📖 Documentation

The full oneJS documentation can be found on our website.

You do not require extensive JavaScript knowledge to become an expert in oneJS; the learn section will take you from zero to hero! It is composed of several units, each focusing on a key topic.

⚖️License

oneJS is MIT licensed.