Hello, Cells

In the first mission, we learned that mxWeb at bottom is just HTML and CSS. Yawn.

In this mission, we learn how mxWeb leverages the Matrix reactive engine to make dynamic applications easy, without much of a framework to learn. And especially without Flux-pattern libraries such as Redux or Vuex. Yay.

lesson objective

Achieving simple GUI dynamism by using simple Matrix reactive cells.

background

This mission starter code already includes working, reactive examples. The examples show the DOM updating "magically" as the content of the clock changes.

The "magic" is just mxWeb internals piping changes:

• from MX proxy DIV and SPAN objects
• to the DOM.

mxWeb is a hefty example of wrapping non-reactive things in what we call "glue code", so they will play well with reactive app code.

Wrapping things ourselves is straightforward, and we will do so in a later mission.

mission requirement

To complete this mission, we need to add a classic "Hello, world" example provided by reactive GUI libraries: a counter widget that simply counts when clicked, or when some button is clicked.

This mission is of the simpler kind; it does not involve more than one widget. (That comes next.)

The counter should:

• show how many times it has been clicked... ** ...so it should start at zero;
• the font-size of the counter should be one plus the modulus of the count and three;
• the counter should be disabled when the count gets to seven.

The source code for this mission panel is here.

Our new code goes where we see the comment, "Your code here."

Tech notes for the reactive cognoscenti

1. The mxWeb programmer does not need to think about so-called "view functions", or dividing their view hierarchies up into reasonable sized chunks; mxWeb manages each DOM element separately. Even where we see a (div ...) with many children, behind the scenes mxWeb maintains each DOM node separately, so a change, say, to the disabled attribute of a child element in a large tree never requires any more code than directly altering that attribute of that DOM element.
2. Put differently, mxWeb does not involve VDOM. Instead, we instantiate long-lived proxy CLJS objects that stay around to manage their DOM counterparts. These proxy objects leverage the reactive power of Matrix to build efficient, dynamic web pages.