Michel Weststrate, Mendix, Rotterdam — State Management is Easy

Slide 1

Slide 1 text

State Management Is Easy Michel Weststrate @mweststrate Mendix React Amsterdam 2016 1

Slide 2

Slide 2 text

The DOM Was Hard... 2

Slide 3

Slide 3 text

State Management Is Hard 3

Slide 4

Slide 4 text

Redux: Simple & Elegant Concept 4

Slide 5

Slide 5 text

Pulls Amazing Tricks 5

Slide 6

Slide 6 text

New Things To Learn! Reducers Immutables Denormalization Connect Selectors Smart & Dumb components Thunks & Sagas 6

Slide 7

Slide 7 text

MobX - No Pedaling 7

Slide 8

Slide 8 text

Slide 9

Slide 9 text

Slide 10

Slide 10 text

MobX 1. The Idea 2. Simple 3. Fast 4. Scalable 5. Questions 10

Slide 11

Slide 11 text

Why Is State Management Hard? Σ State Aggregates Lookup tables Server Storage UI 11 affects:

Slide 12

Slide 12 text

1. State Should Be Minimally Defined No Caching No Data Duplication No Cascading State Changes 12

Slide 13

Slide 13 text

2. Everything Should Be Derived Automatically Define derivations MobX ensures efficiency & consistency 13

Slide 14

Slide 14 text

Actions State Views Modify Updates Σ 14

Slide 15

Slide 15 text

Simple github.com/mweststrate/mobx-contacts-list/ 15

Slide 16

Slide 16 text

Slide 17

Slide 17 text

@observable / @computed 17

Slide 18

Slide 18 text

observer 18

Slide 19

Slide 19 text

observer 19

Slide 20

Slide 20 text

@observer 20

Slide 21

Slide 21 text

Actions 21

Slide 22

Slide 22 text

@observable enables MobX to observe your data @observer MobX ensures that this component is consistent with the state @computed MobX ensures that this value is consistent with the state 22

Slide 23

Slide 23 text

Fast Numbers! 23

Slide 24

Slide 24 text

Slide 25

Slide 25 text

Such Fast Only track data which is accessed in last render Minimizes amount of computations PureRenderMixin 25

Slide 26

Slide 26 text

Scalable MobX @ Mendix 26

Slide 27

Slide 27 text

~500 classes apidocs.mendix.com/modelsdk/ 27

Slide 28

Slide 28 text

Slide 29

Slide 29 text

Demo link 29

Slide 30

Slide 30 text

Slide 31

Slide 31 text

Scalable 31 Minimal state Graphs: natural mental model Simple code Architectural freedom Third party friendly actions? State views? Modify Updates

Slide 32

Slide 32 text

State Management Is Simple! Questions? #reactamsterdam @mweststrate "I am putting my eggs into React and MobX basket. So far building two huge React apps I haven't had any reason to regret it." "It's almost ridiculous how simple and powerful MobX + React is" "Working with #mobx is basically a continuous loop of me going “this is way too simple, it definitely won’t work” only to be proven wrong" "Try react-mobx with es6 and you will love it so much that you will hug someone." "MobX compared to Redux feels like gravity gun compared to a wheelbarrow" "I used to be Angular guy, but seeing how observables play well with React, I would never go back to it." "I have built big app with MobX already and comparing to the one before that which was using Redux, it is simpler to read and much easier to reason about." "Cuts out much boilerplate and complexity." "The #mobx is the way I always want things to be! It's really surprising simple and fast! Totally awesome! Don't miss it!" 32