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, events, and components.

What makes AppRun different from Elm, or other Elm inspired frameworks and libraries is that AppRun uses the Event Pub-Sub and Components that each component has its own elm architecture.

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.

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

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.

Try it online: AppRun - Counter.

Architecture Concept

There are three separated parts in the elm architecture.

Model — the data model of your application state
Update — a set of functions to update the state
View — a function to display the state as HTML

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 also make your code modules decoupled and easy to test.

In addition, AppRun allows you to build applications using Component. Each component has an elm architecture. It is very suitable for Single Page Applications (SPA).

Examples

RealWorld Example App - a 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

Install

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

npm install apprun -g
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