AppRun is a 3K library for developing applications using the elm style model-view-update architecture and the event publication and subscription. .
To give it a try, include AppRun in your html.
<script src="https://unpkg.com/apprun@latest/dist/apprun-html.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-html.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
};
app.start('my-app', model, view, update);
</script>
</body>
</html>
Or try it online: AppRun - Counter.
The counter example above implements the model-view-update architecture at application level. AppRun applications can also be built using components. Each component has a model-view-update architecture that manages component state. Components communicate each other through events. Run the following examples and checkout their source code for more details.
- AppRun Demo App - a SPA that has 8 components
- Todo component in 90 lines
- Hacker News - hacker news reader in 230 line
- RealWorld Example App - a blogging platform adheres to the RealWorld specification
- Building Applications with AppRun, Part 1 - Getting Started
- Building Applications with AppRun, Part 2 - Components
- Building Applications with AppRun
- Dynamic Components Using TypeScript 2.4
- Deep Dive into AppRun State
- Deep Dive into AppRun Events
If you are interested moving forward, you can install AppRun CLI and initialize a TypeScript and webpack configured project:
npm install apprun -g
apprun --init
npm start
AppRun provides everything you need to build a modern application frontend. To explore more about AppRun, read the following docs.
- Introduction
- Event Pub and Sub
- Model-view-update Architecture
- Component
- JSX vs HTML
- TypeScript and webpack
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.
MIT
Copyright (c) 2015-2017 Yiyi Sun