Next Generation Forms with 🏁 React Final Form

Presented at React Alicante 2018.

Video: https://youtu.be/WoSzy-4mviQ
Repo: https://github.com/erikras/reactalicante2018

Transcript

1. September 2018 Next Generation Forms with React Final Form Erik Rasmussen
2. Thanks to our sponsors!
3. Forms
4. Forms are Hard
5. Form UI is different • Different input device • Rapid state change • Unidirectional data flow in React
6. – Jordan Walke, @jordwalke August 29, 2017 “React exposed the inherent complexity of forms interactions that was always there.”
7. 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?
8. Forms are Hard
9. Redux-Form redux-form.com
10. Redux-Form Monthly Downloads
11. Complaints about Redux-Form • It's only for React? • I have to use Redux? • Why so much rerendering? • It's over 26k gzipped?!?
12. Conceiving the ideal form library • Pure javascript • Framework agnostic • Subscription based • Modular, pluggable solutions
13. final-form.org @finalformjs
14. final-form.org @finalformjs • 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
15. final-form.org @finalformjs
16. 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
17. React Form Library Bundle Sizes redux-form@7.4.2, react-redux-form@1.16.9, formik@1.3.0, final-form@4.9.1, react-final-form@3.6.5, informed@1.10.4 (gzipped)
18. React Final Form API •Form • Wraps the entire form and provides form state to a render prop •Field • Registers a field and provides field state and callback functions to a render prop •FormSpy • Provides a way to read form state within your form without rerendering the entire form.
19. Live Coding Photo by Jonathan Romain on Unsplash
20. How to pick a library • Functionality • Extensibility • Examples • Well maintained • Code Coverage • Bundle Size • Does it make sense to you?
21. – 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.”
22. Thank you! ¡Muchas Gracias! @erikras @finalformjs https://final-form.org React Alicante 2018