Tweet
Tweet

Slide 1

Slide 1 text

From MVC to Flux Special Malte Visit Google Presentation, 05. June 2015
 by Julian Viereck

Slide 2

Slide 2 text

Hi! Julian Viereck
 @jviereck • Open Source since 2009 • Studies CS @ ETHZ • Marathon Runner,
 Swimmer • 2013: Google Intern in Munich • Next: Facebook Internship

Slide 3

Slide 3 text

https://www.twitter.com/BenLesh/status/ 593096424016842752

Slide 4

Slide 4 text

“Flux, Flux, Flux: 
 Definitely a hot topic but I heard it is
 hard to get your head around it” - by a Zurich web developer

Slide 5

Slide 5 text

Flux Principle for building scaleable, 
 dynamic data,
 applications.

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

Flux: Solves fundamental software development issue.

Slide 8

Slide 8 text

Flux: Solves fundamental software development issue.

Slide 9

Slide 9 text

- Edsger Dijkstra “The art of programming is the art 
 of organizing complexity, […]
 and avoiding its bastard chaos 
 as effectively as possible.”

Slide 10

Slide 10 text

APP =

Slide 11

Slide 11 text

APP = “M” “V” “C”

Slide 12

Slide 12 text

APP = “M” “V” “C” Data Controller View

Slide 13

Slide 13 text

APP = “M” “V” “C” Data Controller View

Slide 14

Slide 14 text

APP = “M” “V” “C” Data Controller View ?

Slide 15

Slide 15 text

APP = What’s the problem? “M” “V” “C” Data Controller View

Slide 16

Slide 16 text

APP = What’s the problem? “M” “V” “C” Data Controller View

Slide 17

Slide 17 text

Data Controller View Data Controller View Data Controller View What’s the problem? “M” “V” “C” APP =

Slide 18

Slide 18 text

Data Controller View Data Controller View Data Controller View What’s the problem? APP = “M” “V” “C”

Slide 19

Slide 19 text

Data Controller View Data Controller View Data Controller View Spaghetti 
 App = What’s the problem? “M” “V” “C”

Slide 20

Slide 20 text

Data Controller View Data Controller View Data Controller View Spaghetti 
 App = ① Many different paths 
 What’s the problem? “M” “V” “C”

Slide 21

Slide 21 text

Data Controller View Data Controller View Data Controller View “M” “V” “C” Spaghetti 
 App = What’s the problem? ① Many different paths 


Slide 22

Slide 22 text

Data Controller View Data Controller View Data Controller View “M” “V” “C” Spaghetti 
 App = What’s the problem? ① Many different paths 


Slide 23

Slide 23 text

Data Controller View Data Controller View Data Controller View “M” “V” “C” Spaghetti 
 App = What’s the problem? ① Many different paths 


Slide 24

Slide 24 text

Data Controller View Data Controller View Data Controller View “M” “V” “C” Spaghetti 
 App = What’s the problem? ① Many different paths ② Cascading updates /
 Side effects

Slide 25

Slide 25 text

Data Controller View Data Controller View Data Controller View “M” “V” “C” Spaghetti 
 App = What’s the problem? ① Many different paths ② Cascading updates /
 Side effects

Slide 26

Slide 26 text

Data Controller View Data Controller View Data Controller View “M” “V” “C” Spaghetti 
 App = What’s the problem? ① Many different paths ② Cascading updates /
 Side effects

Slide 27

Slide 27 text

Data Controller View Data Controller View Data Controller View “M” “V” “C” Spaghetti 
 App = What’s the problem? ① Many different paths ② Cascading updates /
 Side effects Small App App Complexity

Slide 28

Slide 28 text

Data Controller View Data Controller View Data Controller View “M” “V” “C” Spaghetti 
 App = What’s the problem? ① Many different paths ② Cascading updates /
 Side effects Small App Large App App Complexity

Slide 29

Slide 29 text

Data Controller View Data Controller View Data Controller View “M” “V” “C” Spaghetti 
 App = What’s the problem? ① Many different paths ② Cascading updates /
 Side effects Small App Large App App Complexity Manageable by
 Developer

Slide 30

