AppRun

AppRun is a JavaScript library for building reliable, high-performance web applications using the Elm-inspired architecture, events, and components.

// define the application state
const state = 0;

// view is a pure function to display the state
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
};
app.start(document.body, state, view, update, { transition: true });

Note, the transition option is newly added to enable the View Transition API during the rendering of the view.

AppRun Benefits

• Clean architecure that needs less code
• State management and routing included
• No proprietary syntax to learn (no hooks)
• 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:

<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>

Or, use the ESM version:

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

Or, you can create an AppRun app by using the npm create apprun-app command.

npm create apprun-app [my-app]

Component and Web Component

An AppRun component is a mini-application with elm architecture, which means inside a component, there are state, view, and update. In addition, components provide a local scope.

class Counter extends Component {
  state = 0;
  view = state => {
    const add = (state, num) => state + num;
    return <>
      <h1>{state}</h1>
      <button $onclick={[add, -1]}>-1</button>
      <button $onclick={[add, +1]}>+1</button>
      </>;
  }
}
app.render(document.body, <Counter/>);

You can convert AppRun components into web components/custom elements. AppRun components become the custom elements that also can handle AppRun events.

class Counter extends Component {
  state = 0;
  view = state => {
    const add = (state, num) => state + num;
    return <>
      <h1>{state}</h1>
      <button $onclick={[add, -1]}>-1</button>
      <button $onclick={[add, +1]}>+1</button>
      </>;
  }
}
app.webComponent('my-app', Counter);
app.render(document.body, <my-app />);

All the Ways to Make a Web Component - May 2021 Update compares the coding style, bundle size, and performance of 55 different ways to make a Web Component. It put AppRun on the top 1/3 of the list of bundle size and performance.

Learn More

You can get started with AppRun Docs and the AppRun Playground.

AppRun Book from Apress

• Order from Amazon

Contribute

You can launch the webpack dev-server and the demo app from the demo folder with the following npm commands:

npm install
npm start

You can run the unit tests from the tests folder.

npm test

Unit tests can serve as functional specifications.

Finally, to build optimized js files to the dist folder, just run:

npm run build

Have fun and send pull requests.

Contributors

Support

AppRun is an MIT-licensed open source project. Please consider supporting the project on Patreon. 👍❤️🙏

Thank you for your support

• Athkahden Asura
• Alfred Nerstu
• Gyuri Lajos
• Lorenz Glißmann
• Kevin Shi
• Chancy Kennedy

License

MIT

Copyright (c) 2015-2022 Yiyi Sun