docs: further clarify concepts

This commit is contained in:
Yoshua Wuyts
2016-05-16 01:43:42 +07:00
parent 5efb951073
commit a377fba1e5
+41 -16
View File
@@ -63,25 +63,36 @@ document.body.appendChild(tree)
`send()` when done to handle results `send()` when done to handle results
- __subscriptions:__ streams of data that can either be written to or read from - __subscriptions:__ streams of data that can either be written to or read from
```txt ```txt
┌───────────────────────────────── ┌───────────────────────────────┐
┌────────┐
│ ┌ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┐ ┌────────┐ │ ┌ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┐ │ │ User │
│ ┌─────────────────┐ │ User │ │ ┌─────────────────┐ │ └────────┘
├────┼─│ Subscriptions │ │ └────────┘ ├────┼─│ Subscriptions │ │ │
│ └─────────────────┘ │ └─────────────────┘ │
│ │ │ │ │ │ ┌─────────────────┐ │ │ ┌────────┐ ┌────────┐
│ ┌─────────────────┐ │ ────────┐ ┌────────┐ └──────│ Effects │◀─────┼──────┤ DOM │◀───────────│ Views │
└────┼─│ Effects │ │◀─────┴──────│ DOM │◀───────────│ Views │ │ └─────────────────┘ │ Actions └──────── DOM tree └────────
───────────────── Action └────────┘ DOM tree └────────┘ ───────────────── │ ▲
Reducers │◀┼────┘
───────────────── ┌────────┐ ─────────────────
│ Reducers │─┼────────────▶│ Router │─────────────────┘ │ │ ┌────────┐ │
└─────────────────┘ State └────────┘ State └─────────────────────▶│ Router │─────────────────┘
└ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┘ └ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┘ State └────────┘ State
Model Model
``` ```
## Side effects ## Effects
Side effects are done through `effects` declared in `app.model()`. Unlike
`reducers` they cannot modify the state by returning objects, but get a
callback passed hich is used to emit `actions` to handle results.
A typical `effect` flow looks like:
1. An action is received
2. An effect is triggered
3. The effect performs an async call
4. When the async call is done, either a success or error action is emitted
5. A reducer catches the action and updates the state
### HTTP ### HTTP
`choo` ships with a built-in [`http` module](https://github.com/Raynos/xhr) `choo` ships with a built-in [`http` module](https://github.com/Raynos/xhr)
that weighs only `2.4kb`: that weighs only `2.4kb`:
@@ -111,6 +122,20 @@ Note that `http` only runs in the browser to prevent accidental requests when
rendering in Node. For more details view the [`raynos/xhr` rendering in Node. For more details view the [`raynos/xhr`
documentation](https://github.com/Raynos/xhr). documentation](https://github.com/Raynos/xhr).
## Subscriptions (wip)
Subscriptions are a way of receiving data from a source. For example when
listening for events from a server using `SSE` or `Websockets` for a
chat app, or when catching keyboard input for a videogame.
### Server Sent Events (SSE)
[tbi] - help and suggestions welcome!
### Keyboard
[tbi] - help and suggestions welcome!
### Websockets
[tbi] - help and suggestions welcome!
## API ## API
### app = choo() ### app = choo()
Create a new `choo` app Create a new `choo` app