Slide 30 text

http://animalia-life.com/ Scaling in Nature Not Scaleable Scaleable www.informatiquegifs.com/, Insects Mammals vs

Slide 31

Slide 31 text

http://animalia-life.com/ Scaling in Nature circulatory system veins and arteries Not Scaleable Scaleable www.informatiquegifs.com/, Insects Mammals vs

Slide 32

Slide 32 text

http://animalia-life.com/ Scaling in Nature circulatory system veins and arteries Not Scaleable Scaleable www.informatiquegifs.com/, Insects Mammals unrestricted restricted vs

Slide 33

Slide 33 text

What’s the problem? ① Many different paths ② Cascading updates /
 Side effects Small App Large App App Complexity Manageable by
 Developer What’s the solution?

Slide 34

Slide 34 text

What’s the problem? ① Many different paths ② Cascading updates /
 Side effects Small App Large App App Complexity Manageable by
 Developer Large App =
 3 x Small App What’s the solution?

Slide 35

Slide 35 text

What’s the problem? ① Many different paths ② Cascading updates /
 Side effects Small App Large App App Complexity Manageable by
 Developer Large App =
 3 x Small App What’s the solution?

Slide 36

Slide 36 text

What’s the problem? ① Many different paths ② Cascading updates /
 Side effects Small App Large App App Complexity Manageable by
 Developer Large App =
 3 x Small App What’s the solution? How?

Slide 37

Slide 37 text

How to keep a city clean?

Slide 38

Slide 38 text

How to keep a city clean? By passing a law to disallow littering.

Slide 39

Slide 39 text

How to keep a city clean? By passing a law to disallow littering. Enforce the law. - and -

Slide 40

Slide 40 text

How to keep a city clean? By passing a law to disallow littering. Enforce the law. - and - NOTE: Better way - teach everyone benefits of not littering and life in a better world :)

Slide 41

Slide 41 text

Let’s talk about Flux.

Slide 42

Slide 42 text

Data Controller View Data Controller View Spaghetti 
 App

Slide 43

Slide 43 text

Data Controller View Data Controller View Spaghetti 
 App Flux App ?

Slide 44

Slide 44 text

Data Controller View Data Controller View Spaghetti 
 App FLUX RestrictionS ① Information flows in one direction ② Only Single Action at any point in time Flux App ?

Slide 45

Slide 45 text

Data Controller View Data Controller View Goal: ① Information flows in one direction

Slide 46

Slide 46 text

Data Controller View ? ? ? Goal:

Slide 47

Slide 47 text

Data Controller View Goal:

Slide 48

Slide 48 text

Data Controller View Data Controller View Goal:

Slide 49

Slide 49 text

Data Controller View Data Controller View ? Goal:

Slide 50

Slide 50 text

Data Controller View Data Controller View ? Goal:

Slide 51

Slide 51 text

Data Controller View Data Controller View Goal:

Slide 52

Slide 52 text

Data Controller View Data Controller View ? Goal:

Slide 53

Slide 53 text

Data Controller View Data Controller View Goal:

Slide 54

Slide 54 text

Data Controller View Data Controller View Goal: ?

Slide 55

Slide 55 text

Data Controller View Data Controller View Goal:

Slide 56

Slide 56 text

Data Controller View Data Controller View Goal: Finished: Information flows only in one direction.

Slide 57

Slide 57 text

Data Controller View Data Controller View Data Controller View Data Controller View

Slide 58

Slide 58 text

Data Controller View Data Controller View

Slide 59

Slide 59 text

Data Controller View Data Controller View ObservationS

Slide 60

Slide 60 text

Data Controller View Data Controller View ObservationS • Controller only controls the data

Slide 61

Slide 61 text

Data Controller View Data Controller View ObservationS • Controller only controls the data • Data only controls the views

Slide 62

Slide 62 text

Data Controller View Data Controller View ObservationS • Controller only controls the data • Data only controls the views 㱺 Introduce Stores = App State +
 Business Logic Controller + Data

Slide 63

Slide 63 text

Data Controller View Data Controller View ObservationS • Controller only controls the data • Data only controls the views 㱺 Introduce Stores = App State +
 Business Logic 㱺 Store Controller + Data

