JSX¶

AppRun uses virtual DOM technology (VDOM). The VDOM is the data representing a DOM structure. AppRun compares the VDOM with the real DOM and updates only the changed elements and element properties. It provides high performance.

AppRun allows you to choose your favorite virtual DOM technology to create user interfaces in the view function.

We recommend using JSX. Some advanced features only apply to JSX.

JSX¶

JSX is a syntax sugar of function calls. Thus, you can compose the functions and apply dynamic and conditional rendering without the run-time cost of parsing the HTML string.

You can use the JSX features described below.

JSX fragments¶

JSX Fragments let you group a list of children without adding extra root node. E.g., you can use <> for declaring fragments. E.g.,

const view = <>
  <h1>title 1</h1>
  <h2>title 2</h2>
</>

Function Calls¶

We can also use the capitalized JSX tag to call JavaScript functions with capitalized function names. The functions are also known as the Pure Function Component.

E.g., To render the todo item list, You can call the Todo function in an array.map function.

const Todo = ({ todo, idx }) => <li>{todo.title}</li>;
const view = state => <ul class="todo-list"> {
  state.list.map((todo, idx) => <Todo todo={todo} idx={idx} />)
}</ul>

De-structuring Properties¶

The call to the Todo function passes two properties todo and idx. In the Todo function, you can retrieve the two properties by de-structuring the parameters.

const Todo = ({ todo, idx }) => <li>{todo.title}</li>;

Set Class¶

Each todo item should have a class “view” that represents that active or complete for a complete status of the todo item. You can use the ternary operator to toggle between two classes.

const Todo = ({ todo, idx }) => <li class={todo.done ? "completed" : "view"}>

Please note that AppRun supports using the keyword class in JSX.

Toggle Class¶

Sometimes, you need to toggle classes based on the state. You can also use the ternary operator to toggle the class. E.g., toggle the selected class to a menu item.

<li><a class={state.filter === 'All' ? 'selected' : ''} >All</a></li>

Show and Hide Element¶

To show or hide an element dynamically, you can use the && operator.

const countComplete = state.list.filter(todo => todo.done).length || 0;
{ countComplete && <button>Clear completed</button>}

ref¶

ref is a special JSX property, which is a callback function that is called after the view function is executed.

const view = <div ref={el=>{...}}></div>

We can use ref function to update the HTML element, e.g., set focus to an input box.

ref is a better method to update the element than using the rendered lifecycle function.

Please think of using the ref function before you use the rendered function.

Element embedding¶

Furthermore, AppRun allows embedding elements directly into JSX.

view = state => {
  const canvas = document.createElement('canvas');
  return <div>{canvas}</div>
};

A few use cases of the Element embedding are:

Create special element, e.g. element has shadow root
Create elements using 3rd libraries.
Create and cache the element to avoid recreation in every event lifecycle

Just create the HTML element and add it to the AppRun view.

Please think of embedding the element before you use the ref function.

Directive¶

The directive is the special property that looks like $xxx. When AppRun is processing the JSX code and finds the properties of $xxx, it publishes the $ event. The event parameters contain the directive key, properties, and tag Name of the HTML element and component instance.

const view = <div $myDirective></div>;
app.on('$', ({key, props, tag, component}) => {
  if (key === '$myDirective') {
  }
}

We can subscribe to the $ event and create custom directives to modify the properties of the HTML element.

See more details about directive in the next section.