What the Flux?

class: center, middle
background-image: url(img/mire.jpg)
.footnote.preintro[Connection to projector seems good, we can start]
---
name: inverse
layout: true
class: inverse
---
class: center, middle

#What the Flux?
.footnote[http://twidi.github.io/what-the-flux/]
---
class: center
# Presentation in 3 parts:
.left[
 
##I. Theory
 
##II. Practice
 
##III. “Flux-react”
]
.footnote[Part I and II are (very) highly inspired by a [blog post by Jonathan Creamer](http://jonathancreamer.com/what-the-flux/)]
---
class: center, middle
# I. Theory
---
class: center, middle

#“Flux”, a concept from Facebook
.footnote[Boooh, bad guys. But they made React.]
---
class: center, middle

## “Application Architecture for Building User Interfaces”
.footnote[For React. Or not]
---
class: center, middle

## Some excerpts...
.footnote[Read them. No, I'm kidding ;)]
---
class: justified, middle

> “Flux applications have three major parts: the dispatcher, the stores, and the views (React components).”

> “These should not be confused with Model-View-Controller. Controllers do exist in a Flux application, but they are controller-views — views often found at the top of the hierarchy that retrieve data from the stores and pass this data down to their children.”

> “Additionally, action creators — dispatcher helper methods — are used to support a semantic API that describes all changes that are possible in the application.”

> “Flux eschews MVC in favor of a unidirectional data flow.”

> When a user interacts with a React view, the view propagates an action through a central dispatcher, to the various stores that hold the application's data and business logic, which updates all of the views that are affected.

![Default-aligned image](img/flip-table.gif)
---
class: center, middle

## OK, maybe with a diagram
.footnote[Hold on...]
---
class: center, middle
background-image: url(img/flux-diagram.png)
---
class: center, middle

![Default-aligned image](img/scared.gif)
---
class: center, middle

## Let's rework a little
.footnote[It's all about some stuff]
---
class: center, middle

background-image: url(img/flux-diagram.png)
---
class: center, middle
# II. Practice
 
## Let's break this all down...
.footnote[Oh yes daddy, show us some code!]
---
class: center, middle

# Think “EVENTS”
.footnote[Or dispatcher, ... It's how everything happen]
---
class: twocols-inverse
layout: false
.left-column[
  ## View
]
.right-column[.middle[.center.alone[
# Show some stuff
]]]
---
.left-column[
  ## View
  .detail[Show some stuff]
]

.right-column[
.middle[.img-code[![Default-aligned image](img/code1.png)]]
]
---
.left-column[
  ## View
  .detail[Show some stuff]
]

.right-column[
.middle[.img-code[![Default-aligned image](img/code1-annoted1.png)]]
]
---
.left-column[
  ## View
  .detail[Show some stuff]
]

.right-column[
.middle[.img-code[![Default-aligned image](img/code1-annoted2.png)]]
]
---
.left-column[
  ## View
  .detail[Show some stuff]
]

.right-column[
.middle[.img-code[![Default-aligned image](img/code1-annoted3.png)]]
]
---
class: twocols-inverse
.left-column[
  ## View
  ## Action Creators
]
.right-column[.middle[.center.alone[
# Go get some more stuff
]]]
---
.left-column[
  ## View
  ## Action Creators
  .detail[Go get some more stuff]
]

.right-column[.middle[
### - What's the main purpose in life of an "action creator"?
###       - *To create actions?*
### - Yes
###       - *It was hard!*
### - I know
###       - *...*
### - But note that "creating" an action, is actually doing it
###       - *Kill me*
]]
---
class: twocols-inverse
.left-column[
  ## View
  ## Action Creators
  ## Actions
]
.right-column[.middle[.center.alone[
# Do something with stuff
]]]
---
.left-column[
  ## View
  ## Action Creators
  ## Actions
  .detail[Do something with stuff]
]

.right-column[
## Define allowed actions
.img-code[![Default-aligned image](img/code2.png)]
]
---
.left-column[
  ## View
  ## Action Creators
  ## Actions
  .detail[Do something with stuff]
]
.right-column[
## Define the actions
.img-code[![Default-aligned image](img/code3.png)]
]
---
.left-column[
  ## View
  ## Action Creators
  ## Actions
  .detail[Do something with stuff]
]
.right-column[
## Define the actions
.img-code[![Default-aligned image](img/code3-annoted1.png)]
]
---
.left-column[
  ## View
  ## Action Creators
  ## Actions
  .detail[Do something with stuff]
]
.right-column[
## Define the actions
.img-code[![Default-aligned image](img/code3-annoted3.png)]
]
---
.left-column[
  ## View
  ## Action Creators
  ## Actions
  .detail[Do something with stuff]
]
.right-column[
## Define the actions
.img-code[![Default-aligned image](img/code3-annoted2.png)]
]
---
.left-column[
  ## View
  ## Action Creators
  ## Actions
  .detail[Do something with stuff]
]
.right-column[
## Actually do something
.img-code[![Default-aligned image](img/code4.png)]
]
---
.left-column[
  ## View
  ## Action Creators
  ## Actions
  .detail[Do something with stuff]
]
.right-column[
## Define the actions
.img-code[![Default-aligned image](img/code4-annoted1.png)]
]
---
.left-column[
  ## View
  ## Action Creators
  ## Actions
  .detail[Do something with stuff]
]
.right-column[
## Define the actions
.img-code[![Default-aligned image](img/code4-annoted2.png)]
]
---
class: twocols-inverse
.left-column[
  ## View
  ## Action Creators
  ## Actions
  ## Dispatcher
]
.right-column[.middle[.center.alone[
# Hey Everyone! There's new stuff!
]]]
---
.left-column[
  ## View
  ## Action Creators
  ## Actions
  ## Dispatcher
  .detail[Hey Everyone! There's new stuff!]
]

.right-column[
.middle[.img-code[![Default-aligned image](img/code5.png)]]
]
---
.left-column[
  ## View
  ## Action Creators
  ## Actions
  ## Dispatcher
  .detail[Hey Everyone! There's new stuff!]
]

.right-column[
.middle[.img-code[![Default-aligned image](img/code5-annoted1.png)]]
]
---
.left-column[
  ## View
  ## Action Creators
  ## Actions
  ## Dispatcher
  .detail[Hey Everyone! There's new stuff!]
]

.right-column[
.middle[.img-code[![Default-aligned image](img/code5-annoted2.png)]]
]
---
.left-column[
  ## View
  ## Action Creators
  ## Actions
  ## Dispatcher
  .detail[Hey Everyone! There's new stuff!]
]

.right-column[
.middle[.img-code[![Default-aligned image](img/code5-annoted3.png)]]
]
---
class: twocols-inverse
.left-column[
  ## View
  ## Action Creators
  ## Actions
  ## Dispatcher
  ## Store
]
.right-column[.middle[.center.alone[
# Keep track of stuff
]]]
---
.left-column[
  ## View
  ## Action Creators
  ## Actions
  ## Dispatcher
  ## Store
  .detail[Keep track of stuff]
]

> “Stores hold application state and business logic”

> “Stores are also emitters”
]
---
.left-column[
  ## View
  ## Action Creators
  ## Actions
  ## Dispatcher
  ## Store
  .detail[Keep track of stuff]
]

.right-column[
.middle[.img-code[![Default-aligned image](img/code6.png)]]
]
---
.left-column[
  ## View
  ## Action Creators
  ## Actions
  ## Dispatcher
  ## Store
  .detail[Keep track of stuff]
]

.right-column[
.middle[.img-code[![Default-aligned image](img/code6-annoted1.png)]]
]
---
.left-column[
  ## View
  ## Action Creators
  ## Actions
  ## Dispatcher
  ## Store
  .detail[Keep track of stuff]
]

.right-column[
.middle[.img-code[![Default-aligned image](img/code6-annoted2.png)]]
]
---
.left-column[
  ## View
  ## Action Creators
  ## Actions
  ## Dispatcher
  ## Store
  .detail[Keep track of stuff]
]

.right-column[
.middle[.img-code[![Default-aligned image](img/code6-annoted3.png)]]
]
---
.left-column[
  ## View
  ## Action Creators
  ## Actions
  ## Dispatcher
  ## Store
  .detail[Keep track of stuff]
]

.right-column[
.middle[.img-code[![Default-aligned image](img/code7.png)]]
]
---
.left-column[
  ## View
  ## Action Creators
  ## Actions
  ## Dispatcher
  ## Store
  .detail[Keep track of stuff]
]

.right-column[
.middle[.img-code[![Default-aligned image](img/code7-annoted1.png)]]
]
---
.left-column[
  ## View
  ## Action Creators
  ## Actions
  ## Dispatcher
  ## Store
  .detail[Keep track of stuff]
]

.right-column[
.middle[.img-code[![Default-aligned image](img/code7-annoted2.png)]]
]
---
.left-column[
  ## View
  ## Action Creators
  ## Actions
  ## Dispatcher
  ## Store
  .detail[Keep track of stuff]
]

.right-column[
.middle[.img-code[![Default-aligned image](img/code7-annoted3.png)]]
]
---
class: twocols-inverse
.left-column[
  ## View
  ## Action Creators
  ## Actions
  ## Dispatcher
  ## Store
  ## View, again
  .detail[It's a loop, remember]
]
.right-column[.middle[.center.alone[
# Change events
]]]

---
.left-column[
  ## View
  ## Action Creators
  ## Actions
  ## Dispatcher
  ## Store
  ## View
  .detail[Change events]
]

.right-column[
.middle[.img-code[![Default-aligned image](img/code8.png)]]
]
---
.left-column[
  ## View
  ## Action Creators
  ## Actions
  ## Dispatcher
  ## Store
  ## View
  .detail[Change events]
]

.right-column[
.middle[.img-code[![Default-aligned image](img/code8-annoted1.png)]]
]
---
.left-column[
  ## View
  ## Action Creators
  ## Actions
  ## Dispatcher
  ## Store
  ## View
  .detail[Change events]
]

.right-column[
.middle[.img-code[![Default-aligned image](img/code8-annoted2.png)]]
]
---
class: inverse, center

#Summary

↪ Click triggers action creator

↪ Go get data

↪ Create action for received data

↪ Send action to dispatcher

↪ Dispatcher publishes action

↪ Store listens for action

↪ Store updates state

↪ View updates
]
---
class: center, middle
background-image: url(img/please-simple.jpg)
---
class: inverse, center, middle
#III. Introducing “flux-react”
.footnote[by [Christian Alfoni](https://github.com/christianalfoni/flux-react/)]
---
class: inverse, center
#Same concepts, but takes care of the dispatcher for you, so:
 
.left[
 
 
- less code
 
 
- less repetitions
 
 
- better view of the whole process
]
---
class: inverse, center, middle

# Same example
.footnote[MOAR CODE!]
---
class: twocols-inverse
.left-column[
  ## Actions
]
.right-column[.middle[.center.alone[
# What stuff we can do
]]]
---
.left-column[
  ## Actions
  .detail[What stuff we can do]
]

.right-column[
.middle[.img-code[![Default-aligned image](img/code9.png)]]
]
---
.left-column[
  ## Actions
  .detail[What stuff we can do]
]

.right-column[
.middle[.img-code[![Default-aligned image](img/code9-annoted1.png)]]
]
---
class: twocols-inverse
.left-column[
  ## Actions
  ## Store
]
.right-column[.middle[.center.alone[
# Work on stuff
]]]
---
.left-column[
  ## Actions
  ## Store
  .detail[Work on stuff]
]

.right-column[
.middle[.img-code[![Default-aligned image](img/code10.png)]]
]
---
.left-column[
  ## Actions
  ## Store
  .detail[Work on stuff]
]

.right-column[
.middle[.img-code[![Default-aligned image](img/code10-annoted1.png)]]
]
---
.left-column[
  ## Actions
  ## Store
  .detail[Work on stuff]
]

.right-column[
.middle[.img-code[![Default-aligned image](img/code10-annoted2.png)]]
]
---
.left-column[
  ## Actions
  ## Store
  .detail[Work on stuff]
]

.right-column[
.middle[.img-code[![Default-aligned image](img/code10-annoted3.png)]]
]
---
.left-column[
  ## Actions
  ## Store
  .detail[Work on stuff]
]

.right-column[
.middle[.img-code[![Default-aligned image](img/code10-annoted4.png)]]
]
---
.left-column[
  ## Actions
  ## Store
  .detail[Work on stuff]
]

.right-column[
.middle[.img-code[![Default-aligned image](img/code10-annoted5.png)]]
]
---
class: twocols-inverse
.left-column[
  ## Actions
  ## Store
  ## View
]
.right-column[.middle[.center.alone[
# Show some stuff
]]]
---
.left-column[
  ## Actions
  ## Store
  ## View
  .detail[Show some stuff]
]

.right-column[
.middle[.img-code[![Default-aligned image](img/code11.png)]]
]
---
.left-column[
  ## Actions
  ## Store
  ## View
  .detail[Show some stuff]
]

.right-column[
.middle[.img-code[![Default-aligned image](img/code11-annoted1.png)]]
]
---
.left-column[
  ## Actions
  ## Store
  ## View
  .detail[Show some stuff]
]

.right-column[
.middle[.img-code[![Default-aligned image](img/code11-annoted2.png)]]
]
---
class: inverse, center

# I'm done
 
## How do you feel?
 
.pull-left[
Good...
![Default-aligned image](img/its-ok.gif)
]

---
class: inverse, center, middle

# THANK YOU!
.footnote[This presentation was proposed to you by [Stéphane "Twidi" Angel](http://twidi.com)]
---
class: center, middle
background-image: url(img/mire.jpg)
.footnote.preintro[Signal lost...]