Slide 64

Slide 64 text

Data Controller View Data Controller View Data Controller View Data Controller View

Slide 65

Slide 65 text

Data Controller View Data Controller View Store View Store View Data Controller View Data Controller View

Slide 66

Slide 66 text

Store View Store View Data Controller View Data Controller View

Slide 67

Slide 67 text

Store View Store View Data Controller View Data Controller View App Flipper Game!

Slide 68

Slide 68 text

Store View Store View Data Controller View Data Controller View App Flipper Game!

Slide 69

Slide 69 text

Store View Store View Data Controller View Data Controller View App Flipper Game!

Slide 70

Slide 70 text

Store View Store View Data Controller View Data Controller View Open Issue: How to prevent cascading updates? App Flipper Game!

Slide 71

Slide 71 text

Store View Store View Data Controller View Data Controller View Open Issue: How to prevent cascading updates? Solution: Express updates explicit via Actions,
 add Gate Keeper App Flipper Game!

Slide 72

Slide 72 text

Store View Store View Solution: Express updates explicit via Actions,
 add Gate Keeper

Slide 73

Slide 73 text

Store View Store View Solution: Express updates explicit via Actions,
 add Gate Keeper Action Action

Slide 74

Slide 74 text

Store View Store View Dispatcher Solution: Express updates explicit via Actions,
 add Gate Keeper Action Action

Slide 75

Slide 75 text

Store View Store View Dispatcher Solution: Express updates explicit via Actions,
 add Gate Keeper ② Only Single Action at any point in time
 (asserted by Dispatcher Implementation) FLUX RestrictionS Action Action

Slide 76

Slide 76 text

Flux App RestrictionS ① Information flows in one direction ② Only Single Action at any point in time Store View Store View Action Dispatcher

Slide 77

Slide 77 text

Flux App RestrictionS ① Information flows in one direction ② Only Single Action at any point in time Store View Store View Action Dispatcher Server

Slide 78

Slide 78 text

Flux App RestrictionS ① Information flows in one direction ② Only Single Action at any point in time Store View Store View Action Dispatcher Server Action

Slide 79

Slide 79 text

Flux App RestrictionS ① Information flows in one direction ② Only Single Action at any point in time Store View Store View Action Dispatcher Q:
 Do you want
 to write tests
 for this? Server Action

Slide 80

Slide 80 text

Flux App Store View Store View Action Dispatcher Data Controller View Data Controller View Spaghetti 
 App

Slide 81

Slide 81 text

Let’s talk about Details.

Slide 82

Slide 82 text

Store View Store View Action Dispatcher View Dispatcher Store Store

Slide 83

Slide 83 text

Store View Store View Action Dispatcher View Dispatcher on
 Change Store Store

Slide 84

Slide 84 text

Store View Store View Action Dispatcher View Dispatcher on
 Change .get() Store Store

Slide 85

Slide 85 text

Store View Store View Action Dispatcher View Dispatcher on
 Change .get() Store Store

Slide 86

Slide 86 text

Store View Store View Action Dispatcher View Dispatcher onInteraction on
 Change .get() Store Store

Slide 87

Slide 87 text

Store View Store View Action Dispatcher View Action
 Creator Dispatcher onInteraction on
 Change .get() Store Store

Slide 88

Slide 88 text

.get() Store View Store View Action Dispatcher Store View Action
 Creator Dispatcher onInteraction on
 Change Store

Slide 89

Slide 89 text

.get() Store View Store View Action Dispatcher Store View Action
 Creator Dispatcher onInteraction on
 Change Store Performs
 XHR request

Slide 90

Slide 90 text

.get() Store View Store View Action Dispatcher Store View Action
 Creator Dispatcher onInteraction on
 Change Store Action { type: “FILE_REQ_BEGIN”, payload: { fileName: “foo.js” } } Performs
 XHR request

Slide 91

Slide 91 text

.get() Store View Store View Action Dispatcher Store View Action
 Creator Dispatcher onInteraction on
 Change Store Action { type: “FILE_REQ_BEGIN”, payload: { fileName: “foo.js” } } Performs
 XHR request

