AppRun
Introduction
AppRun is a lightweight alternative to other frameworks and libraries. It has a unique architecture inspired by the Elm architecture that can help you manage states, routing, and other essential aspects of your web application.
Use a Counter as an example.
// define the initial state const state = 0; // view is a function to display the state (JSX) const view = state => <div> <h1>{state}</h1> <button onclick="app.run('-1')">-1</button> <button onclick="app.run('+1')">+1</button> </div>; // update is a collection of event handlers const update = { '+1': state => state + 1, '-1': state => state - 1 }; // start the app app.start(document.body, state, view, update);
-
AppRun is lightweight, only 6KB gzipped, but includes state management, rendering, event handling, and routing.
-
With only three functions:
app.start
,app.run
, andapp.on
in its API makes it easy to learn and use. And no worries about the incompatibility of version upgrades. -
One more thing, you can use AppRun with React to simplify state management and routing of your React applications.
At its core, AppRun harnesses the power of the event PubsSub pattern to streamline your application’s state handling and routing. The result? Cleaner, more maintainable code and a smoother development experience.
AppRun Benefits
- Clean architecture that needs less code
- State management and routing included
- No proprietary syntax to learn (no hooks, no reducers, no signals)
- Use directly in the browser or with a compiler/bundler
- Advanced features: JSX, Web Components, Dev Tools, SSR, etc.
Getting Started
AppRun is distributed on npm. To get it, run:
npm install apprun
You can also load AppRun directly from the unpkg.com CDN:
<html> <body> <script src="https://unpkg.com/apprun/dist/apprun-html.js"></script> <script> const view = state => `<div>${state}</div>`; app.start(document.body, 'hello AppRun', view); </script> </body> </html>
Or, use the ESM version:
<html> <body> <script type="module"> import { app, html } from 'https://unpkg.com/apprun/dist/apprun-html.esm.js'; const view = state => html`<div>${state}</div>`; app.start(document.body, 'hello ESM', view); </script> </body> </html>
In addition to run directly in the browser, or with a compiler/bundler like Webpack or Vite.
You can run the npm create apprun-app
command to create an AppRun project.
npm create apprun-app [my-app]
Learn More
You can get started with AppRun Docs and the AppRun Playground.
AppRun Book from Apress
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.
Contributors
Support
AppRun is an MIT-licensed open-source project. Please consider supporting the project on Patreon. 👍❤️🙏
Thank you for your support
- Athkahden Asura
- Alfred Nerstu
- Gyuri Lajos
- Lorenz Glißmann
- Kevin Shi
- Chancy Kennedy
License
MIT
Copyright (c) 2015-2024 Yiyi Sun
Add Package
deno add jsr:@apprunjs/apprun
Import symbol
import * as mod from "@apprunjs/apprun";
---- OR ----
Import directly with a jsr specifier
import * as mod from "jsr:@apprunjs/apprun";
Add Package
npx jsr add @apprunjs/apprun
Import symbol
import * as mod from "@apprunjs/apprun";
Add Package
yarn dlx jsr add @apprunjs/apprun
Import symbol
import * as mod from "@apprunjs/apprun";
Add Package
pnpm dlx jsr add @apprunjs/apprun
Import symbol
import * as mod from "@apprunjs/apprun";
Add Package
bunx jsr add @apprunjs/apprun
Import symbol
import * as mod from "@apprunjs/apprun";