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.
- 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.
AppRun is distributed on npm. To get it, run:
npm install apprunYou 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]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.
You can get started with AppRun Docs and the AppRun Playground.
You can launch the webpack dev-server and the demo app from the demo folder with the following npm commands:
npm install
npm startYou can run the unit tests from the tests folder.
npm testUnit tests can serve as functional specifications.
Finally, to build optimized js files to the dist folder, just run:
npm run buildHave fun and send pull requests.
AppRun is an MIT-licensed open source project. Please consider supporting the project on Patreon. 👍❤️🙏
- Athkahden Asura
- Alfred Nerstu
- Gyuri Lajos
- Lorenz Glißmann
- Kevin Shi
- Chancy Kennedy
MIT
Copyright (c) 2015-2022 Yiyi Sun
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent