Quick Start Tutorial¶
Create Your First App¶
AppRun Application logic is broken down into three separate 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
Let's use the Counter app as an example and code it directly in the HTML file.
<html>
<head>
<meta charset="utf-8">
<title>Counter</title>
</head>
<body>
<script src="https://unpkg.com/apprun/dist/apprun-html.js"></script>
<script>
const state = 0;
const view = state => {
return html`<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(document.body, state, view, update);
</script>
</body>
</html>
It is easy to have simple code in the HTML file. However, most of the time, we use external script files for complex app logic.
<html>
<head>
<meta charset="utf-8">
<title>Counter</title>
</head>
<body>
<script src="https://unpkg.com/apprun/dist/apprun-html.js"></script>
<script src="app.js"></script>
</body>
</html>
Next, we will create an AppRun component in the app.js file.
Create Your First Component¶
AppRun components are mini-applications with the state, view, and update architecture.
It is straightforward to re-create the Counter app as a component.
//app.js
class Counter extends Component {
state = 0;
view = state => {
return html`<div>
<h1>${state}</h1>
<button @click=${()=>this.run("-1")}>-1</button>
<button @click=${()=>this.run("+1")}>+1</button>
</div>`;
};
update = {
'+1': state => state + 1,
'-1': state => state - 1
};
}
new Counter().start(document.body);
Note
Components have local event events. We use this.run instead of app.run to publish local events.
Create a Web Component¶
AppRun components can be defined as web components/custom elements and used in HTML. All we need to do is to give the AppRun component a custom-element name using the app.webComponent function.
<html>
<head>
<meta charset="utf-8">
<title>Counter</title>
</head>
<body>
<my-counter></my-counter>
<script src="https://unpkg.com/apprun/dist/apprun-html.js"></script>
<script>
class Counter extends Component {
state = 0;
view = state => {
return html`<div>
<h1>${state}</h1>
<button @click=${()=>this.run("-1")}>-1</button>
<button @click=${()=>this.run("+1")}>+1</button>
</div>`;
};
update = {
'+1': state => state + 1,
'-1': state => state - 1
};
}
app.webComponent('my-counter', Counter);
</script>
</body>
</html>
Create a Single-Page App¶
We can easily make a single-page page (SPA) using AppRun components. Each page is a component that can be activated by anchor links like #Home, #contact, and #about.
class Home extends Component {
view = () => <div>Home</div>;
update = {'#, #home': state => state };
}
class Contact extends Component {
view = () => <div>Contact</div>;
update = {'#contact': state => state };
}
class About extends Component {
view = () => <div>About</div>;
update = {'#about': state => state };
}
const App = () => <>
<div id="menus">
<a href="#home">Home</a>{' | '}
<a href="#contact">Contact</a>{' | '}
<a href="#about">About</a></div>
<div id="pages"></div>
</>
app.render(document.body, <App />);
[About, Contact, Home].map(C => new C().start('pages'));
Note
We have just created a simple SPA using components. In a real-world scenario, usually, create pages as modules and bundle them together or load them dynamically.
Next, you will learn how to
- Use the npm create apprun-app to create a new AppRun project
- Create an AppRun Site for SSR and static site generation