yogsototh/freactive
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update DOM.md

Browse source
This commit is contained in:
Aaron Craelius 2014-11-16 12:07:16 -05:00
parent 82c30bcfde
commit 6fc4227ead
1 changed files with 19 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
DOM.md
View file

@ -9,14 +9,15 @@ freactive is a pure Clojurescript DOM library inspired by work done in reagent,
* Allow for **reactive binding of any attribute, style property or child node**
* Provide a **deeply-integrated animation** framework
* **Minimize unnecessary triggering of update events**
* Allows for **coordinated management of state via cursors** (as in Om)
* Allow for **coordinated management of state via cursors** (as in Om)
* Allow for cursors based on paths as well as **lenses**
* Be written in **pure Clojurescript**
* Coordinate all updates via **requestAnimationFrame** where possible
* Provide a generic items view component for **efficient binding to large data sets**
* Provide a generic items view component for **efficient viewing of large data sets**
## Two-minute tutorial
If you already understand hiccup DOM syntax and Clojure's `atom`, you're 90% there. In freactive, make sure you use freactive's reactive `atom` which allows derefs to be captured by an enclosing reactive expression (this is exactly the same idea as in reagent). We just need to introduce one additional concept - the macro `rx` (for reactive expression)
If you already understand hiccup DOM syntax and Clojure's `atom`, you're 90% there. In freactive, make sure you use freactive's reactive `atom` which allows derefs to be captured by an enclosing reactive expression (this is exactly the same idea as in reagent). We just need to introduce one additional concept - the macro `rx` (for reactive expression).
**Hello World example:**
@ -36,15 +37,28 @@ If you already understand hiccup DOM syntax and Clojure's `atom`, you're 90% the
[:h1 "Hello World!]
[:p "Your mouse is at: " (rx (str @mouse-pos))]])
(defonce root (dom/append! (.-body js/document) [:div#root]))
(defonce root (dom/append-child! (.-body js/document) [:div#root]))
(dom/mount! root (view))
```
The `rx` (for reactive expression) macro returns an `IDeref` instance (can be `deref`'ed with `@`) whose value is the body of the expression. This value gets updated when (and only when) one of the dependencies captured in its body (reactive `atom`s, other `rx`'s and also things like `cursor`s) gets "invalidated". (Pains were taken to make this invalidation process as efficient and configurable as possible.)
The `rx` macro returns an `IDeref` instance (can be `deref`'ed with `@`) whose value is the body of the expression. This value gets updated when (and only when) one of the dependencies captured in its body (reactive `atom`s, other `rx`'s and also things like `cursor`s) gets "invalidated". (Pains were taken to make this invalidation process as efficient and configurable as possible.)
Passing an `rx` or reactive `atom` (or any `IDeref` instance) as an attribute, style property or child of a DOM element represented via a hiccup vector binds it to that attribute, style property or child node position. freactive makes sure that any updates to `rx`'s or `atom`'s are propogated to the DOM directly to the binding site only as often as necessary (coordinated with `requestAnimationFrame`).
Components are mounted by passing a target node and hiccup vector to the `mount!` function (this will replace the last child of the target node with the mounted node!). A few additional convenience functions are included - `append-child!`, `remove!`, and `listen!` - but it is encouraged to use them sparingly and prefer the declarative hiccup syntax wherever possible.
## Animations
TODO
## Cursors
TODO
## Items View
TODO