Notes From The Future: Beyond Flux

Slide 1

Slide 1 text

NOTES FROM THE FUTURE Beyond Flux

Slide 2

Slide 2 text

ABOUT ME @jergason jergason on github jsjabber etc etc engineer at kuali co

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

ABOUT YOU?

Slide 6

Slide 6 text

Flux "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 stores that hold the application's data and business logic, which updates all of the views that are affected."

Slide 7

Slide 7 text

Views actions Dispatcher callback Stores events controller-view event handlers Flux

Slide 8

Slide 8 text

Views actions Dispatcher callback Stores events controller-view event handlers Flux OK

Slide 9

Slide 9 text

DEMO TIME

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

Flux

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

WHAT IS THE FUTURE

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

Immutable Data

Slide 18

Slide 18 text

DEMO TIME

Slide 19

Slide 19 text

THIS IS STUPID

Slide 20

Slide 20 text

"Much of what makes application development difﬁcult is tracking mutation and maintaining state. Developing with immutable data encourages you to think differently about how data ﬂows through your application. Subscribing to data events throughout your application, by using Object.observe, or any other mechanism, creates a huge overhead of book-keeping which can hurt performance and creates opportunities for areas of your application to get out of sync. Since immutable data never changes, subscribing to changes throughout the model is a dead-end and new data can only ever be passed from above."

Slide 21

Slide 21 text

THIS IS SLOW

Slide 22

Slide 22 text

LOL NOT SLOW

Slide 23

Slide 23 text

DEMO TIME

Slide 24

Slide 24 text

http://hypirion.com/musings/understanding-persistent-vector-pt-1

Slide 25

Slide 25 text

ᕕ( ᐛ )ᕗ Lets make an app!

Slide 26

Slide 26 text

(•_•) global app state

Slide 27

Slide 27 text

ಠ_ಠ pass global state to all children

Slide 28

Slide 28 text

(つ☢益☢)つ︵┻━┻ top-level callback

Slide 29

Slide 29 text

CURSORS

Slide 30

Slide 30 text

DEMO TIME

Slide 31

Slide 31 text

render function cursors cursor callback components cursor updates

Slide 32

Slide 32 text

Resources https://github.com/facebook/immutable-js https://github.com/omniscientjs/immstruct https://github.com/swannodette/om https://github.com/jergason/happytrack