Slide 92

Slide 92 text

.get() Store View Store View Action Dispatcher Store View Action
 Creator Dispatcher onInteraction on
 Change Store { type: “FILE_REQ_BEGIN”, payload: { fileName: “foo.js” } } Performs
 XHR request

Slide 93

Slide 93 text

.get() Store View Store View Action Dispatcher Store View Action
 Creator Dispatcher onInteraction on
 Change Store { type: “FILE_REQ_BEGIN”, payload: { fileName: “foo.js” } } Performs
 XHR request

Slide 94

Slide 94 text

.get() Store View Store View Action Dispatcher Store View Action
 Creator Dispatcher onInteraction on
 Change Store { type: “FILE_REQ_BEGIN”, payload: { fileName: “foo.js” } } Performs
 XHR request

Slide 95

Slide 95 text

.get() Store View Store View Action Dispatcher Store View Action
 Creator Dispatcher onInteraction on
 Change Store { type: “FILE_REQ_BEGIN”, payload: { fileName: “foo.js” } } Performs
 XHR request XHR response

Slide 96

Slide 96 text

.get() Store View Store View Action Dispatcher Store View Action
 Creator Dispatcher onInteraction on
 Change Store { type: “FILE_REQ_BEGIN”, payload: { fileName: “foo.js” } } { type: “FILE_REQ_SUCCESS”, payload: { fileName: “foo.js”,
 content: “I <3 MJS!” } } Performs
 XHR request XHR response

Slide 97

Slide 97 text

.get() Store View Store View Action Dispatcher Store View Action
 Creator Dispatcher onInteraction on
 Change Store { type: “FILE_REQ_BEGIN”, payload: { fileName: “foo.js” } } { type: “FILE_REQ_SUCCESS”, payload: { fileName: “foo.js”,
 content: “I <3 MJS!” } } Performs
 XHR request XHR response

Slide 98

Slide 98 text

.get() Store View Store View Action Dispatcher Store View Action
 Creator Dispatcher onInteraction on
 Change Store { type: “FILE_REQ_BEGIN”, payload: { fileName: “foo.js” } } { type: “FILE_REQ_SUCCESS”, payload: { fileName: “foo.js”,
 content: “I <3 MJS!” } } Performs
 XHR request XHR response

Slide 99

Slide 99 text

.get() Store View Store View Action Dispatcher Store View Action
 Creator Dispatcher onInteraction on
 Change Store { type: “FILE_REQ_BEGIN”, payload: { fileName: “foo.js” } } { type: “FILE_REQ_SUCCESS”, payload: { fileName: “foo.js”,
 content: “I <3 MJS!” } } Performs
 XHR request XHR response

Slide 100

Slide 100 text

.get() Store View Store View Action Dispatcher Store View Action
 Creator Dispatcher onInteraction on
 Change Store { type: “FILE_REQ_BEGIN”, payload: { fileName: “foo.js” } } { type: “FILE_REQ_SUCCESS”, payload: { fileName: “foo.js”,
 content: “I <3 MJS!” } } No Promises in actions! Performs
 XHR request XHR response

Slide 101

Slide 101 text

Restrictions 㱺 Modular apps enforced naturally
 㱺 Avoid common error sources Practical Rules ③ Stores are updated only via Actions ④ Views refresh on Store’s changeEvent ⑤ Views query data via Store’s getter functions FLUX RestrictionS ① Information flows in one direction ② Only Single Action at any point in time

Slide 102

Slide 102 text

FileTree Example

Slide 103

Slide 103 text

FileTree Example https://github.com/jviereck/flux_file_tree_example/

Slide 104

Slide 104 text

FileTree Example https://github.com/jviereck/flux_file_tree_example/

Slide 105

Slide 105 text

FileTree Example https://github.com/jviereck/flux_file_tree_example/ :onToggle createListDir
 Action(“/scripts”)

Slide 106

Slide 106 text

FileTree Example https://github.com/jviereck/flux_file_tree_example/ :onToggle createListDir
 Action(“/scripts”)

Slide 107

Slide 107 text

