$30 off During Our Annual Pro Sale. View Details »

Next Generation Forms with 🏁 React Final Form

Next Generation Forms with 🏁 React Final Form

Presented at React Alicante 2018.

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

Erik Rasmussen

September 14, 2018
Tweet

More Decks by Erik Rasmussen

Other Decks in Programming

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