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.

Quick Start

AppRun Playground

Try the AppRun Playground.

Use AppRun in Browsers

You can include AppRun in your html directly and use it with JavaScript.

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

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@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>

Use TypeScript and Webpack

You can use AppRun with TypeScript and Webpack. Use the AppRun CLI to initialize a TypeScript and webpack configured project:

npx apprun --init --spa
npm start

To initialize a project that targets ES6/ES2015, use the AppRun CLI with the --es6 flag:

npx apprun --init --spa --es6
npm start

AppRun Site Framework

AppRun Site is an framework for building AppRun applications. It has the following features:

Progressive Web App (PWA) - support offline
Single Page App (SPA) - routing using / or #
4 built-in layouts and bring your own
Compile html, markdown pages to AppRun components
Auto generate the index of pages
Build app logic using AppRun/Web components
Targets ES5 or ES Module

Please visit AppRun Site Documentations.

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.

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.

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

MicahZoltu / apprun