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 11:58:26 -05:00
parent 458f03ebc8
commit 82c30bcfde
1 changed files with 35 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
DOM.md
View file

@ -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`).