AppRun

Introduction

AppRun is a lightweight alternative to other frameworks and libraries. It has a unique architecture inspired by the Elm architecture that can help you manage states, routing, and other essential aspects of your web application.

Use a Counter as an example.

// define the initial state
const state = 0;

// view is a function to display the state (JSX)
const view = state => <div>
  <h1>{state}</h1>
  <button onclick="app.run('-1')">-1</button>
  <button onclick="app.run('+1')">+1</button>
</div>;

// update is a collection of event handlers
const update = {
  '+1': state => state + 1,
  '-1': state => state - 1
};

// start the app
app.start(document.body, state, view, update);

<apprun-code></apprun-code>

AppRun is lightweight, only 6KB gzipped, but includes state management, rendering, event handling, and routing.
With only three functions: app.start, app.run, and app.on in its API makes it easy to learn and use. And no worries about the incompatibility of version upgrades.
One more thing, you can use AppRun with React to simplify state management and routing of your React applications.

At its core, AppRun harnesses the power of the event PubsSub pattern to streamline your application’s state handling and routing. The result? Cleaner, more maintainable code and a smoother development experience.

AppRun Benefits

Clean architecture that needs less code
State management and routing included
No proprietary syntax to learn (no hooks, no reducers, no signals)
Use directly in the browser or with a compiler/bundler
Advanced features: JSX, Web Components, Dev Tools, SSR, etc.

Getting Started

AppRun is distributed on npm. To get it, run:

npm install apprun

You can also load AppRun directly from the unpkg.com CDN:

<html>
<body>
<script src="https://unpkg.com/apprun/dist/apprun-html.js"></script>
<script>
  const view = state => `<div>${state}</div>`;
  app.start(document.body, 'hello AppRun', view);
</script>
</body>
</html>

<apprun-code style="height:200px"></apprun-code>

Or, use the ESM version:

<html>
<body>
<script type="module">
  import { app, html } from 'https://unpkg.com/apprun/dist/apprun-html.esm.js';
  const view = state => html`<div>${state}</div>`;
  app.start(document.body, 'hello ESM', view);
</script>
</body>
</html>