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:

- Use AppRun as ESM in browser

  Reference AppRun from CDN as ESM to build your apps

  Use AppRun Module in the browser

- Create an SPA project

  Create a new SPA project using the AppRun CLI

  Create AppRun App