Slide 1

Slide 1 text

Introduction to Flux Zürich ReactJS Meetup, 1. April 2015
 by Julian Viereck

Slide 2

Slide 2 text

Hi! Julian Viereck
 @jviereck • Study CS @ ETHZ • Do Web stuff, not Web Dev • Open Source since 2009 • Train for Zurich Marathon • Summer: Facebook Intern

Slide 3

Slide 3 text

Flux Principle for building scaleable, dynamic data driven applications.

Slide 4

Slide 4 text

Part I: 
 What is Flux? Part II: Hands on example

Slide 5

Slide 5 text

“Flux, flux, flux: 
 Definitely a hot topic but I heard it is
 hard to get your head around it”

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

Flux: Solves fundamental issue in SW development.

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 = Data Controller View What’s the problem? Large App Small App How complicated? “M” “V” “C”

Slide 10

Slide 10 text

Data Controller View Small App Large App How complicated? Data Controller View Data Controller View Spaghetti 
 App = Q:
 Do you want
 to write tests
 for this? How to detect
 crossover? Manageable by Developer

Slide 11

Slide 11 text

HOW? Small App Large App How complicated? Manageable by Developer Data Controller View Data Controller View to write tests
 for this? Large App =
 3 x Small App

Slide 12

Slide 12 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 13

Slide 13 text

Small App Large App How complicated? Manageable by Developer Data Controller View Data Controller View to write tests
 for this? Large App =
 3 x Small App Horizontal Scaling Vertical Scaling HOW? Max System
 Performance

Slide 14

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

Slide 15 text

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

Slide 16

Slide 16 text

Data Controller View ? ? ? Goal:

Slide 17

Slide 17 text

Data Controller View Goal:

Slide 18

Slide 18 text

Data Controller View Data Controller View ? Goal:

Slide 19

Slide 19 text

Data Controller View Data Controller View ? Goal:

Slide 20

Slide 20 text

Data Controller View Data Controller View Goal: ?

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

Store View Store View Data Controller View Data Controller View Open Issue: How to prevent cascading updates? Solution: Express updates explicit via Actions

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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 Flux App Store View Store View Action Dispatcher Action

Slide 27

Slide 27 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 28

Slide 28 text

“Problem” with Single Action 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 29

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

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

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

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

Hands On Example

Slide 35

Slide 35 text

Julian Viereck
 @jviereck
 +JulianViereck Thanks! Any questions?