Use AppRun with React

It only takes one line of code to use the elm-inspired AppRun architecture in React apps.

Introduction

React is a popular JavaScript library for building user interfaces.

AppRun is an elm-inspired event-driven library.

Using AppRun and React in conjunction is one of the best ways to build a web app. In this post, I will explain why and how-to.

If you are new to AppRun, please visit the AppRun Docs for more information.

An Example

Let's use the code from the React Hooks Doc as an example.

import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

The same app using the AppRun looks like below.

const state = 0;

const view = count => <>
  <p>You clicked {count} times</p>
  <button onclick={()=>app.run('add')}>
    Click me
  </button>
</>;

const update  = {
  add: state => state + 1
};

app.start(document.body, state, view, update);

You can see the AppRun way is easier to understand. They are explained below.

AppRun Logic

Inspired by Elm, AppRun 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

All applications and components have the same architecture. So when you want to understand any applications, you can always start with looking for where the state is, where the view is, and where the update is.

Use AppRun in React App

If you like the AppRun architecture, it is very easy to use AppRun in React apps. All you need to do is converting the AppRun component to a React component by calling the toReact function.

import React from 'react';
import { Component } from 'apprun/esm/component';
import toReact from 'apprun/react';

class MyComponent extends Component {
  state = 0;
  view = count => <div>
    <p>You clicked {count} times</p>
    <button onClick={()=>this.run('add')}>
      Click me
    </button>
  </div>;
  update  = {
    add: state => state + 1
  };
}

const App = toReact(MyComponent);
export default App;

Note: The React VDOM uses JSX. AppRun VDOM also uses JSX. They are similar. However, React VDOM does not have directives. So you cannot use the AppRun $onclick directive. Instead, you need to use the React onClick attribute.

Now, with just one line conversion to React component, we successfully used the AppRun component in a React app.

You can visit https://github.com/yysun-apprun to see an example React project created by the Create React App Cli that uses AppRun components.

Or you can visit the live Demo site: https://replit.com/@yysun/apprun-react

AppRun Benefits

Having the elm-inspired architecture in React apps, we have many benefits. I summarize them briefly here.

The state, view, and update are function have only dependencies to their input parameters. Without external dependency makes the three functions almost pure, which means it's easy to reason, easy to test, and easy to maintain.

For example, you can see that by making it event-driven, the update, a collection of the event handlers, can live outside the React component w/o the dependency to the setState function. Thus, you can use modules to organize them and test them easily.

We provide the state, view, and update to AppRun and wait for AppRun to call them following the Hollywood Principle (Don't call us. We call you). AppRun uses a state management system and event pub-sub system to combine the state, view, and update together.

For more information, please visit the AppRun Site, AppRun Docs Site,

Or read the AppRun Book from Apress

I hope you enjoy it.

This post updated from using three lines of code to just one line of code on May 30, 2021.