addyosmani/todomvc — pull request #419 by pyykkis (2013-02-02 11:06:31+00:00)
Title: TodoMVC with Bacon.js, Backbone.js and Transparency.js

Hi, I implemented TodoMVC implementation with a following stack:

* Bacon.js
* Backbone.js
* Transparency.js (disclaimer: I'm the author)
* Require.js
* CoffeeScript

Would you be interested in including it to the labs section? There's also PR #417 for plain jQuery + bacon.js implementation, by @raimohanska.

### Rationale

Backbone models and collections are pretty awesome. However, Backbone views don't give you a much. Furthermore, both views and models rely on event handler pattern, which isn't really composable, e.g., when creating a new todo, one needs handle **all** key presses and check if the key is `ENTER` and then if the value is non-empty etc. This leads to accidental complexity, as event handlers have to handle all cases instead of listening only `ENTER` key.

Additionally, it's difficult to avoid mutable and often global state with callbacks. E.g., in the original Backbone example, `app.TodoRouter.setFilter` sets global `app.TodoFilter`, which is read by [`TodoView.render`](https://github.com/addyosmani/todomvc/blob/gh-pages/architecture-examples/backbone/js/views/todos.js#L36-L56) via `TodoView.isHidden`.

Bacon.js (and FRP in general) lets us compose fine-grained event streams and properties, and compose new streams on top of them with filter, combine and other "list processing" functions. Furthermore, global state can often avoided, as views can easily compose local properties, e.g., [TodoApp.filteredList](https://github.com/pyykkis/todomvc/blob/bacon-backbone-require/labs/dependency-examples/bacon_backbone_require/src/app.coffee#L32-L38).

Finally, in order to pull things together, I wrote a small [Backbone.EventStreams](https://github.com/pyykkis/Backbone.EventStreams) plugin, which wraps all Backbone.Event sources as Bacon.EventStreams. With the plugin, one can mix DOM events with Backbone events.

Cheers! :)

Jarno