React Native EU 2019: Jared Palmer - Forms In React Native

hey everybody how y'all doing today so thank you for the intro so my name is Jarret Palmer I am the lead engineer of the Palmer group we are a strategy design and engineering for a firm based in New York City so but today I want to talk about oops what sit here don't talk about forms and react native so this is me this is my company and this is my podcast it's with Ken wheeler so if you want to listen to us drink and talk about JavaScript and stuff give us a listen undefined on FM so I mentioned I work in an agency and in doing all of our client work I'm a firm believer in the open source movement and so I often times open sourced some of our tools whenever possible so this is the current open source portfolio razzle is a build system after Jas is like an XJS sort of clone but built with react router back packs it built is for nodejs TS DX is great for building types tree packages like create react app but for typescript packages but the granddaddy of them all is formic which is a utility library that makes it really really easy to build forms and react and today I want to talk about sort of that story and where we are and where we're going with formic forms are really hard and reacts really good at a lot of things but forms are not one of them how many people here write a form every day let's see okay couple maybe not all right well they're pretty hard on in react Dom and they're also really really hard and react native kind of what Mike had mentioned you have to manage all of these things and react doesn't tell you how to really do it right this is like the documentation for forms updated for react hooks this is it this is like the whole thing right you get some you have some state you have some sort of handler and you get a text input and you pass this handler to unchanged text and you pass the value to the text input and this is a this is for a controlled form they're controlled text input but like more fundamentally if we step back why are forms so hard in react and the answer is that this is pretty much what react does out of the box and you are left to deal with wiring up form state because you have state you know in maybe it's a night reducer maybe it's in reductions in mob x maybe it's in wherever it is but you got to get it into the input somehow right you have to validate this stuff cuz you're gonna want to have error messages right like you can't trust the user for literally anything so you got a validate it you got to show them our error messages you got a test that all this works all this business logic and really forms are at the heart of your applications business logic right like that's where things cannot go wrong and then last but not least as your application grows regardless of its platform you're gonna have more and more forms most likely and maybe if you're game maybe you won't but just staying organized and doing things the same way building reusable components and sharing those across your forms attacking this problem of forms in the same manner each and every time is pretty useful right especially when you're working on large teams so I want to face with these issues roll back the clock to 2017 I was building a really large administrative dashboard and for a client and this was the current state of react Redux everywhere literally as everything was Redux and Redux form was the most popular place to put all this stuff right just put it all globe make everything global and Rios former's was cool and it was it was a service purpose and but it really but I was sort of on the grunt group of people that kind of left Redux early started moving to just plain ole react we're gonna get into that in a second and I was reading through Stack Overflow one day and I was sort of deciding and I asked Airbnb what they use and they use Redux form but this new app that I was starting on this new dashboard I didn't really want to use Redux for and there really wasn't a form solution out there plus I had this like inkling that forum states not really a global thing the rest your application just doesn't need to know about it so perusing Stack Overflow and I found this quote from down Dan Abramov which if you look inside our votes forum state is local and ephemeral and so that got me thinking like okay how hard is this to do realist we just we all of these conventions like you name things like handle change this and I'll change that handle submit right like these there are these conventions that had sort of that a party existed and there just wasn't an ephemeral version of it all of these for management libraries were linked to either something like mob X or read up so enter formic I had this itch and I scratched it so I built this it started with a higher-order component and then it became a render prop and now it will show off some hooks in a little bit but I had some specific goals with formic that are really important that our prop perhaps different from other libraries so I wasn't interested in schema based forms those are forms where you use like a JSON schema or something you defined every single field a one sort of a configuration based approach I wasn't interested in that I wanted to use react I also wanted to get in the way I phrased as I like to give back render control all I was concerned about was form logic I don't want to style inputs with this solution I also don't care about a lot of use cases I was building this again this administrative dashboard I didn't care about every single edge case I just wanted to solve for mostly every form and I wanted the solution to pretty much do everything out of the box I didn't want to install like six different libraries to get to work I just wanted it and I wasn't so sure about it at first to be honest it was one of those things where me so I need it to be incrementally adoptable and what's awesome about not using or just using react and get to that in a second is that makes stuff really easy and the last part is I really wanted to wanted this to like not have any magic no crazy JavaScript I wanted to be super easy but debug and understand I just really wanted to use react so beautiful things happen when you just use react so if you ditch your external state management if you don't use like it subscriptions or observables if you don't reinvent the wheel if you just stick to the framework it turns out that you get components that are really easy to use they're easy to understand they're easy to debug optimize and most of all they're easy to delete I wasn't so sure about this forming thing which we'll show you in a second and so I wanted to make the API like pretty similar to set state so have set feel then will show up each other soften a little bit and set values they'll start with set so I could easily search replace and then ultimately delete them if this thing didn't work out that I was building but that was super important because incremental adoption an incremental deletion I'll call it allowed formic to just explode in popularity and so since that's released in 2017 6.5 million NPM downloads or 2 million downloads a month 17,000 stars on github and downloads are up 5x year-over-year users a format concluded like Airbnb Walmart lyft etc yada yada yada but I told you all this stuff but now it's time to show you how it all works and sort of expose the pain that way and I think they want to really I really want you remember in this demo is the awesome benefits of just using react so let's jump into the demo I'm gonna escape this yeah I'm gonna mirror displays oops no I don't want to deploy to now although that would be pretty cool okay so we react native so I built this little app we're gonna do this demo is to demonstrate the pain points of what react does and doesn't do for you and react native and then we're gonna build formic together as a as a demo and by that you'll have a deeper deeper understanding of how it works and how if you want to go do this yourself you probably would end up with the same thing I don't know we'll see so we have this like sign-up form which is the most basic form right you have this name email password and let's just look through this code so we're gonna use hooks in this demo because hooks are all the rage so name set name you state we see okay zoom in a little bit can we see yours i zoom in let me call out zoom an okay let's close this unable to write to user settings that's not good Oh forgetting that all right now hey there you go cool all right better more MORE I'm not gonna be able to see but we're gonna be fine okay cool so we have little onboarding screen right the first the first screening our app little form so it works you've name and I enter in the name I made this little debugger component you can sign it see the values okay but and I followed the direction that I gave before right I just did I made these handlers one for each input which is super annoying right that sucks and it'll change name text that name text it'll change email said evil text yeah on on on I have this submit handler which I'm gonna press past you a button down low ignore stuff that's just with that and I have some view I have text input I'm using react native paper so shout out to call stack who react native paper is pretty cool so they have a text input I passed on change text their ID may be passed value to name right and I put value here for email and now we're wired up right and keep going and we'll do password to value password okay so now they're actually hooked up and to react and we have controlled three controlled inputs pretty cool so what's not being done here right there's no validation happening all right I can enter in whatever and I made a little thing it's gonna and that's not a valid email right so now I have to deal with ala Dacian but like when do i coordinate validation okay like we keep going and had all this stuff into this and again this would expand enormously right taking care of validation and error messages and then logic is to when this display those error messages saving maybe you want to autosave something I don't know a lot of all host of stuff you're enough to do right plus all your inputs and styles and then if you're gonna just do this in I'll react on your next forum maybe listen say it so we have like a edit profile form you're gonna do the same thing so what if we started just abstracting this away right what if we had one change handler that we could just reuse what if we just had a single thing we could pass all of our values to initialize our form and so what I want to do right now is I want to build like use formic basically and the way we would get get that done is pretty cool so we're gonna make a hook a custom hook and it's gonna take some props whatever want to call them clumps and what if we just kept all of our values in a little variable called values and we made a set values react use state and what if we passed this hook something called initial values props dot initial values or maybe just like an empty object and I would solve our problem there and then what if we made a handle change function that we're gonna curry will have well it'll take a name and then it's going to return a function that's going to return like a change Handler that'll take text this will just clean up the API a little bit and what this is gonna do is it's gonna call set values and we're gonna use the updater version of values because it's gonna depend on previous state I'm not gonna call values you're gonna call this préval use and we'll spread that Previn because they ruins that state for us we'll use an es6 computed property it'll call this name and we'll set its value to text wild we haven't done anything yet now this hook needs to return something right let's just have it returned for now return can't type today it better if I did values set values and handle change and all we're doing here is just make taking away this top all this stuff is gonna go away right now right we can delete all this hopefully and we'll just call our new hook and it's gonna return that algebra call formic use formic and it's gonna again it's going to take initial values and our initial values are gonna be what they were before email not key mail email empty string get an order name B string email password of course I'm not gonna spell that right password right in return this thing for McCann inside a formic is gonna be what's up here and now let's wire it up so let's just call stuff or Mac so you see what's there for a second and so instead of handle change name remember we have that curried function handle change and we're gonna pass it the name that we want it to be something called name and its value is now gonna be Samia from the formics so I'll call formic then I handle change here and its value now for a text input there's gonna be values name for McDowell use that name same same here like a typing test no typescript unfortunate email or Mac values email and let's be lazy password okay so now we've wired up hopefully look at that we've moved all of the stuff into values and it updates pretty sweet so we can keep going right like let's add handles submit maybe right and this is gonna take this is just gonna be an empty function right and it's gonna be there's not any arguments Hanul submit is just going to maybe call like if props I'll just call it props dot on submit and you're gonna pass that values values right but we want to like validate right we haven't talked about validate yourself to handle that so we're gonna make a note that like got to do some stuff first right do stuff first like validate but that would work so let's grab our little handle press sign up here and let's pass this guy to on submit and replace all that here and like in a real app maybe you mean it real app maybe you'd like to save to acing storage or do whatever I don't know then you navigate into the thing can't find very low hand press sign up right because now we want format dot on submit now we're gonna call it handle submit for symmetry at the top here in formic will call this will pass it down handle submit you can make this a sink if we really want to I'm gonna return it it could be useful later okay so now I press sign up we submit so now we have like this thing that's reading use format that's super useful we can just port this all over the place and we can keep going with this and I did that so we can jump ahead or we can keep going but basically what you'd want to implement and I'll just type it out here and then show it to you you'd implement implement handle blur and that's gonna be a new track which fields were visited you'd implement validation so maybe you pass in some function here call validate that would be run on every change and allow you to validate easily and we can sort of show you what that all looks like so in my use formas final here it's going to copy pasta here skipping ahead so we had a rope you gotta get so skipping ahead so use formic what if we like we could keep chakra fields we could like register which fields or mount or mounted or what feel and when they're no longer mounted and that's super useful for focus management again values set values errors set errors and all these are just objects that we're gonna keep track of but the symmetry is that we're gonna use the name of each field to sort of key the different parts of state so if you look at the state you'll see values email and you'll see it'll be values name values that password similarly will model it as errors email an errors name and errors dot password that symmetry is super easy when you're going to debug stuff because you know where your errors are for a given field or your touch status or given field and where your values are for a given field so yeah so this is the handle change values same same hand handle blur we call this touched and then we could keep passing all this stuff down like this I did it before but we could also build sort of a Kent C Dodds inspire inspired getter function where you could do something where you have a text input right and you just call this function and you spread get field props and it returns all the props that are required for this input to flourish and be awesome and be wired into formic and so you see here that by building this is what the final like use format call looks like you see initial values on submit you could have like your own validation function and so our little form helper is doing a lot of great stuff and I urge you to take a look at the source code that I went at when I posted of this sort of like mini formic but it does some really awesome stuff but more awesome stuff is done in the real formic so let's now copypasta two real formic final here and so in real formic and announcing today is the announcement of formic native which is a new flate build of formic that's specially purposed for react native that's gonna do new stuff than their different stuff and let's say just the normal react on does what formic native is gonna do for you differently than react Thomas is gonna manage the focus States one of the super annoying things about react native forms is if you want your input to switch to the next input you need to wire up all these refs how many people have done this how annoying is it it's the worst thing in the world right it's too horrendous sure even if you use formic right now you have to make a ref for every single input and then on submit editing you pass you like call like focus right well disgusting fixed I got you so in the new formic native you can do this let's see if I can put the keyboard up hardware keyboard toggle software keyboard okay watch this the new formic native if I just do boop doop next hey that's pretty tight right yeah and then it next again it'll just focus that no keyboard touching so all you get to do is call set focus that's the API for right now and what's super awesome at formic is its complete form of native and formic to four as well as completely backwards compatible one of the downsides to hooks and is that it you can't really use context or you can't set a context provider with just a hook on its own so that's why we still need this format component because as fun our use formic function was that we wrote together as your code based scales passing or prop drilling passing props down gets more and more annoying and so formic is a has a context only API and that enables in that if you're gonna use that which is the way it's sort of designed you want to render this like import big format capital F component and it's that but it's got the same thing as the use formic API which is just pure state so this is gonna render a context provider but initial values remember that on submit remember that and then form it if you've never used it before has this you can pass in a custom validation function on your own but even better there's this awesome library called yup and yup is all has this API that's like Pappy or joy sorry happy J s is joy a validation library and it's got a builder pattern like prop types she basically can specify your validation really quickly almost in this prop type like syntax and so cuz I love this so much formic is a special prop called validation schema which lets you write stuff like this yep dot object and name you up string required and you just literally could pass in the the error message right there formic will then run this against your forms values and you don't have to think about when it runs and then you can only see this required thing email so let's change this to like whatever right so now if I hit tab like there you go it just they are boom and what's super sweet about this is it's gonna match the shape of your object you don't have to use it totally opt-in I like it so let's talk about some of the new hooks that form it and format native form a two informant native give you back so one of the cool things that formic native does is it has helpers for text field select picker all your format all your react native inputs that you probably ever use and so if we're gonna create a custom input which you're probably gonna do on your on it and any in any application that looks like this let's walk through this code we're gonna import use text field from formic and we're gonna call that or pass it a label it needs like a name write the sort of the name we talked about and you're gonna get back this a tuple of field and some metadata about the field to get this read styling here you'll see we just need to pass text input a boolean like if it has an error or not and then we're using react native papers help text helper text and that's displaying this little red guy right there and so really easily you can build out awesome number of primitives for your to reuse and share across your entire app on any form and you'll need to prop drill right so if I make what's nice about using context which way you use text field does is you can make changes to this in this input and no matter where you use it your entire application you can make these changes right you don't need to worry about passing in different props which is great so that's what my text input looks like and then again to call it we just render it out and it's basically is spreading all these props so it's a react native paper input so no matter what your library is one of the power one of the best design principles of for make is that it doesn't care how you render stuff right it's just concerned with logic so whether or not this is react native paper your own component library or the raw react native inputs it doesn't really matter it's all wired up the same way so just to give you a glimpse of the rest of form state here so real formic keeps track of all of this stuff for you so values and errors and touched is submitting is validating the number of submits initial errors initial touched whether the form is valid you can what what fields currently focused all that jazz so let's see here so when you go back to you our keynote deck and I want to turn off meeting so to summarize what's coming with formic native you'll be able to use text input these new hooks are coming use picker you switch use slider focus management it's also written in typescript so you get perfect react type script types whoo-hoo typescript I would have saved me some typos formics never been in a better place it's now the most popular forum library in the world and that's pretty cool I tried to do the math on this and it's something like I don't know if you add up all the users of formic reported users or forma can you add up their monthly active users it's like a lot of people touch a format forum every month which is wild so what's an ISO so now I just want to show off what is talked about our roadmap for formic so next week I'm hoping to formally launch formic 2 which has got the hooks of use field use field array we can get into field array but it's it lets you build a race quickly sometime in September will launch formic native October a special surprise and then we're gonna rewrite the whole thing again how many people here have heard of react Flair whew okay so reacts reinventing the event system and upgrading it from 2015 when they last wrote it which is great for us react native folks because there'll be some unified API is between web and react native for the event system and there are some new tools with react Flair if you go to the react repo you can check out react Flair orderly called react react events is the folder and just start reading and start getting confused uh-huh but no it's gonna be great and but to be grateful for Mike just in a boost performance and so just a touch here about the last few things when you just use react there are so many benefits you get out of the box a lot of formics comes with a fact that if you just think about if you've got if you got an issue oftentimes I just say like how would you do this with react and then the person will figure it out and what's great too is when stuff like flare comes or even with suspense or concurrent mode when react gets better your library is going to get better or faster or you know whatever the superlative is so keeping things simple keeping things that within the framework is pretty sweet you can't do it for everything but it's a good place to start and then the last bit that I like to share with you is sort of like lessons learned part of all this searches I think one of the formics greatest strengths has been its focused on just the 80% use case if I tried to solve or we tried to solve every single edge case it actually would lose some of its flexibility and it would lose a lot of its understandability so if you're open sourcing stuff or building stuff internally for your co-workers intuition is important keeping your API footprints consistent is important and again just solve for 80% of your problems and then the rest are gonna be snowflakes anyway and so and also try to open-source it if you can you beast I was pleasantly surprised with how many people also thought forms were a pain and I cannot I can't even imagine life without formic now because it's just it's such a useful tool to my team and so hopefully you find it useful but if you don't that's okay too and that's sort of the beauty of open source if you just open source you just scratch your own itch you know take some stuff that's out there for sure but you're scratching your own itch can open can let you discover and make you a better developer and discover new ways to solve problems and then sharing that with the rest of us is is one of the greatest things you can do and one of the most fulfilling things that I think anybody can do so with that if you want to check out the newest stuff npm install formic at next formic dev is the website my name is Jared Palmer thank you so much thank you call stack thank you for inviting me here you guys are awesome [Applause]

Channel: Callstack Engineers

Views: 6,430

Keywords:

Id: C1dHjIFjl6k

Length: 30min 27sec (1827 seconds)

Published: Fri Oct 04 2019