JSPM

apprun

1.5.4
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 801
  • Score
    100M100P100Q111259F
  • License MIT

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 lightweight library for developing applications using the elm style model-view-update architecture based on the event publication and subscription pattern

Why

As mainly a business application developer, I wanted a library that has everything included and is lightweight.

  • router
  • state management
  • virtual dom
  • event system
  • component

And allows me to:

  • have as little ceremony code as possible
  • avoid having business logic locked down by framework/library
  • use with other framework/libraries freely

AppRun is intended to be such a library. Its use of the event publication and subscription pattern makes AppRun elegant and different to other frameworks/libraries.

In the Demo App built with AppRun,

  • The Todo component was written 90 in lines.
  • The Hacker News component was written in 230 line.

Quick Start

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

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

No other ceremony, you can start write code of model, view and update right away.

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Counter</title>
</head>
<body>
<script src="https://unpkg.com/apprun@latest/dist/apprun.js"</script>
  <div id="my-app"></div>
  <script>
    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);
  </script>
</body>
</html>

Or try it online: AppRun - Counter.

Install

If interested, you can install AppRun from npm and initialize a TypeScript and webpack configured project:

npm install apprun
apprun --init
npm start

Explore More

To explore more about AppRun, read the following docs.

Contribute

You can launch the webpack dev-server and the demo app from the demo folder by npm commands:

npm install
npm start

You can run the unit tests from the tests folder.

npm test

Unit tests can serve as the functional specifications.

Finally, to build optimized js files to dist folder by run:

npm run build

Have fun and send pull requests.

License

MIT

Copyright (c) 2015-2017 Yiyi Sun