Abstracted Form State with Redux Form

Slide 1

Slide 1 text

ABSTRACTED FORM STATE WITH REDUX-FORM @erikras - Erik Rasmussen JSChannel 2016 - Bengaluru

Slide 2

Slide 2 text

HTML FORMS

Slide 3

Slide 3 text

JAVASCRIPT COMES TO FORMS

Slide 4

Slide 4 text

AJAX ASYNCHRONOUS JAVASCRIPT AND XML

Slide 5

Slide 5 text

THE AGE OF JQUERY

Slide 6

Slide 6 text

THE AGE OF JQUERY

Slide 7

Slide 7 text

WHAT IS FORM STATE? ▸ What are the values of each field in the form? ▸ Which fields are in the form? ▸ Are the field values valid? ▸ Which form elements has the user touched? ▸ Which field is currently active? ▸ Have the values changed from their original values? ▸ Is some sort of async validation happening right now? ▸ Is the form being submitted?

Slide 8

Slide 8 text

TWO WAY BINDING

Slide 9

Slide 9 text

TWO WAY BINDING

Slide 10

Slide 10 text

REACT

Slide 11

Slide 11 text

FORMS IN REACT ▸ Details of reading values from different types of inputs is abstracted away ▸ Events are wrapped in a SyntheticEvent to hide browser idiosyncrasies. ▸ Variations on how different DOM inputs announce changes are all wrapped in onChange. ▸ Controlled Inputs

Slide 12

Slide 12 text

WHAT ARE CONTROLLED INPUTS? ▸ Controlled inputs are inputs that will always render with the value it is given as a prop. ▸ No matter what you try to type into this input, it will always render with username as the value. ▸ This takes control away from the DOM.

Slide 13

Slide 13 text

SIMPLEST REACT FORM

Slide 14

Slide 14 text

SIMPLEST REACT FORM

Slide 15

Slide 15 text

SIMPLEST REACT FORM

Slide 16

Slide 16 text

SIMPLEST REACT FORM

Slide 17

Slide 17 text

SIMPLEST REACT FORM

Slide 18

Slide 18 text

SIMPLEST REACT FORM

Slide 19

Slide 19 text

SIMPLEST REACT FORM

Slide 20

Slide 20 text

SIMPLEST REACT FORM

Slide 21

Slide 21 text

SIMPLEST REACT FORM

Slide 22

Slide 22 text

SIMPLEST REACT FORM

Slide 23

Slide 23 text

SIMPLEST REACT FORM

Slide 24

Slide 24 text

REACT FORM DATA FLOW ▸ When you type into an input: ▸ onChange ﬁres ▸ updates the internal state of the React component ▸ forces a re-render ▸ renders the input with the updated value WHY?

Slide 25

Slide 25 text

CONTROL ▸ We have complete control over exactly what value each input will have. ▸ If we want to manipulate the value as someone types, we can do that. e.g. make all characters uppercase. ▸ We have one canonical source of information for the form values that we can trust.

Slide 26

Slide 26 text

FLUX ARCHITECTURE

Slide 27

Slide 27 text

REDUX

Slide 28

Slide 28 text

WHAT IS REDUX? ▸ All your application state kept in a single store ▸ State is read-only ▸ Update the state by dispatching actions ▸ Actions are plain javascript objects ▸ State is mutated functionally via Reducers ▸ Subscribers are notiﬁed of changes only to their speciﬁc slice of the state

Slide 29

Slide 29 text

WHY REDUX? ▸ Very easy to reason about your data ﬂow ▸ Functional, easy to test the "reducers" that modify your state ▸ If something is displaying wrong, the state is wrong ▸ Easy to ﬁnd exactly where the state got corrupted ▸ Excellent dev tools that allow time travel and replaying of actions

Slide 30

Slide 30 text

FORMS ▸ One way data ﬂow ▸ Update state on every change ▸ Rerender controlled inputs every change ▸ Maintaining state in components is full of boilerplate REDUX ▸ One way data ﬂow ▸ Update state with dispatched actions ▸ Subscribed components rerender on changes to their slice ▸ Redux manages the broadcast of state changes

Slide 31

Slide 31 text

WHAT IF...?

Slide 32

Slide 32 text

REDUX-FORM INTRODUCING... http://redux-form.com

Slide 33

Slide 33 text

SIMPLEST REACT FORM

Slide 34

Slide 34 text

SIMPLEST REDUX-FORM

Slide 35

Slide 35 text

SIMPLEST REDUX-FORM

Slide 36

Slide 36 text

SIMPLEST REDUX-FORM

Slide 37

Slide 37 text

SIMPLEST REDUX-FORM

Slide 38

Slide 38 text

SIMPLEST REDUX-FORM

Slide 39

Slide 39 text

SIMPLEST REDUX-FORM

Slide 40

Slide 40 text

QUICK RECAP ▸ HTML Forms required all server rendering and processing ▸ jQuery and AJAX helped with form processing, but all state was still in the DOM inputs. ▸ Two-way binding with Angular and Ember provided a hybrid solution bridging the DOM and Javascript ▸ React introduced "controlled inputs" that ceded all control of data to Javascript.

Slide 41

Slide 41 text

QUICK RECAP ▸ React "controlled inputs" require a lot of state updating boilerplate. ▸ Redux is excellent and managing state via functional reducers and replayable actions. ▸ Redux-Form marries Redux to React "controlled inputs" to manage all your form state in Redux, for fast form development and easy debugging. ▸ How fast is the development?

Slide 42

Slide 42 text

LIVE CODING DEMO TIME

Slide 43

Slide 43 text

REDUX FORM STATS ▸ First commit was July 31, 2015 ▸ Over 2,900 stars on Github ▸ Version 6 was a complete rewrite to optimize for speed ▸ Version 6 will be released later this month ▸ Widely used in production apps around the globe ▸ Works with React Native

Slide 44

Slide 44 text

REDUX FORM DOWNLOADS

Slide 45

Slide 45 text

THE FUTURE

Slide 46

Slide 46 text

THE FUTURE OF WEB FORMS ▸ Stateless DOM components ▸ Declarative UI ▸ Client side, application-wide, state management

Slide 47

Slide 47 text

THANKS HAPPY CODING @erikras - Erik Rasmussen JSChannel 2016 - Bengaluru redux-form.com