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: 2 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 (almost 10 years ago)
• Default Branch: master
• Last Pushed: 2016-03-24T12:38:20.000Z (almost 9 years ago)
• Last Synced: 2024-11-01T08:50:25.888Z (2 months ago)
• Topics: angular, backbone, comparison, data-flow, frp, jquery, react, reactive, reactivity
• Language: JavaScript
• Homepage:
• Size: 12.7 KB
• Stars: 39
• Watchers: 5
• 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