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>
<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>

Note

Browsers dont support JSX, so we use the html function (Template literals) in the view function to create HTML elements.

Create Your First Component

AppRun components are mini-applications with the state, view, and update architecture.

Let's re-create the Counter app as a component.

<html>
<body>
  <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
      };
    }
    new Counter().start(document.body);
  </script>
</body>
</html>

Note

Components have local event events. We use this.run instead of app.run to publish local events.

Use Components for SPA

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. See the Single Page App for more details.

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>
  <my-counter></my-counter>
  <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>

Note

We have create a web component / custom element and used it three times.


Now, you are ready to move forward to more advanced topics: