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 library to help implementing the elm/ Redux model-view-update architecture in plain JavaScript or TypeScript code.

An Example

The 15 lines of code below is a simple counter. Two functions from AppRun (app.run and app.start) are used to make it elm architecture.

/// <reference path="apprun.d.ts" />
const model = 0;

const view = (model) => {
  return `<div>
    <h1>${model}</h1>
    <button onclick='app.run("-1")'>-1</button>
    <button onclick='app.run("+1")'>+1</button>
  </div>`;
};

const update = {
  '+1': (model) => model + 1,
  '-1': (model) => model - 1
};

const element = document.getElementById('my-app');
app.start(element, model, view, update);

Basic Concepts

The elm architecture has three parts.

Model — the state of your application
Update — a way to update your state
View — a way to view your state as HTML

app.start ties the three parts together to an element on page. That's the architecture.

The Model

Model can be any data structure, a number, an array, or an object that reflects the state of the application.

const model = 0;

Define Update

Update is defined as JavaScript object declaratively.

const update = {
  '+1': (model) => model + 1,
  '-1': (model) => model - 1
}

There are a couple of more creative ways to define the update object.

const update = {
  INCREASE: (model) => model + 1,
  DECREASE: (model) => model - 1
}

const update = {};
update['+1'] = (model) => model + 1;
update['-1'] = (model) => model - 1;

Update re-creates the model.

Run Update

app.run is the function to run the update.

app.run('INCREASE');

It can be used in HTML markup:

<button id="inc" onclick="app.run('INCREASE')">+1</button>

Or in JavaScript:

document.getElementById('inc').addEventListener('click',
  () => app.run('INCREASE'));

Or with jQuery:

$('#inc').on('click', () => app.run('INCREASE'));

HTML View

Once the update re-creates model, AppRun passes the new model into the view function. The view function generates HTML using the model. AppRun calculates the differences against the web page element and renders the changes.

const view = (model) => `<div>${model}</div>`;

ES2015 string interpolation made it very easy to construct HTML string. Even creating a list is straight forward.

const view = (numbers) => {
  return numbers.reduce(prev, curr) {
    prev + `<li>${curr}</li>`;
  }, '');
}

Conclusion

The steps to make an application are

Create a model that can be a number, an array or an object
Create a update object that has functions to re-create the model
Create a view that creates HTML string based on the model
Start the app in an element - app.start
Run the update - app.run

That's all. You can find examples that are made this way in example projects .

License

MIT