FileTree Example https://github.com/jviereck/flux_file_tree_example/ :onToggle Dispatcher createListDir
 Action(“/scripts”)

Slide 108

Slide 108 text

FileTree Example https://github.com/jviereck/flux_file_tree_example/ :onToggle Dispatcher createListDir
 Action(“/scripts”) FSStore

Slide 109

Slide 109 text

FileTree Example https://github.com/jviereck/flux_file_tree_example/ :onToggle Dispatcher createListDir
 Action(“/scripts”) FSStore

Slide 110

Slide 110 text

FileTree Example https://github.com/jviereck/flux_file_tree_example/ :onToggle Dispatcher createListDir
 Action(“/scripts”) FSStore

Slide 111

Slide 111 text

React Container-Component FS-Store FT-Store Dispatcher Action https://medium.com/@learnreact/container- components-c0e67432e005 :onToggle

Slide 112

Slide 112 text

No content

Slide 113

Slide 113 text

Store View Store View Action Dispatcher Record

Slide 114

Slide 114 text

Store View Store View Action Dispatcher Record Replay

Slide 115

Slide 115 text

Single Action Show Stopper

Slide 116

Slide 116 text

Single Action Show Stopper Only Single Action at the time:

Slide 117

Slide 117 text

Single Action Show Stopper Only Single Action at the time: • Prevent may common coding patterns

Slide 118

Slide 118 text

Single Action Show Stopper Only Single Action at the time: • Prevent may common coding patterns • Solution not always obvious

Slide 119

Slide 119 text

Single Action Show Stopper Only Single Action at the time: • Prevent may common coding patterns • Solution not always obvious BUT: Flux was always right in my experience! Take it as a sign that you try
 to build a part in your app
 that is not modular!

Slide 120

Slide 120 text

Single Action Show Stopper Only Single Action at the time: • Prevent may common coding patterns • Solution not always obvious BUT: Flux was always right in my experience! Helpful question to ask:
 “If I add this, is it still easy to write contained tests?”
 “Create smaller actions and dispatch them sequential?” Take it as a sign that you try
 to build a part in your app
 that is not modular!

Slide 121

Slide 121 text

Single Action Show Stopper View Action
 Creator A :onExpand

Slide 122

Slide 122 text

Single Action Show Stopper View Action
 Creator A Cascading Updates! View Action
 Creator B :onExpand :onInitialRender

Slide 123

Slide 123 text

Single Action Show Stopper View Action
 Creator A Cascading Updates! Fix View Action
 Creator B :onExpand :onInitialRender

Slide 124

Slide 124 text

Single Action Show Stopper View Action
 Creator A Cascading Updates! Fix View Action
 Creator B View Action
 Creator A :onExpand :onInitialRender :onExpand

Slide 125

Slide 125 text

Single Action Show Stopper View Action
 Creator A Cascading Updates! Fix View Action
 Creator B View Action
 Creator A Action
 Creator B :onExpand :onInitialRender :onExpand

Slide 126

Slide 126 text

$ npm install flux Store View Store View Action Dispatcher Q: What do you get?

Slide 127

Slide 127 text

$ npm install flux Store View Store View Action Dispatcher Q: What do you get?

Slide 128

Slide 128 text

Flux Implementations • FB Flux: https://facebook.github.io/flux/ • Fluxxor: http://fluxxor.com/ • Reflux: https://github.com/spoike/refluxjs • Fluxible: http://fluxible.io/ • Flummox: https://github.com/acdlite/flummox Isomorphic: Work on server as well

Slide 129

Slide 129 text

Flux Implementations https://github.com/gaearon/redux

Slide 130

Slide 130 text

Redux https://github.com/gaearon/redux

Slide 131

Slide 131 text

Redux https://github.com/gaearon/redux • Think about it as lambda calculus for app design

Slide 132

Slide 132 text

Redux https://github.com/gaearon/redux • Think about it as lambda calculus for app design • Goal: Keep it

Slide 133

Slide 133 text

Redux https://github.com/gaearon/redux • Think about it as lambda calculus for app design • Goal: Keep it • simple

Slide 134

Slide 134 text

