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
   

   View Slide

2. Thanks to our sponsors!
   

   View Slide

3. Forms
   

   View Slide

4. Forms are Hard
   

   View Slide

5. Form UI is different
   • Different input device
   • Rapid state change
   • Unidirectional data flow in React
   

   View Slide

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

   View Slide

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?
   

   View Slide

8. Forms are Hard
   
   

   View Slide

9. Redux-Form
   redux-form.com
   

   View Slide

10. Redux-Form Monthly Downloads
    

    View Slide

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

    View Slide

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

    View Slide

13. final-form.org
    @finalformjs
    

    View Slide

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
    

    View Slide

15. final-form.org
    @finalformjs
    

    View Slide

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
    

    View Slide

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)
    

    View Slide

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.
    

    View Slide

19. Live Coding
    Photo by Jonathan Romain on Unsplash
    

    View Slide

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

    View Slide

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.”
    

    View Slide

22. Thank you!
    ¡Muchas Gracias!
    @erikras
    @finalformjs
    https://final-form.org
    
    React Alicante 2018
    

    View Slide