Signed Reservation Template for Gala Made Easy

Signed reservation template for gala

so I'm gonna be talking to you today about flexible react I've already been introduced but if you want to follow me on twitter my handle is girl code and that's also where I will post these slides after the talk so has mentioned I really do love react I am a die-hard fan of it it's really the first JavaScript framework that really aligned with how I want to build components so when I thought of this talk and what I wanted to share about flexible react components what I've learned over four plus years of writing react I knew the technical part of this talk really really well so that's the how but what I was forced to articulate was the why and that's you know why I made the choices that I did you know I need to a certain degree but I hadn't sat down and actually like written it out before so to start I want us to think about what flexible means in terms of UI I find that often this gets compared to being reusable so they're comparative so let's go through a little exercise about this whether flexible means reusable so let's pretend that we have a UI component and it doesn't matter what it is at this point so I'm just going to represent it with a block so we have our block four corners four sides we're doing really well here so when we get a new design that uses that same UI element we feel pretty good because we've already built this component and we can reuse it so like these all have different colors but that's just a matter of passing it a different class name that's fine they all share the same structure and behavior except they don't you get handed a design with a little bit something different for that last one like sometimes it's got a tooltip okay so what we'll do is we'll add a tooltip prop and then that will take care of that okay we're still okay I don't know so now we've got another mock with a different thing and now the UI is changed a little bit so it could have a dot in there okay that's that's fine we'll just add another prop and this is taken care of oh no like again we get this element with a new behavior so now it might have ammo okay we'll add a with modal prop I mean that's just three and we're still kind of okay here but then like let's imagine that we stopped working on this component and our co-workers instead are working on this component like they see some other designs they need to make some changes I mean this is already built so why rebuild it again when we could just add a prop and maybe augment this a little bit oh and like don't forget we want to do some like a be testing so we're gonna add some stuff in for there like it's all temporary like don't worry we think it's the aprox collapse so our simple block component is now completely like overrun with props so like what now is this component flexible I mean nothing's changed about its reusability it's still handling multiple UI states based on what props you provide but I'd argue that this isn't a flexible component and that our idea of reuse can sometimes blind us to better more flexible patterns so I've dealt with a component like this before I would guess that actually most of us have blessings upon you if you have not the example I use about the block component is identical to a component we already have at my work so I work at a company called class pass and when I joined we already had this component so if you don't know what class pass is and I expect you not to because we're not in Europe yet we are a flexible fitness membership so we allow you to sign up with us and then you go and reserve classes at Jim's yoga studios Pilates things like that nearby so most of our UI is comprised of class schedules so you would see a yoga class and then you would see this element called the CTA the scheduled call to action I'm just going to keep referring to it as the CTA from now on and that's that little button to the side and that lets you interact with the schedule so maybe you want to reserve a class or you need to cancel a class that you already reserved that's when you're going to interact with the CTA it's one of our key components it's next to every single schedule on the site but it's also a surprisingly complex component so I'm only showing three states up here but it actually has five so if you're viewing schedules as a logged out user you're gonna see a join message prompting you to sign up if you're logged in you're gonna see one of three different messages how many credits the cut the class will cost to reserve a canceled message if you've already reserved the class or a grayed out disabled State if you're unable to reserve the class so if you have a class at the same time we won't allow you to do that and then if you've previously had a class past membership but you cancelled it you're gonna see a prompt to reactivate your membership it also has three different behaviors so it might open a modal it might link to another page or it might show a tooltip and then to correctly determine which CTA I need to show this is all the information that I need to know so is the user logged in yes or no what's the state of the user's subscription what's the state of the class I need all of this information just to show you this one button and as I mentioned when I joined class pass this already existed someone had already written it I first encountered it when I needed to implement it on a new page and you can see as I scroll down that this is really long for just a button we have you know a switch statement if else is in there functional components it's pretty crazy and the history of this component is actually identical to the block component that I showed before it started off as a very simple component it's a button that you clicked to reserve a class and then from there more intricacies were laid on top of it so it needs to show a tooltip it needs to open a modal it needs to have different messaging depending on your state and we did add in like a bunch of a be testing too great so by the time that I needed to implement this component it required 14 props 14 props like no matter the use case you need to pass in 14 props for this component to work and like god help you if you forgot one of them or if you needed to change the component in any sort of way I mean I couldn't figure out what was going on with this thing so is this component flexible the thing is you can write reusable components that are inflexible reusable doesn't equal flexible yes the schedule CTA is reusable but what happens when it needs to change which prop can you safely take away which prop is needed for what UI state these questions are actually really difficult to answer because the component itself is really difficult to understand and if you can't understand it and you can't modify it is it flexible I would argue that flexibility is about more than reusability it's about the ability to understand and augment to me that's true flexibility I don't care if your component used in one place in the application if I can understand it and change it with ease that's a flexible component the opposite unable to be understood unable to be modified those qualities make a component inherently inflexible but now I need to stop talking about what I mean and I need to show you what I mean so we're going to refactor the schedule CTA and we're gonna start with hands-down the best starting point for either writing a new component or refactoring one we're going to write down our ideal API so react is declarative and this is awesome because we can start from a point of not how we're going to create this component but what we want it to look like this is a really important part of building truly flexible components often we focus on how we'll make a component reusable when we should be starting with what it should look like and then let that inform how we implement it for example the schedules UTA if we focus on how we're going to render different CTAs all in this one component it can lead us down the path we've already been if-else statements a switch statement and that's imperative not declarative so let's focus on what we want it to look like our ideal API is one prop the type that's the entire job of this component I give it a type and it gives me back the appropriate CTA and this is a significant change for this component and I don't mean in terms of how many props are being passed in we've made a fundamental change in the structure of this component because we pulled the logic out of it so previously the scheduled CTA needed those 14 props to run some internal logic and then tell you what the CTA should be but now we've taken that render logic out putting business logic in your components it is a very bad idea for some very good reasons if you add business logic to a component you've locked that component it can't be reused with a different set of rules which means you need to understand the logic to use the component or to change the component and if you want to change the component the logic in it you'll probably need to add more props so by removing the business logic from our components we're going to gain flexibility we can understand and we can augment with much more ease we can also reuse the component with different logic so since our ideal API removes the need for the embedded logic we can pull it out into a separate function and we no longer need the 14 props props clips avoided plus we benefit from centralizing our logic which is easier to reason about and we can test our component separately from our logic now I know sometimes it's really nice to have a drop-in component that just does something you know a little bit of magic is really great but you know I want you to think about the level of magic that you're aiming for we all know how certain card tricks work or how the rabbit in the Hat works it's in the Hat but like other tricks are much harder to figure out and so when you're thinking about your components and how you want to write them please think about the level of magic because it makes it harder for the engineer to augment the component later so for the schedule CTA since it's very vital to the site it's everywhere on our site it's the way our users actually interact with all of our schedules I want this to have very low magic and that's part of why I chose this API I want to give the engineer who uses this some clarity about what's going on give it a type get back a CTA but I also wanted a simpler API I'm aiming for engineers to use this component I want them to be able to safely navigate it and I want to not be kicking myself for code that I won't be able to understand after a few months of not looking at it so now we have to decide what to do with the actual individual CTAs themselves we built this gala drill CT API now let's decide how we are gonna structure our CTAs themselves and we've got a couple of options here so option one we're going to use a base CTA to change out the messaging and props based on the type of CTA and then option two we're going to write each CTA type as a separate component so it would have a reserved CTA or cancel CTA if you're leaning towards option one you might be thinking that since all the CTA's look similar you could get some reuse out of a base component less duplication of code one place to edit things and this all sounds good but each of these CTAs needs to be modified depending on the type so for example the join CTA is a link but the reserved CTA is actually about an element so are we heading down the same path of another aprox collapse trying to reuse one component for all of these if you're leaning towards option two you might be thinking that since the CTS don't all share the same UI or same behavior it makes sense to break them into separate components you'll know where to make changes and you can isolate behavior to a particular CTA but you'll see some duplication of code so you might need to update each component at some point and that is a pain I don't think there's actually a right answer or wrong answer here I just think there's options with upsides and downsides so ultimately what I chose to do was to combine them into an option three I want a base component that handles some of the common UI behavior but I want to break the CTA's out into their own components where I could specify some behavior so this is the base CTA component I want it to be really lightweight because its main job is to encapsulate the parts that might change more frequently so something like the class name and I also need it to not interfere between the differences between components so like the fact that like some of the CTA's are buttons but others are links via react router and others are actually eight tags so I'm going to take advantage of defaults in es6 here and I'm going to assign the button as the tag but any specific CTAs that need a link or an a tag can override that and I like this because we get to encapsulate the most commonly used tag type and then we can override it and it's going to be very clear in the CTA's that override it because we have to pass along a very specific prop for this I'm also going to rely on the children prop to render the different CTA messages so children is super useful for you need a generic container to take in more specific child elements so a very quick example of this is the bread component so this is our generic container you're seeing I'm passing in this dot props so whatever you put inside the bread can be different so that's just a nice way of thinking about children so as an alternative to the children prop we could have just passed in a message prop so the message probably be like join reserve disable but I find that less useful in this type of component one thing is that we use react international so for these various messages I'd be passing in a component and not a string and when you're doing something like that passing in a component via a prop I'd urge you to consider using children instead it's a more flexible declarative option you can change the children components the internals of the container without needing to change the container itself for our uses in the schedule CTA we only need to know that whatever we wrap the base CTA around will be available as the children prop so here I'm wrapping a formatted message component from rack international to show the credits it cost to reserve the class so we're taking a generic component the base CTA and giving it very specific children as well as specific props like the button primary class name and I can also make sure I have specific behavior so the disabled CTA doesn't do anything when a user clicks on it so I can ensure that an onclick handler even if accidentally passed into this component never gets called as an engineer this is great because I can specify behavior per component so when the join CTA needs special analytics tracking I can do that without touching any of the other CTAs and since the reserved CTA needs to open a modal I can do that and I don't need to worry about accidentally introducing a change to another CTA and I can test each of these individuals UTA for Miss Blake specific behavior to them and changes to a CTA component are isolated to that component and we've also added some flexibility that wasn't there before so we can use the CTA's alone now so this is our upcoming classes page and since the user has already reserved these classes all we want to show is the cancel CTA we don't want to use the scheduled CTA component here and pass in different things it's only ever going to be the cancel CTA and previously with the old scheduled CTA we couldn't actually do this in fact someone wrote a completely new cancel CTA just for this page but now because we have these lovely separate CTAs I can just put the cancel CTA on this page okay so now we have our base CTA which is used to create individual CTA components but we also have to go back to the scheduled CTA because it's not complete yet we're giving it a type and we have individual CTAs but we need to figure out how the scheduled CTA knows which CTA to return now we could use a switch statement inside the scheduled CTA I mean that's that's valid but looking at our ideal API I think I see a better option so we give the scheduled CTA type and it gives us back a CTA and this reminds me a lot of requesting a key from an object so let's use that pattern we'll create an object with keys and values that correspond to the type and its component now we'll use the type prop to grab the correct component to render if you're wondering why I'm assigning this component this to a component with a capital C react allows you to dynamically render components but the component needs to be capitalized and that allows react to tell the difference between something like a div or a span tag and a user-defined component like our CTAs and dynamic component names are really nice method for cutting down on switch and if-else statements in your component so here I'm deciding between a left and right sidebar using a six string template and then here I'm deciding if I need to wrap the card in the content in a card or not these are just nice little examples and then this is actually our scheduled CTA after our refactor so it's much smaller there's no scrolling as you can see so it expects a type prop if that isn't provided we're going to return null and then we're going to grab the correct component and assign it to a dynamic component name and then we're going to pass our remaining props to that component now we only had one prop on the scheduled CTA the type so what are these other props that we might pass in well I kept calling it the ideal API because at some point it's going to change we're going to need to provide some more props to it at some point like for example we we want to add in a class name so engineers can customize the styling so you always start with the ideal API and then as you build it out you're going to find what's the more realistic API like the things you actually do need to pass in besides that so this is the realistic one this was after I was done so we've gone from 14 props to four most of the scheduled CTA all the CTA's like they need the schedule information pretty much all of them do and then I chose to pull like the tooltip out of the component so it doesn't handle the logic for the tooltip either so then after this refactor we can use whatever logic we want we can use individual CTAs alone and we can add and remove the CTA's with much more ease because it's just that object now so you literally will just take it away from the object and it won't be on the site anymore so was all of this work worth it this is everything that happened since I rebuilt the CTA so we added and removed a be tests we decide not to show the disabled CT on some pages so it needed a little bit of different logic the class names actually changed we went through a rebranding the messaging changed for the reserve CTA and there was like a very specific ask for the join CT on a specific page and I couldn't do really any of this before very easily all of this became so much simpler after this refactor so it was absolutely worth the time so we've finished the scheduled CTA now but I want to keep going I want to work on a nicer option for all of this business logic that we pulled out in the first part of our refactor like right now it's all in a function so if I want to use this with the scheduled CTA component I need to import it separately and that's low magic but high annoyance and I want the right level of magic so to do this I'm going to show you one of my favorite react patterns the render props pattern it's also known as children as a function so I spoke about the children prop earlier and while that can be child components it can also be honestly anything an object an array a string a number so what if it was a function we could do something like this and don't panic if this isn't immediately clear to you I think the first time I saw this pattern I really didn't know what was going on and then once I figured it out I fell in love so what's happening here this is a function that we pass as the children to get scheduled CTA it's going to expect a type it's going to pass that type to the scheduled CTA inside of get scheduled CTA we're using that function to get the type and then we're going to call the children function that was provided to us passing in the type and that's how the render props pattern works you pass in a function as the children and that prop is called with the information that it needs this is a really powerful pattern you can separate out the logic that the component that handles the logic from the actual rendering of the UI with render props you delegate the rendering to the child function it can return whatever UI it wants to based on the information it receives so for the scheduled CTA this is a nice option to create declarative logic around the component and I can export the scheduled CTA wrapped in its logic which avoids the need to import a separate function render props isn't a new pattern but it's gained a lot of traction recently in fact even though it's been used in libraries like react motion and react international for quite a while it now has official docks at react.js org so if you want to read those please do they're very informative and then if you want to play around with the full potential of the render props pattern I recommend the downshift library it's by Kent C Dodds it's an autocomplete component definitely check it out but of course I want to caution that render props is one tool in the toolbox I'm often guilty of seeing a pattern like this and then wanting to apply it to everything which brings me to the part of the talk that I really hadn't expected to write I thought this talk would be mostly technical but in some cases the why of building flexible UI isn't tied to the technical it's about how you approach code as an engineer and how that impacts what you write so I have this ongoing joke with a friend of mine he loves lifting things and I know that sounds very weird but he lifts weights as a hobby like very heavy weights and he loves lifting anything heavy like he'll just go up to something heavy and pick it up for fun it's very weird so one day I joked that it would be really easy to trap him somewhere like if I just put like a heavy dumbbell somewhere like he's gonna instinctively go for and I could just throw a net on him like I could catch him so easily like amazingly easily it's really important to know your traps I told him this I was like you have to know your traps like if you see a dumbbell on the sidewalk like that's a trap for you like it's not just there like someone's trying to trap you so like what if placed on the sidewalk in front of you would you like instinctively go for and someone could just throw net on you and the more like I did this joke with him the more I realized it was part of also becoming a really flexible engineer you need to know your traps as an engineer do you like me want to use new patterns right away instead of waiting for the better use case do you love one particular pattern and keep reusing it or do you have a tendency to stay stagnant and not learn new patterns all of these are traps and all of these will keep you from writing better components and once you've written those components are you willing to kill them so I come from actually a background of creative writing I taught myself engineering like eight or nine years ago and kill your darlings is a very popular saying in the creative writing compute community what it means is if you've written a story and there's a character that you really liked or a line in your poem that you really liked or just even a word that you really wanted in your story but overall it's not working for the entire piece of work you need to kill it you may be very attached to it and I feel like a lot of the time that I write code I am very attached to what I built but I also need to be you know careful that I can kill it when I need to so the schedule CTA even though I've refactored it at some point it may not work for this anymore and I have to be willing to kill it or let someone else kill it so to summarize everything in this talk start with your ideal API and let that IEP I inform the component design decide what level of magic you want keep business logic out of your components render props is an awesome pattern definitely use it but remember that being flexible as an engineer is really important as well know your traps kill your darlings thank you [Applause] you