Update DOM.md
This commit is contained in:
parent
458f03ebc8
commit
82c30bcfde
1 changed files with 35 additions and 6 deletions
41
DOM.md
41
DOM.md
|
@ -1,10 +1,7 @@
|
|||
# freactive
|
||||
*pronounced "eff-reactive" for functional reactive - sorry couldn't think of a better name :/*
|
||||
|
||||
|
||||
freactive is a pure Clojurescript DOM library inspired by work done in reagent, om and reflex (as well as desktop GUI frameworks like QML and JavaFX). It uses hiccup-like vectors as "virtual DOM" nodes and relies heavily on Clojure's built-in deref and atom patterns.
|
||||
|
||||
*pronounced "F-reactive"*
|
||||
|
||||
freactive is a pure Clojurescript DOM library inspired by work done in reagent, om and reflex (as well as desktop GUI frameworks like QML and JavaFX). It uses hiccup-style syntax and relies heavily Clojure's built-in deref and atom patterns.
|
||||
|
||||
**Goals:**
|
||||
* Provide a **dead-simple API** that is intuitive and almost obvious for those familiar with Clojure (similar to Reagent)
|
||||
|
@ -12,10 +9,42 @@ 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**
|
||||
* Allow for **coordinated management of state via cursors** (as in Om)
|
||||
* Allows for **coordinated management of state via cursors** (as in Om)
|
||||
* 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**
|
||||
|
||||
## 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)
|
||||
|
||||
**Hello World example:**
|
||||
|
||||
```clojure
|
||||
(ns example1
|
||||
(:refer-clojure :exclude [atom])
|
||||
(:require [freactive.core :refer [atom]
|
||||
[freactive.dom :as dom)
|
||||
(:require-macros [freactive.macros :refer [rx]))
|
||||
|
||||
(defonce mouse-pos (atom nil))
|
||||
|
||||
(defn view []
|
||||
[:div
|
||||
{:width "100%" :height "100%"
|
||||
:on-mousemove (fn [e] (reset! mouse-pos [(.-clientX e) (.-clientY e)]))}
|
||||
[:h1 "Hello World!]
|
||||
[:p "Your mouse is at: " (rx (str @mouse-pos))]])
|
||||
|
||||
(defonce root (dom/append! (.-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.)
|
||||
|
||||
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`).
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
Loading…
Reference in a new issue