Skip to content

Commit

Permalink
Add explanation of reactivity to readme (#249)
Browse files Browse the repository at this point in the history
  • Loading branch information
geotre authored Mar 9, 2023
1 parent c037346 commit 9ee695b
Showing 1 changed file with 33 additions and 0 deletions.
33 changes: 33 additions & 0 deletions readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -195,6 +195,39 @@ Once you have tasted this power there is no going back and languages
without AST based macro system simply don't cut it anymore.


## Reactivity

Karax's reactivity model is different to mainstream frameworks, who usually implement it by creating reactive state. Karax instead reacts to events.

This approach is simpler and easier to reason about, with the tradeoff being that events need to be wrapped to trigger a redraw. Karax does this for you with dom event handlers (`onclick`, `keyup`, etc) and ajax network calls (when using `karax/kajax`), but you will need to add it for things outside of that (websocket messages, document timing functions, etc).

`karax/kdom` includes a definition for `setInterval`, the browser api that repeatedly calls a given function. By default it is not reactive, so this is how we might add reactivity with a call to `redraw`:

```nim
include karax/prelude
import karax/kdom except setInterval
proc setInterval(cb: proc(), interval: int): Interval {.discardable.} =
kdom.setInterval(proc =
cb()
if not kxi.surpressRedraws: redraw(kxi)
, interval)
var v = 10
proc update =
v += 10
setInterval(update, 200)
proc main: VNode =
buildHtml(tdiv):
text $v
setRenderer main
```


## Attaching data to an event handler


Expand Down

0 comments on commit 9ee695b

Please sign in to comment.