Forms Don't Need to Suck

Rate this content
Bookmark

Why form-wide validation schemas are bad for developers and users - and how we can fix this!

This talk has been presented at React Advanced Conference 2021, check out the latest edition of this React Conference.

FAQ

GraphCDN is a company that specializes in edge caching for GraphQL endpoints, which helps in speeding up the performance of applications by caching queries at the network edge.

Andy Richardson is a software engineer currently working at GraphCDN. He has an interest in improving form experiences and has initiated a project called Fielder to innovate in this area.

Fielder is a project started by Andy Richardson aimed at improving form handling by allowing dynamic validation and progression without hoisting all logic to the top of the form, making form management more flexible and efficient.

Fielder differs by treating fields as first-class citizens within forms, allowing each field to have its own validation and progression logic. This contrasts with traditional methods where forms are managed as single entities, leading to cumbersome management of state and validations.

Fielder offers benefits such as immediate feedback on errors at the field level, dynamic progression through forms without predefined schemas, and simplified handling of branching logic in multi-step forms.

Yes, Fielder can be used with React Native. Although it requires some adjustments to handle platform-specific differences, especially in how form events and validations are managed.

While Fielder is stable for use in some projects, it is not recommended for production environments where forms dynamically add fields, due to issues with fields having the same name. However, it is being maintained and might be suitable for simpler use cases.

More information about Fielder can be found on its GitHub repository or its documentation site. Searching 'Fielder form library' online should lead you to the relevant links.

Andy Richardson
Andy Richardson
20 min
22 Oct, 2021

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Andy Richardson, a software engineer at GraphCDN, introduces Fielder, a project aimed at simplifying form creation in React. Fielder allows for decentralized form schema and onSubmit logic, making it easier to handle async validation. It eliminates the need for hoisting conditional logic and simplifies rendering and validation. The Fielder library is recommended for exploration but not yet stable for production. The speaker emphasizes the importance of being truthful and addresses the performance and re-rendering capabilities of Fielder.

1. Introduction to Forms and Fielder

Short description:

I'm Andy Richardson, a software engineer at GraphCDN. We specialize in edge caching on GraphQL endpoints. Check out chandyrichardson.com for more information.

♪♪ Damn, what an intro. Thanks, Yanni. Yeah, so like Yanni said, my name's Andy Richardson, I'm going to be talking about some forms today. I am a software engineer currently at GraphCDN. We do some pretty cool stuff with edge caching on GraphQL endpoints, so if you're into that kind of thing, definitely check it out. And yeah, you can find me online, so at chandyrichardson.com I'll probably pop up. Cool. My boss said that I didn't make a big enough statement about GraphCDN, so there you go, max. If you want to find out more as well, he actually did a talk earlier today, this morning, about GraphCDN and what we do, so definitely give that a peek.

2. Rethinking Form Design in React Development

Short description:

Forms should provide a simple, guided, responsive, and fast user experience. React currently handles forms differently, with forms as the primary focus instead of progressive fields. I started a project called Fielder to explore a solution where the form schema and onSubmit logic are not centralized. Let me show you the pieces and examples.

But without further ado, forms. So, first thing I want you to do is just think about a good form experience. So, we've all been on bad form experiences, very confusing all over the place. But when we think about good form experiences, we probably think about a simple journey, a guided experience, so we know where to go throughout the form. And also something that's responsive and fast to use.

I think the worst-case scenario is having to go back in a form because you've made a mistake early on. So, if we put that into an ideal flow, almost like a user journey, we're thinking about populating a field, getting told if you messed up, ideally, as soon as possible, and then some kind of progression. And a progression can be move into the next field, it can be the next page in the form if it's a multiple-page form, or it could be the final progression which is a submission.

And this is what it looks like currently in React when we make forms, which is very, very different. Rather than having these progressive fields which are the primary thing we think about, instead we have forms as the primary thing we think about, and we shove everything in a form early on. And it's kind of strange because that's not what we really do with React. Usually if we have things that happen over a series of pages or so on, we wouldn't put all that logic in one place, but with forms at the moment, we do.

So this got me thinking, is there a way that we can make a form where we don't need to put the schema all in one place? We don't need to put the onSubmit statement all in one place. And what if we do that dynamically as we're moving forward as a unit of users going through fields and so on? And, yeah, so that's exactly what I wanted to try. And a few, about a year and a half ago, I started a project called Fielder with the goal to try something like this. And I want to run you through the pieces and also show you some examples and see what you folks think.

QnA