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 3K library for building applications using the Elm architecture, event pub-sub and components.

AppRun has a tiny API which has just three functions and one component class. It acts like glue to link and drives your application logic. It adds no overhead or ceremony.

Applications built with AppRun have less line of code, smaller js file, and better performance. See a comparison from A Real-World Comparison of Front-End Frameworks with Benchmarks (2018 update).

AppRun has good performance. You can see the performance results compared to other frameworks and libraries in the js-framework-benchmark project.

AppRun is flexible and practical. It gives options. You can choose:

Whether just include it in a script tag or use it with a build process.
Which language to use, JavaScript or TypeScript;
Apply the Elm architecture globally or use components;
Create view in HTML or Virtual DOM/JSX;
Whether to using static types;

Quick Start

To give it a try, include AppRun in your html.

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

No other ceremony, you can start developing your app right away.

<!doctype html>
<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>

The example code above is a counter application that has implemented the Elm architecture.

Architecture Concept

There are three separated parts in the Elm architecture.

Model — the data model of your application state
View — a function to display the state as HTML string ot virtual DOM
Update — a collection of event handlers to update the state

AppRun applications have the event cycle like below to drive the architecture:

Web events => AppRun Events => Update => State => View => HTML

Using events makes it very easy to handle user interaction, routing and even server-side events. Events make modules decoupled and easy to test. Using the event pub-sub also solved the component relationship and communication problem that concerns Elm community.

Each AppRun Component has an Elm architecture like a mini-application. It is very suitable for building Single Page Applications (SPA).

Coming soon in AppRun 2.0, AppRun components can also be converted into web components. The web components are powered with the Elm architecture and can be programmed using events.

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Counter as web component</title>
</head>
<body>
  <my-app id='counter'></my-app>
  <script src="https://unpkg.com/apprun@beta/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>

Try More Examples Online

glitch.com - AppRun Excamples
stackblitz.com - AppRun Examples

Other Github Projectss

RealWorld Example App - a SPA blogging platform adheres to the RealWorld specification (1100 lines).
Hacker News Reader - PWA hacker news reader (230 lines)
AppRun Demo App - a SPA that has 8 components, including a Todo component (90 lines)
AppRun Server-Side Rendering
AppRun Multilingual Example
AppRun Firebase Authentication
AppRun Dynamic Module Import
AppRun Hot Module Reload with Webpack
Use Apprun with Parcel
AppRun Desktop Application with Electron
AppRun Mobile Application with Framework7

Install

If you are interested in moving forward, you can install the AppRun CLI and initialize a TypeScript and webpack configured project:

npx apprun --init --spa
npm start

Explore More

To explore more about AppRun, read the following.

Video Tutorials

Articles

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