Next Generation Forms with 🏁 React Final Form

Slide 1

Slide 1 text

September 2018 Next Generation Forms with React Final Form Erik Rasmussen

Slide 2

Slide 2 text

Thanks to our sponsors!

Slide 3

Slide 3 text

Forms

Slide 4

Slide 4 text

Forms are Hard

Slide 5

Slide 5 text

Form UI is diﬀerent • Different input device • Rapid state change • Unidirectional data ﬂow in React

Slide 6

Slide 6 text

– Jordan Walke, @jordwalke August 29, 2017 “React exposed the inherent complexity of forms interactions that was always there.”

Slide 7

Slide 7 text

What is Form State? • Which field currently has focus? • Which fields are dirty? • Which fields have errors? • Which fields has the user visited? • Are we currently running some sort of asynchronous validation? • Are we currently submitting? • Have we tried to submit and received some errors from the server? • Which fields are dirty since we last tried to submit?

Slide 8

Slide 8 text

Forms are Hard

Slide 9

Slide 9 text

Redux-Form redux-form.com

Slide 10

Slide 10 text

Redux-Form Monthly Downloads

Slide 11

Slide 11 text

Complaints about Redux-Form • It's only for React? • I have to use Redux? • Why so much rerendering? • It's over 26k gzipped?!?

Slide 12

Slide 12 text

Conceiving the ideal form library • Pure javascript • Framework agnostic • Subscription based • Modular, pluggable solutions

Slide 13

Slide 13 text

ﬁnal-form.org @ﬁnalformjs

Slide 14

Slide 14 text

ﬁnal-form.org @ﬁnalformjs • Standalone form state management engine • Framework agnostic • Subscription based • Plugin capabilities, with "mutators" and "decorators" that allow arbitrary additional functionality • Zero dependencies • Only 4.3k gzipped

Slide 15

Slide 15 text

ﬁnal-form.org @ﬁnalformjs

Slide 16

Slide 16 text

final-form.org @finalformjs • React bindings for Final Form • Maps form and field state to render props • Handles React SyntheticEvents • Even smaller: 3.1k gzipped • Total React form solution: 7.4k gzipped

Slide 17

Slide 17 text

React Form Library Bundle Sizes [email protected], [email protected], [email protected], ﬁ[email protected], react-ﬁ[email protected], [email protected] (gzipped)

Slide 18

Slide 18 text

React Final Form API •Form • Wraps the entire form and provides form state to a render prop •Field • Registers a ﬁeld and provides ﬁeld state and callback functions to a render prop •FormSpy • Provides a way to read form state within your form without rerendering the entire form.

Slide 19

Slide 19 text

Live Coding Photo by Jonathan Romain on Unsplash

Slide 20

Slide 20 text

How to pick a library • Functionality • Extensibility • Examples • Well maintained • Code Coverage • Bundle Size • Does it make sense to you?

Slide 21

Slide 21 text

– Erik Rasmussen, @erikras March 29, 2018 “Form library authors are like anesthesiologists: They help people feel a *little* bit better when enduring an excruciating experience.”

Slide 22

Slide 22 text

Thank you! ¡Muchas Gracias! @erikras @ﬁnalformjs https://ﬁnal-form.org React Alicante 2018