Rx Vars

Every frontend app needs to maintain some state.
State usually has an initial value, and it can change over time.

In RxTags we use reactive variables: Var[T].
Var[T] has 2 important methods:

• now, returns the current value of variable
• set, sets the new value of variable

For example, we could have a state variable that holds a name that user types.
We can get its current value, and set it later:

val name$ = Var("Tim")
println(name$.now) // "Tim"

name$.set("Jane")
println(name$.now) // "Jane"

When we need a new variable based on existing one, we can use map:

val nameUpper$ = name$.map(n => n.toUpperCase)

The nameUpper$ variable now holds a value which is equal to uppercased name$ value.
This gets very useful when we need to display a Var in HTML.
We will see that in the next section.

When we need to listen for a variable change, we use the attach method:

name$.attach { n =>
  println(s"Name is now: $n")
}

Rx Vals

We also have Rx Vals.
These are reactive values that cannot be set.
They are just a composition of other Vars/Vals.

Example:

val nameUpper$ = Val {
  val current = name$.now
  if (current.isEmpty) "<EMPTY>"
  else current.toUpperCase
}

Here we see again the nameUpper$ variable.
Now it has a bit of logic in there.
But we could achieve the same result with map...

The difference it makes is when you have multiple dependencies:

val name$ = Var("Tim")
val age$ = Var(29)

val nameAndAge$ = Val {
  s"${name$.now} is ${age$.now} years old."
}