Package Exports

apprun

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (apprun) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

AppRun

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

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

AppRun Benefits

Write less code
No proprietary syntax to learn
Compiler/transpiler is optional
State management and routing included
Run side-by-side with jQuery, chartjs, D3, lit-html ...

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 (2019 update). You can also see the performance results compared to other frameworks and libraries in the js-framework-benchmark project.

AppRun Book from Apress

Order from Amazon

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

Quick Start

AppRun is distributed on npm.

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>

Or use it as ES module from unpkg.com:

<script type="module">
  import { app, Component } from 'https://unpkg.com/apprun@next/esm/apprun-html?module';
</script>

Examples

Use AppRun in Browsers (HTML)

Below is a counter application using AppRun (Online Demo).

<html>
<head>
  <meta charset="utf-8">
  <title>Counter</title>
</head>
<body>
  <script src="https://unpkg.com/apprun/dist/apprun-html.js"></script>
  <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(document.body, state, view, update);
  </script>
</body>
</html>

Web Component (lit-HTML)

Below is a counter application using AppRun (Online Demo).

<html>
<head>
  <meta charset="utf-8">
  <title>Counter Web Component</title>
</head>
<body>
  <wc-lit-html></wc-lit-html>
  <script type="module">
    import { app, Component } from 'https://unpkg.com/apprun@next/esm/apprun-html?module';
    class Counter extends Component {
      state = 0;
      view = (state) => html`<div>
      <h1>${state}</h1>
        <button @click=${()=>this.run("add", -1)}>-1</button>
        <button @click=${()=>this.run("add", +1)}>+1</button>
      </div>`;
      update =[
        ['add', (state, n) => state + n]
      ]
    }
    app.webComponent('wc-lit-html', Counter);
  </script>
</body>
</html>

AppRun Playground

Try the AppRun Playground to see more examples.

Use JSX, Directive, TypeScript and Webpack

You can use AppRun with TypeScript and Webpack. Below is a counter application using AppRun JSX and Directive that can be compiled and bundled using TypeScript and Webpack (Online Demo).

import app from 'apprun';
const state = 0;
const view = state => <div>
  <h1>{state}</h1>
  <button $onclick={state => state - 1}>+1</button>
  <button $onclick={state => state + 1}>+1</button>
</div>;
app.start(document.body, state, view);

Use the AppRun CLI to initialize a TypeScript and webpack configured project:

npx apprun --init
npm start

You can also initialize a SPA project.

npx apprun --init --spa

To initialize a project that targets ES5, use the AppRun CLI with the --es5 flag:

npx apprun --init --spa --es5

Optionally, if not using the CLI you can directly scaffold AppRun project from the AppRun starter templates.

npx degit apprunjs/apprun-rollup my-app
npx degit apprunjs/apprun-rollup-lit-html my-app
npx degit apprunjs/apprun-webpack my-app
npx degit apprunjs/apprun-parcel my-app
npx degit apprunjs/apprun-web-components my-app
npx degit apprunjs/apprun-bootstrap my-app
npx degit apprunjs/apprun-electron-forge my-app

Developer Tools

CLI in Console

AppRun CLI also runs in console.

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

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

Dev-Tools Extensions

AppRun support the Redux DevTools Extension. To use the dev-tools, install the Redux DevTools Extension. You can monitor the events and states in the devtools.

app-dev-tools

VS Code Extension

AppRun has a code snippet extension for VS Code that you can install from the extension marketplace. It inserts AppRun code template for application, component and event handling.

app-dev-tools

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

License

MIT