Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

7e86f7e41168df55b65e30cdda423e10?s=128

Erik Rasmussen

September 14, 2018
Tweet

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