- Notifications
You must be signed in to change notification settings - Fork0
AppRun is a JavaScript library for developing high-performance and reliable web applications using the elm inspired architecture, events and components.
License
jhg/apprun
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
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 considersupporting the project on Patreon. 👍❤️🙏
- 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 ...
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. Applications built with AppRun have less lines of code, smaller js files, and better performance. See a comparison fromA Real-World Comparison of Front-End Frameworks with Benchmarks (2019 update). You can also see theperformance results compared to other frameworks and libraries in thejs-framework-benchmark project.
Below is a counter application using AppRun (Online Demo).
<html><head><metacharset="utf-8"><title>Counter</title></head><body><scriptsrc="https://unpkg.com/apprun@latest/dist/apprun-html.js"></script><divid="my-app"></div><script>conststate=0;constview=state=>{return`<div> <h1>${state}</h1> <button onclick='app.run("-1")'>-1</button> <button onclick='app.run("+1")'>+1</button> </div>`;};constupdate={'+1':state=>state+1,'-1':state=>state-1};app.start('my-app',state,view,update);</script></body></html>
Usingapprun@es6, you can convert AppRun components intoweb components.(Online Demo)
<html><head><metacharset="utf-8"><title>Counter as web component</title></head><body><my-appid='counter'></my-app><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/custom-elements/1.1.2/custom-elements.min.js"></script><scriptsrc="https://unpkg.com/apprun@es6/dist/apprun-html.js"></script><script>classCounterextendsComponent{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>
Try theAppRun Playground.
You can include AppRun in your html directly and use it with JavaScript.
<scriptsrc="https://unpkg.com/apprun@latest/dist/apprun-html.js"></script>
Or you can use AppRun with TypeScript and Webpack. Use the AppRun CLI to initialize a TypeScript and webpack configured project:
npx apprun --init --spanpm start
To initialize a project that targets ES6/ES2015, use the AppRun CLI with the --es6 flag:
npx apprun --init --spa --es6npm start
AppRun CLI also runs in console.
To use the AppRun dev-tools CLI, include the the dev-tools script.
<scriptsrc="https://unpkg.com/apprun@latest/dist/apprun-dev-tools.js"></script>
AppRun support the Redux DevTools Extension. To use the dev-tools, install theRedux DevTools Extension. You can monitor the events and states in the devtools.
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.
You can launch the webpack dev-server and the demo app from thedemo folder with the following npm commands:
npm installnpm start
You can run the unit tests from thetests folder.
npmtestUnit 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.
MIT
Copyright (c) 2015-2019 Yiyi Sun
About
AppRun is a JavaScript library for developing high-performance and reliable web applications using the elm inspired architecture, events and components.
Resources
License
Stars
Watchers
Forks
Packages0
Languages
- TypeScript85.1%
- JavaScript9.9%
- HTML5.0%