Skip to content

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