Flux + React - Speaker Deck

Slide 1

Slide 1 text

Flux + React Rick Mak May 2015

Slide 2

Slide 2 text

One of the pain DOM

Slide 3

Slide 3 text

Direct DOM = painful = BUG

Slide 4

Slide 4 text

Age of Backbone Model View

Slide 5

Slide 5 text

Works Great in small scale

Slide 6

Slide 6 text

more Model; more View

Slide 7

Slide 7 text

It is SLOW

Slide 8

Slide 8 text

Let Optimise it

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

Say Hello to VirtualDOM

Slide 11

Slide 11 text

Model Virtual DOM DOM Interact with VirtualDOM Data Data Event Event

Slide 12

Slide 12 text

setState will trigger render Deﬁne your view

Slide 13

Slide 13 text

React calculate the diff • Set state will mark the red dot • React will ﬁnd out the blue dots • Re-render with only the modiﬁed dom Source: https://facebook.github.io/react/img/blog/react-diff-tree.png

Slide 14

Slide 14 text

Fast without spaghetti

Slide 15

Slide 15 text

Let focus on Logic

Slide 16

Slide 16 text

State inconsistency Very common in single page webapp

Slide 17

Slide 17 text

State inconsistency • Server sync not sync with client state • item missing • duplicate item • State between client not sync • State panic with poor internet

Slide 18

Slide 18 text

Flux ﬁx that

Slide 19

Slide 19 text

It is a pattern A pattern enforcing unidirectional data ﬂow Flux is not framework

Slide 20

Slide 20 text

View Action Store Dispatcher Server

Slide 21

Slide 21 text

Unidirectional data ﬂow • Faster debug • Faster on boarding • Faster iteration • Less cascading effect

Slide 22

Slide 22 text

Thank you