https://github.com/ivan-kleshnin/dataflows
Web app dataflows
https://github.com/ivan-kleshnin/dataflows
angular backbone comparison data-flow frp jquery react reactive reactivity
Last synced: 12 months ago
JSON representation
Web app dataflows
- Host: GitHub
- URL: https://github.com/ivan-kleshnin/dataflows
- Owner: ivan-kleshnin
- Created: 2015-03-16T16:25:51.000Z (about 11 years ago)
- Default Branch: master
- Last Pushed: 2016-03-24T12:38:20.000Z (about 10 years ago)
- Last Synced: 2025-03-28T15:11:18.240Z (about 1 year ago)
- Topics: angular, backbone, comparison, data-flow, frp, jquery, react, reactive, reactivity
- Language: JavaScript
- Homepage:
- Size: 12.7 KB
- Stars: 39
- Watchers: 4
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Dataflows
> `active => passive`
> `emitter <- reactive`
Time flows from left to right.
Arrows point from dependent to dependency.
Active "thing" requires passive "thing" and invokes it's behavior.
Reactive "thing" requires emitter "thing" and subscribes to it's events.
## Generation One
Manual DOM mutations
#### jQuery
`DOM <- EventHandler => DOM`
#### Backbone / Ampersand
`DOM <- View => Model <- View => DOM`
## Generation Two
Automatic DOM mutations
#### Knockout
`[DOM <-] View (handlers) => ViewModel <- View (bindings) [=> DOM]`
With Model
`[DOM <-] View (handlers) => ViewModel <- Model <- ViewModel <- View (bindings) [=> DOM]`
#### Angular
TODO
## Generation Three
Virtual DOM
#### React
`[DOM <-] Component (handler) => Component (state) <- Component (VDOM) [=> DOM]`
#### Flux / Flummox / ...
`[DOM <-] Component (handler) => Action => Dispatcher <- Store <- Store (agg.) <- Component (VDOM) [=> DOM]`
Also includes **React** scheme.
`agg.` means `aggregate`
#### Reflux
`[DOM <-] Component (handler) => Action <- Store <- Store (agg.) <- Component (VDOM) [=> DOM]`
Also includes **React** scheme.
`agg.` means `aggregate`
#### Baobab
Including **React** scheme...
`[DOM <-] Component (handler) => Action => State <- Facets <- Component (VDOM) [=> DOM]`
#### Cycle
Basic
`[DOM <-] Computer (VDOM) [=> DOM]`
Advanced
`[DOM <-] Intent <- Model <- View (VDOM) [=> DOM]`
## Links
[reactive-polyglot](https://github.com/ivan-kleshnin/reactive-polyglot) – FRP libraries / langs compared