AppRun is a 3K library for developing high-performance and reliable web applications using the elm inspired architecture, events and components.
Latest commit 71578ca Nov 1, 2018

README.md

AppRun Build NPM version Downloads License twitter

AppRun is a 3K library for building high-performance and reliable web applications using the Elm inspired Architecture, event pub-sub and components.

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

Architecture Concept

Application logic is broken down into three separated parts in the AppRun architecture.

  • State (a.k.a. Model) — the state of your application
  • View — a function to display the state
  • Update — a collection of event handlers to update the state

AppRun ties the three parts together and drives the applications using event pub-sub.

Applications built with AppRun have less lines of code, smaller js files, and better performance. See a comparison from A Real-World Comparison of Front-End Frameworks with Benchmarks (2018 update). You can also see the performance results compared to other frameworks and libraries in the js-framework-benchmark project.

Quick Start

Below is a counter application using AppRun.

<html>
<head>
  <meta charset="utf-8">
  <title>Counter</title>
</head>
<body>
  <script src="https://unpkg.com/apprun@latest/dist/apprun-html.js"></script>
  <div id="my-app"></div>
  <script>
    const state = 0;
    const view = state => {
      return `<div>
        <h1>${state}</h1>
        <button onclick='app.run("-1")'>-1</button>
        <button onclick='app.run("+1")'>+1</button>
      </div>`;
    };
    const update = {
      '+1': state => state + 1,
      '-1': state => state - 1
    };
    app.start('my-app', state, view, update);
  </script>
</body>
</html>

Web Components

Using apprun@es6, you can convert AppRun components into web components. AppRun components become the custom elements that also can handle AppRun events.

<html>
<head>
  <meta charset="utf-8">
  <title>Counter as web component</title>
</head>
<body>
  <my-app id='counter'></my-app>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/custom-elements/1.1.2/custom-elements.min.js"></script>
  <script src="https://unpkg.com/apprun@es6/dist/apprun-html.js"></script>
  <script>
    class Counter extends Component {
      constructor() {
        super();
        this.state = 0;
        this.view = state => `<div>
          <h1>${state}</h1>
          <button onclick='counter.run("-1")'>-1</button>
          <button onclick='counter.run("+1")'>+1</button>
          </div>`;
        this.update = {
          '+1': state => state + 1,
          '-1': state => state - 1
        };
      }
    }
    app.webComponent('my-app', Counter);
  </script>
</body>
</html>

Install

You can include AppRun in your html directly and use it with JavaScript.

<script src="https://unpkg.com/apprun@latest/dist/apprun-html.js"></script>

CLI

Or you can use AppRun with TypeScript and Webpack. Use the AppRun CLI to initialize a TypeScript and webpack configured project:

npx apprun --init --spa
npm start

Online Demos

See Examples Online @glitch.com and @stackblitz.com

Dev-Tools

To use the AppRun dev-tools, include the the dev-tools script.

<script src="https://unpkg.com/apprun@latest/dist/apprun-dev-tools.js"></script>

Then install the Redux DevTools Extension. You can monitor the events and states in the devtools.

app-dev-tools

Documentation

To explore more about AppRun, read the following.

Video Tutorials

Articles

Examples

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.

License

MIT

Copyright (c) 2015-2018 Yiyi Sun