Redux https://github.com/gaearon/redux • Think about it as lambda calculus for app design • Goal: Keep it • simple • modular / separated

Slide 135

Slide 135 text

Redux https://github.com/gaearon/redux • Think about it as lambda calculus for app design • Goal: Keep it • simple • modular / separated (e.g. stores are stateless!!!)

Slide 136

Slide 136 text

Redux https://github.com/gaearon/redux • Think about it as lambda calculus for app design • Goal: Keep it • simple • modular / separated • functional (e.g. stores are stateless!!!)

Slide 137

Slide 137 text

Redux https://github.com/gaearon/redux • Think about it as lambda calculus for app design • Goal: Keep it • simple • modular / separated • functional • Result: “WTF” 㱺 “MAGIC” 㱺 “TESTABLE!!!” (e.g. stores are stateless!!!)

Slide 138

Slide 138 text

Flux Implementations https://twitter.com/dan_abramov/status/ 606778393212952578

Slide 139

Slide 139 text

(store, actions) -> (components) View Dependency
 Injection FTW

Slide 140

Slide 140 text

View Action
 Creator Dispatcher onInteraction on
 Change .get() Store Store (store, actions) -> (components) View Dependency
 Injection FTW

Slide 141

Slide 141 text

View Action
 Creator Dispatcher onInteraction on
 Change .get() Store Store (state, action) -> (state’) Store (store, actions) -> (components) View Dependency
 Injection FTW

Slide 142

Slide 142 text

View Action
 Creator Dispatcher onInteraction on
 Change .get() Store Store (state, action) -> (state’) Store (store, actions) -> (components) View Dependency
 Injection FTW Where is store state?

Slide 143

Slide 143 text

View Action
 Creator Dispatcher onInteraction on
 Change .get() Store Store (state, action) -> (state’) Store (store, actions) -> (components) View Dependency
 Injection FTW → All in dispatcher! → Hot reloading Where is store state?

Slide 144

Slide 144 text

View Action
 Creator Dispatcher onInteraction on
 Change .get() Store Store (state, action) -> (state’) Store (store, actions) -> (components) View () -> Action 
 () -> (dsptch -> Action)
 () -> ((dsptch, state) -> Action) ActionCreator Dependency
 Injection FTW → All in dispatcher! → Hot reloading Where is store state?

Slide 145

Slide 145 text

Testability <3 Injection https://twitter.com/dan_abramov/status/606778111812845569

Slide 146

Slide 146 text

The following examples are taken 
 from the Readme.md file at: 
 https://github.com/gaearon/redux

Slide 147

Slide 147 text

No content

Slide 148

Slide 148 text

No content

Slide 149

Slide 149 text

No content

Slide 150

Slide 150 text

No content

Slide 151

Slide 151 text

Handling Derived Data • Idea: • Stores have normalised data • Use a special store to get derived data • Stores consuming actions should NOT work on derived data directly

Slide 152

Slide 152 text

Derived Data https://gist.github.com/gaearon/d77ca812015c0356654f

Slide 153

Slide 153 text

[Reading Recommendation] http://blog.confluent.io/2015/03/04/turning-the-database-inside-out-with-apache-samza/ More about derived data

Slide 154

Slide 154 text

Closing up

Slide 155

Slide 155 text

Flux + X Your App Vanilla JS React.JS Fluxxor Backbone } Flexible / adjustable concept Easy to extend existing code Angular.JS FB Flux Reflux Fluxible Flummox … …

Slide 156

Slide 156 text

What Flux Feels To Me • App structure falls into place naturally • Bundle Data + Controller = Store feels good • Enforcing independent stores useful • Actions encode higher semantic level • Easier to think / reason about App • No interleaving actions / synchronous code • Easier to test Store Store

Slide 157

Slide 157 text

Summary 1. Flux is not an implementation - it’s a philosophy • Data flows one direction • One action at the time 2. Your App: “Flux + X” • Combine with other library • Easy to restructure existing app 3. Flux gives useful guidance - you still can go off-road

Slide 158

Slide 158 text

Julian Viereck
 @jviereck
 +JulianViereck Thanks! Any questions?