Add reactivity to your apps

Dynaboard makes it possible to build sophisticated, feature-complete applications that respond to user input. When building apps, Dynaboard relies on you to fill in the blanks with your app's business logic and tries its best to get out of your way.

Comparison with React

Dynaboard's reactivity model is inspired by React, the popular open source framework. In particular, Dynaboard components render when either their properties change or when their internal state changes.

However, unlike React, Dynaboard does not require that you manually hoist state to wire components to one other, like you would have to do in a React state management library like Redux. Instead, Dynaboard implements a powerful mechanism for defining one-directional data bindings called Binding Expressions, creating a link between two components on a page.

Your first binding

Drag out a Text component onto the canvas by finding it in the Toolbar. Find Value in the inspector panel on the right and enter the following snippet:

Hello, {{ "world".toUpperCase() }}!

You'll notice that the text component on your page will read: Hello, WORLD!. You just added your first bit of dynamic code to your app, a Binding Expression!

Let's break down what happened here:

• The text component you dragged out has a property called Value which represents the current text to be displayed.
• When you added the double curly braces (often called mustaches), you signaled to Dynaboard that you wanted to add a TypeScript snippet of code to the property to make it dynamic.
• In the curly braces, you called "world".toUpperCase(), which was evaluated to "WORLD".
• The parts Hello, and final ! were interpreted as plain text, and passed along as-is.

Any ES2020 TypeScript expression is valid between {{ and }}. This expressive power gives Dynaboard the hackability you often need when designing custom applications. For example, you can do:

{{ Array(16).join("wat" - 1) + " Batman!" }}

And get:

NaNNaNNaNNaNNaNNaNNaNNaNNaNNaNNaNNaNNaNNaNNaN Batman!

Glorious!!!

Let's make it reactive

So far, we've only made a binding expression that evaluates to a static value. Up next, we're going to make it interactive.

Drag out a Input component onto the canvas next to your text component. Notice its name, input1. Click back to your text component by finding it on the canvas or in the tree view on the left side of the editor. Enter the following in Value:

Hello, {{ input1.value.toUpperCase() }}!

Click on the Interact tool in the toolbar and enter into the input component your name. If all went as planned, you'll see your name repeated in the text component in all-caps, continuously as you type.

How does it work? Dynaboard keeps track of what properties on which components your code accesses, and automatically re-evaluates your component data bindings when they change, forming a directed graph. In this case, input1.value was accessed, and hence when it changes upon the user editing the input field, the expression is re-evaluated based on the new value.

In Dynaboard, nearly every component property supports binding expressions, giving you complete control over how your app behaves based on user input.

Another example

Let's enable a button when text is entered into the text input input1 and you've toggled on a switch.

1. Drag out a Switch onto the canvas. Notice its name, switch1.
2. Drag out a Button onto the canvas. Notice its name, button1.
3. In the button's Enabled property, enter: {{ input1.value.length > 0 && switch1.value }}

And you're done! Play around with it with the Interact tool.

Here, you can see that binding expressions can reference more than one other component and property. All you have to declare is the expression inside, and Dynaboard figures out how to wire up your app for you.