diff --git a/README.md b/README.md index afa8ab4..13adad7 100644 --- a/README.md +++ b/README.md @@ -152,9 +152,8 @@ const tree = app.start() document.body.appendChild(tree) ``` -To run it, save it as `client.js` and run with [budo][budo] and -[es2020][es2020]. These tools are convenient but any [browserify][browserify] -based tool should do: +To run it, save it as `client.js` and run with [budo] and [es2020]. These tools +are convenient but any [browserify] based tool should do: ```sh $ 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. 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. 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 ────┘ ``` - __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 - __actions:__ a named event with optional properties attached. Used to call `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, 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 -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. ### 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 5. A reducer catches the action and updates the state -Examples of effects include: performing -[xhr](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest) requests -(server requests), calling multiple `reducers`, persisting state to -[localstorage][localstorage]. +Examples of effects include: performing [xhr] requests (server requests), +calling multiple `reducers`, persisting state to [localstorage]. ```js const http = require('choo/http') @@ -314,10 +311,10 @@ app.model({ ``` 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 -possible errors and send values back to the caller. You'll probably notice when +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 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. ### 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 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 the location programmatically the `reducer` for the location can be called 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 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 -the first time, consider reading through the [handbook][handbook] or +the first time, consider reading through the [handbook] or [concepts](#concepts) first :sparkles: ### app = choo(opts) @@ -475,8 +472,7 @@ registered in `choo(handlers)`. If no callback is registered, errors will ### app.router(defaultRoute?, (route) => [routes]) Creates a new router. Takes a function that exposes a single `route` function, -and that expects a tree of `routes` to be returned. See -[`sheet-router`](https://github.com/yoshuawuyts/sheet-router) for full +and that expects a tree of `routes` to be returned. See [sheet-router] for full documentation. Registered views have a signature of `(state, prev, send)`, 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 @@ -544,8 +540,8 @@ following values: disables `opts.history` and `opts.href`. ### view = require('choo/html')\`html\` -Tagged template string HTML builder. Built on top of [yo-yo][yo-yo], [bel][bel] -and [hyperx][hyperx]. To register a view on the `router` it should be wrapped +Tagged template string HTML builder. Built on top of [yo-yo], [bel], and +[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 current `state`, `prev` is the last state, `state.params` is URI partials and `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 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 - 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. - __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 @@ -643,11 +639,10 @@ finding where in the DOM tree `send()` is called, and disable it when called from within Node. ### Which packages was choo built on? -- __views:__ [`yo-yo`](https://github.com/maxogden/yo-yo), - [`bel`](https://github.com/shama/bel) +- __views:__ [`yo-yo`][yo-yo], [`bel`][bel] - __models:__ [`barracks`](https://github.com/yoshuawuyts/barracks), [`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) ### 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 [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 -[hyperx]: https://github.com/substack/hyperx -[budo]: https://github.com/mattdesl/budo -[es2020]: https://github.com/yoshuawuyts/es2020 +[big-o]: https://rob-bell.net/2009/06/a-beginners-guide-to-big-o-notation/ +[bl]: https://github.com/rvagg/bl [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 +[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