From MVC to Flux - Speaker Deck

Slide 1

Slide 1 text

From MVC to Flux MunichJS Meetup, 13. May 2015  by Julian Viereck

Slide 2

Slide 2 text

Hi! Julian Viereck  @jviereck • Open Source since 2009 • Study CS @ ETHZ • Swimmer &   Marathon Runner • Summer: Facebook Intern

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

“Flux, Flux, Flux:   Deﬁnitely 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

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 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 15

Slide 15 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 16

Slide 16 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 17

Slide 17 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 18

Slide 18 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 19

Slide 19 text

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

Slide 20

Slide 20 text

Let’s talk about Flux.

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

Data Controller View Data Controller View Goal: Information ﬂows in one direction

Slide 23

Slide 23 text

Data Controller View ? ? ? Goal:

Slide 24

Slide 24 text

Data Controller View Goal:

Slide 25

Slide 25 text

Data Controller View Data Controller View ? Goal:

Slide 26

Slide 26 text

Data Controller View Data Controller View ? Goal:

Slide 27

Slide 27 text

Data Controller View Data Controller View Goal: ?

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 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 31

Slide 31 text

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

Slide 32

Slide 32 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 33

Slide 33 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 34

Slide 34 text

Flux App RestrictionS Information ﬂows 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 35

Slide 35 text

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

Slide 36

Slide 36 text

Let’s talk about Details.

Slide 37

Slide 37 text

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

Slide 38

Slide 38 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” } } { type: “FILE_REQ_SUCCESS”, payload: { fileName: “foo.js”,  content: “I <3 MJS!” } } No Promises in actions! Performs  XHR request XHR response

Slide 39

Slide 39 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 ﬂows in one direction Only Single Action at any point in time

Slide 40

Slide 40 text

FileTree Example https://github.com/jviereck/ﬂux_ﬁle_tree_example/ :onToggle Dispatcher createListDir  Action(“/scripts”) FSStore

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

Store View Store View Action Dispatcher Record Replay

Slide 44

Slide 44 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 45

Slide 45 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 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 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 49

Slide 49 text

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

Slide 50

Slide 50 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 51

Slide 51 text

Summary 1. Flux is not an implementation - it’s a philosophy • Data ﬂows 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 52

Slide 52 text

Julian Viereck  @jviereck  +JulianViereck Thanks! Any questions?