AppRun

AppRun is a 3K library for building reliable, high-performance web applications using the Elm inspired Architecture, event pub-sub and components.

AppRun is a MIT-licensed open source project. Please consider supporting the project on Patreon. 👍❤️🙏

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 using event pub-sub.

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

Quick Start

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>

Web Components

Using apprun@es6, you can convert AppRun components into web components. AppRun components become the custom elements that also can handle AppRun events (Online Demo).

<html>
<head>
  <meta charset="utf-8">
  <title>Counter as web component</title>
</head>
<body>
  <my-app id='counter'></my-app>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/custom-elements/1.1.2/custom-elements.min.js"></script>
  <script src="https://unpkg.com/apprun@es6/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>

Install

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>

CLI

Or 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

Dev-Tools

To use the AppRun dev-tools, include the the dev-tools script.

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

Then 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.

Documentation

To explore more about AppRun, read the following.

Video Tutorials

Articles

Examples

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 Admin Dashboard
AppRun Server-Side Rendering
AppRun Server-Side Rendering for ASP.NET MVC
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

Online Demos

See Examples Online @glitch.com and @stackblitz.com

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

prawee / apprun Goto Github PK

apprun's Introduction