uhhm/buuh
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(readme): cleanup (#288)

Browse Source 
* fix typos in readme

* use leaner markdown links

* alphabetize markdown reference links
This commit is contained in:
Zeke Sikelianos
2016-10-23 09:16:33 +02:00
committed by Yoshua Wuyts
parent 0bd73e88af
commit 12d4ce020e
1 changed files with 43 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+43 -47
View File
@@ -152,9 +152,8 @@ const tree = app.start()
document.body.appendChild(tree) document.body.appendChild(tree)
``` ```
To run it, save it as `client.js` and run with [budo][budo] and To run it, save it as `client.js` and run with [budo] and [es2020]. These tools
[es2020][es2020]. These tools are convenient but any [browserify][browserify] are convenient but any [browserify] based tool should do:
based tool should do:
```sh ```sh
$ budo client.js -p 8080 --open -- -t es2020 $ budo client.js -p 8080 --open -- -t es2020
``` ```
@@ -206,7 +205,7 @@ consists of a unique `actionName` and an optional payload of `data`, which can
be any value. be any value.
When a `reducer` modifies `state`, the `router` is called, which in turn calls When a `reducer` modifies `state`, the `router` is called, which in turn calls
`views`. `views` take `state` and return [DOM][dom] nodes which are then `views`. `views` take `state` and return [DOM] nodes which are then
efficiently rendered on the screen. efficiently rendered on the screen.
In turn when the `views` are rendered, the `user` can interact with elements by In turn when the `views` are rendered, the `user` can interact with elements by
@@ -221,7 +220,7 @@ application logic. This is the _unidirectional_ architecture of `choo`.
└▶ Router ─────State ───▶ Views ────┘ └▶ Router ─────State ───▶ Views ────┘
``` ```
- __user:__ 🙆 - __user:__ 🙆
- __DOM:__ the [Document Object Model][dom] is what is currently displayed in - __DOM:__ the [Document Object Model][DOM] is what is currently displayed in
your browser your browser
- __actions:__ a named event with optional properties attached. Used to call - __actions:__ a named event with optional properties attached. Used to call
`effects` and `reducers` that have been registered in `models` `effects` and `reducers` that have been registered in `models`
@@ -268,7 +267,7 @@ that calls a different `action` based on the incoming data).
In these cases you probably want to have a `model` that doesn't use namespaces, In these cases you probably want to have a `model` that doesn't use namespaces,
and has access to the full application state. Try and keep the logic in these and has access to the full application state. Try and keep the logic in these
`models` to a minimum, and declare as few `reducers` as possible. That way the `models` to a minimum, and declare as few `reducers` as possible. That way the
bulk of your logic will safely shielded, with only a few points touching every bulk of your logic will be safely shielded, with only a few points touching every
part of your application. part of your application.
### Effects ### Effects
@@ -286,10 +285,8 @@ A typical `effect` flow looks like:
4. When the async call is done, either a success or error action is emitted 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 5. A reducer catches the action and updates the state
Examples of effects include: performing Examples of effects include: performing [xhr] requests (server requests),
[xhr](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest) requests calling multiple `reducers`, persisting state to [localstorage].
(server requests), calling multiple `reducers`, persisting state to
[localstorage][localstorage].
```js ```js
const http = require('choo/http') const http = require('choo/http')
@@ -314,10 +311,10 @@ app.model({
``` ```
When an `effect` is done executing, it should call the `done(err, res)` When an `effect` is done executing, it should call the `done(err, res)`
callback. This callback used to communicate when an `effect` is done, handle callback. This callback is used to communicate when an `effect` is done, handle
possible errors and send values back to the caller. You'll probably notice when possible errors, and send values back to the caller. You'll probably notice when
applications become more complex, that composing multiple namespaced models applications become more complex, that composing multiple namespaced models
using higher level effects becomes real powerful - without becoming using higher level effects becomes really powerful - without becoming
complicated. complicated.
### Subscriptions ### Subscriptions
@@ -366,7 +363,7 @@ Routes on the `router` are passed in as a nested array. This means that the
entry point of the application also becomes a site map, making it easier to entry point of the application also becomes a site map, making it easier to
figure out how views relate to each other. figure out how views relate to each other.
Under the hood `choo` uses [sheet-router][sheet-router]. Internally the Under the hood `choo` uses [sheet-router]. Internally the
currently rendered route is kept in `state.location`. If you want to modify currently rendered route is kept in `state.location`. If you want to modify
the location programmatically the `reducer` for the location can be called the location programmatically the `reducer` for the location can be called
using `send('location:setLocation', { location: href })`. This will not work using `send('location:setLocation', { location: href })`. This will not work
@@ -437,7 +434,7 @@ Using `choo` in a project? Show off which version you've used using a badge:
## API ## API
This section provides documentation on how each function in `choo` works. It's This section provides documentation on how each function in `choo` works. It's
intended to be a technical reference. If you're interested in learning choo for intended to be a technical reference. If you're interested in learning choo for
the first time, consider reading through the [handbook][handbook] or the first time, consider reading through the [handbook] or
[concepts](#concepts) first :sparkles: [concepts](#concepts) first :sparkles:
### app = choo(opts) ### app = choo(opts)
@@ -475,8 +472,7 @@ registered in `choo(handlers)`. If no callback is registered, errors will
### app.router(defaultRoute?, (route) => [routes]) ### app.router(defaultRoute?, (route) => [routes])
Creates a new router. Takes a function that exposes a single `route` function, Creates a new router. Takes a function that exposes a single `route` function,
and that expects a tree of `routes` to be returned. See and that expects a tree of `routes` to be returned. See [sheet-router] for full
[`sheet-router`](https://github.com/yoshuawuyts/sheet-router) for full
documentation. Registered views have a signature of `(state, prev, send)`, documentation. Registered views have a signature of `(state, prev, send)`,
where `state` is the current `state`, `prev` is the last state, `state.params` where `state` is the current `state`, `prev` is the last state, `state.params`
is URI partials and `send()` can be called to trigger actions. If is URI partials and `send()` can be called to trigger actions. If
@@ -544,8 +540,8 @@ following values:
disables `opts.history` and `opts.href`. disables `opts.history` and `opts.href`.
### view = require('choo/html')\`html\` ### view = require('choo/html')\`html\`
Tagged template string HTML builder. Built on top of [yo-yo][yo-yo], [bel][bel] Tagged template string HTML builder. Built on top of [yo-yo], [bel], and
and [hyperx][hyperx]. To register a view on the `router` it should be wrapped [hyperx]. To register a view on the `router` it should be wrapped
in a function with the signature of `(state, prev, send)` where `state` is the in a function with the signature of `(state, prev, send)` where `state` is the
current `state`, `prev` is the last state, `state.params` is URI partials and current `state`, `prev` is the last state, `state.params` is URI partials and
`send()` can be called to trigger actions. `send()` can be called to trigger actions.
@@ -630,7 +626,7 @@ give you my opinions directly. Ready? Here goes:
- __cycle:__ `cycle`'s pretty good - unlike most frameworks it lays out a clear - __cycle:__ `cycle`'s pretty good - unlike most frameworks it lays out a clear
architecture which helps with reasoning about it. That said, it's built on architecture which helps with reasoning about it. That said, it's built on
`virtual-dom` and `xstream` which are a bit heavy for my taste. `choo` works `virtual-dom` and `xstream` which are a bit heavy for my taste. `choo` works
pretty well for FRP style programming, but something like [inu][inu] might be pretty well for FRP style programming, but something like [inu] might be
an interesting alternative. an interesting alternative.
- __vue:__ like `cycle`, `vue` is pretty good. But it also uses tech that - __vue:__ like `cycle`, `vue` is pretty good. But it also uses tech that
provides framework lock in, and additionally doesn't have a clean enough provides framework lock in, and additionally doesn't have a clean enough
@@ -643,11 +639,10 @@ finding where in the DOM tree `send()` is called, and disable it when called
from within Node. from within Node.
### Which packages was choo built on? ### Which packages was choo built on?
- __views:__ [`yo-yo`](https://github.com/maxogden/yo-yo), - __views:__ [`yo-yo`][yo-yo], [`bel`][bel]
[`bel`](https://github.com/shama/bel)
- __models:__ [`barracks`](https://github.com/yoshuawuyts/barracks), - __models:__ [`barracks`](https://github.com/yoshuawuyts/barracks),
[`xtend`](https://github.com/raynos/xtend) [`xtend`](https://github.com/raynos/xtend)
- __routes:__ [`sheet-router`](https://github.com/yoshuawuyts/sheet-router) - __routes:__ [`sheet-router`][sheet-router]
- __http:__ [`xhr`](https://github.com/Raynos/xhr) - __http:__ [`xhr`](https://github.com/Raynos/xhr)
### Does choo use a virtual-dom? ### Does choo use a virtual-dom?
@@ -821,30 +816,31 @@ Become a backer, and buy us a coffee (or perhaps lunch?) every month or so.
## License ## License
[MIT](https://tldrlegal.com/license/mit-license) [MIT](https://tldrlegal.com/license/mit-license)
[dom]: https://en.wikipedia.org/wiki/Document_Object_Model
[keyboard-support]: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent#Browser_compatibility
[sse]: https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events
[ws]: https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API
[isomorphic]: https://en.wikipedia.org/wiki/Isomorphism
[big-o]: https://rob-bell.net/2009/06/a-beginners-guide-to-big-o-notation/
[qps]: https://en.wikipedia.org/wiki/Queries_per_second
[morphdom]: https://github.com/patrick-steele-idem/morphdom
[morphdom-bench]: https://github.com/patrick-steele-idem/morphdom#benchmarks
[module-parent]: https://nodejs.org/dist/latest-v6.x/docs/api/modules.html#modules_module_parent
[sse-reconnect]: http://stackoverflow.com/questions/24564030/is-an-eventsource-sse-supposed-to-try-to-reconnect-indefinitely
[ws-reconnect]: http://stackoverflow.com/questions/13797262/how-to-reconnect-to-websocket-after-close-connection
[bl]: https://github.com/rvagg/bl
[varnish]: https://varnish-cache.org
[nginx]: http://nginx.org/
[dom]: https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model
[sheet-router]: https://github.com/yoshuawuyts/sheet-router
[html-input]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input
[inu]: https://github.com/ahdinosaur/inu
[yo-yo]: https://github.com/maxogden/yo-yo
[bel]: https://github.com/shama/bel [bel]: https://github.com/shama/bel
[hyperx]: https://github.com/substack/hyperx [big-o]: https://rob-bell.net/2009/06/a-beginners-guide-to-big-o-notation/
[budo]: https://github.com/mattdesl/budo [bl]: https://github.com/rvagg/bl
[es2020]: https://github.com/yoshuawuyts/es2020
[browserify]: https://github.com/substack/node-browserify [browserify]: https://github.com/substack/node-browserify
[localstorage]: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage [budo]: https://github.com/mattdesl/budo
[DOM]: https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model
[dom]: https://en.wikipedia.org/wiki/Document_Object_Model
[es2020]: https://github.com/yoshuawuyts/es2020
[handbook]: https://github.com/yoshuawuyts/choo-handbook [handbook]: https://github.com/yoshuawuyts/choo-handbook
[html-input]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input
[hyperx]: https://github.com/substack/hyperx
[inu]: https://github.com/ahdinosaur/inu
[isomorphic]: https://en.wikipedia.org/wiki/Isomorphism
[keyboard-support]: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent#Browser_compatibility
[localstorage]: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
[module-parent]: https://nodejs.org/dist/latest-v6.x/docs/api/modules.html#modules_module_parent
[morphdom-bench]: https://github.com/patrick-steele-idem/morphdom#benchmarks
[morphdom]: https://github.com/patrick-steele-idem/morphdom
[nginx]: http://nginx.org/
[qps]: https://en.wikipedia.org/wiki/Queries_per_second
[sheet-router]: https://github.com/yoshuawuyts/sheet-router
[sse-reconnect]: http://stackoverflow.com/questions/24564030/is-an-eventsource-sse-supposed-to-try-to-reconnect-indefinitely
[sse]: https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events
[varnish]: https://varnish-cache.org
[ws-reconnect]: http://stackoverflow.com/questions/13797262/how-to-reconnect-to-websocket-after-close-connection
[ws]: https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API
[xhr]: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest
[yo-yo]: https://github.com/maxogden/yo-yo