So a question here that is, I think, in the context of an abstraction, like do you feel like abstraction should not be extended or would it be better to just extend it and see what happens until you end up with three to four functions and then change? So maybe I'm not totally understanding the question but my thought process normally, this is something that I really had to fight for, but as I'm working on some code before I've committed anything I'm just toying around with stuff, I am constantly thinking, oh, this looks a lot like this and so let's just put that in a function. And I really had to fight myself and say, no, no, no, no, don't do that yet. Just copy it, even if it's like five lines of code, like it seems so duplicate, just copy paste that because eventually you'll find out one of two things. You'll either find out that you didn't need it at all in the first place and so like taking the time to make the abstraction and create the variable names and the genericizing that function was a waste of time anyway or you find out that they weren't as similar as you thought they were. So yeah, I don't know if that answers the question because maybe I misunderstood it but that's just, yeah.
I'd like to follow up on that actually. So when you say that you realize that they're not as similar as you thought they were, do you have like an example? Because I feel like that's one of those things that it's easy to say in the abstract and hard to kind of put into concrete terms. So if somebody is thinking about this, like when's the case when like the same code, code that you've copy-pasted isn't as similar as we think it is.
Yeah, that's a great question. So an example of this that I just experienced recently and especially it's a React conference, so a React example, I had a login and a register button, very similar, just different words and different ARIA labels for the modal, they pop up different colors and stuff. And I thought, you know what? These are really similar. I could make a React component, just take a couple of props, but I've held off. And I found that if I were to make a component for this, there would be so many little props that are like, this is what the ARIA label should be, this is what the title of the modal should be, this is what the type of button it should be. And I just don't see that type of an abstraction being any simpler than the duplication that I have instead. It's like each one is six or seven lines of code. Now there is a little piece in there that the modal that it pops up has a little close button that is styled specifically for the login and register modals. And so all I did for that was I just extracted the CSS for it because there's no like variables or anything, not the CSS, but the JSX for it. So I just created a JSX element and then I in-lined that element as a variable. And so like I'm able to take that little piece of commonality without making it a whole function component that has like 12 props on it. And you know, that's a really interesting distinction too because in both cases, you're talking about code that would visually look the same. Like what shows up in the browser, it visually looks the same. It's a close button or it's a registration form, but the implementation is where the difference starts to come in. If you have to change every part of those attributes, you're not really writing an abstraction, you're just giving yourself chores.
Yeah, exactly. And then anytime you wanna make anything that like makes them slightly different, you have to add another argument, another prop, and it's just more homework for you. And at the end of the day, what you end up with is either copy pasted JSX that's just like two copies of almost the same thing or a function component that you're calling that is almost the same amount of lines of props. So like, what are you buying yourself there? Not much, just chores. Totally, totally. Okay, so another question just kind of following that. Is the cost of bad abstraction usually much worse than that of duplicating the code in tests and possibly duplicating bugs? What's your experience with that? That's a great question, and it's pretty nuanced because I don't want anybody coming away from my talk saying, oh, Kent likes duplication, he hates abstraction.
Comments