I'm thrilled to see this, because I have been experimenting with using async functions that directly render their own DOM trees in between awaits, and I recognize a lot of the sentiment in the "Introducing" blog post, but I didn't have the insight of using generator yields with DOM trees, instead I had async functions that did this.draw(tree).
I had a different way of dealing with events. Basically I was seeing an app as a process hierarchy of self-drawing widgets that communicated via channels. I ended up wanting to make my own language to get decent pattern matching and the possibility of preemptible processes...
And for example instead of the Timer example which uses this.refresh in Crank, my version would have something like:
let s = 0
while (true) {
this.draw(<div>{s}</div>)
await sleep(1)
++s
}
Then to deal with buttons, something kind of like:
let i = 0
let increase = channel("+")
let decrease = channel("-")
while (true) {
this.draw(
<div>
{i}
<button onclick={increase}>
Increase
</button>
<button onclick={decrease}>
Decrease
</button>
</div>
)
switch (await pick([increase, decrease])) {
case "+": ++i; break
case "-": --i; break
}
}
I had a different way of dealing with events. Basically I was seeing an app as a process hierarchy of self-drawing widgets that communicated via channels. I ended up wanting to make my own language to get decent pattern matching and the possibility of preemptible processes...
And for example instead of the Timer example which uses this.refresh in Crank, my version would have something like:
Then to deal with buttons, something kind of like: