Multiple Components & Swapping Instances

[00:00:00]
>> We talked about variants versus component sets, I already told you that it ends up getting fiddly. Reports from the field say that the UI drags to a crawl, as well, I believe that. And so, like I said, we can also use a slash or put them in a given frame.

[00:00:18]
And they'll all get organized, as well. This is a screenshot from when I did a bad thing, right? This is what happens if you take, and to be clear, I could have gone farther, right? I could add even more. This is around the time where I'm like, I can't do this anymore.

[00:00:35]
And that's when I switched to just kind of the strategy we're looking at now, right? Cuz, yeah, I would drag in a button. It would be that primary default non-hovered state, it was no way to live. Versus, as we saw, we can do this instead. Where we can just swap in between instances of a component and we'll see how this pattern becomes powerful in a little bit.

[00:01:00]
Okay, so we saw how to make a component set in this case. One of the things that we can do is play games with inheritance, right? If you think about it, that metaphor that I made to prototypal inheritance in JavaScript, really, really, really holds up, right? So, for instance, let's take, who thought they were gonna JavaScript pop quiz?

[00:01:30]
JavaScript pop quiz time. Arrays, they have methods, right? Map for each, right? Where do those methods live?
>> On the prototype.
>> Yep, on array.prototype. Should you ever do anything with a write up prototype other than just let it be the object in which all arrays inherit from?

[00:02:00]
Ideally, you do not touch it, right? It exists so that all of the arrays that you use in your JavaScript can inherit from it, effectively acts like a class, right? Like in Ruby, or Python, or what have you. We could take the same approach and basically have a platonic ideal of a button in which we should never use it, right?

[00:02:25]
And then all of our buttons inherit from that platonic ideal, right? And then if we ever need to change the radius, we just change that unused itself button, and they all will change as a result, right? So remember before when I change just the primary button and nothing happened to all the other ones?

[00:02:46]
Real quick, let's see what the strategy would look like in this case. Is this a button? Cuz at some points I got clever and tried to just make SVG so you can cheat, cool. So I've got a button here, as well. And I'll go and detach that, as well.

[00:03:04]
And so, the trick is, there's a few tricks here. Inside your file you can see these base components that you're never supposed to use, right? If you prefix it with an underscore or a period, like the Unix file system, or the way that we try to tell our coworkers this method is private, right?

[00:03:26]
You put an underscore before and hope nobody actually uses it, kinda thing. If you prefix a component with that and you publish this library to your team for everyone to use, anything prefixed with a period or an underscore will not go out into the world. So you can hide it from outside of the file that you're working in, but inside of the file you're still out of luck, right?

[00:03:47]
My strategy for this is to make the base component so unappealing that no one would think to use it. And then I will usually put all of them, and I didn't really make them unappealing in my version. But if I go down to the course materials here, All the base components are at least in their own frame.

[00:04:08]
So that they are, at least, separated out in that menu. Cuz if you put in a frame with a name, they all go into that sub-directory. So they're at least separated out, and a lot of times, honestly, I will use a picture of Bill Murray as the background or something along those lines to signify, don't drop this into the UI.

[00:04:27]
Not that there's anything wrong with Bill Murray, but it's not a blue button, right? And so to signify, but then when you publish it, it won't go out in that case. So in this case, we'll just give it some color that we don't plan on using. I don't know, I can even make it white or something along those lines.

[00:04:48]
But there's no purple buttons in my UI. Okay, cool, so this will be kind of our base button, in this case. The platonic ideal of a button. We'll call it Base/.Button, cool. I think you can just prefix the outer part and it'll still not publish. But I'm really trying to make the point that you should not use this button.

[00:05:18]
So now this can be made a component. And again, we never aspire to use this button. It exists in those same way object.prototype or array.prototype exists, to be the thing in which all other buttons inherit from, right? So now what we'll do is we'll create an instance of this component.

[00:05:38]
As I said, we weren't ever supposed to use it, well, except for once, there it is. And we'll make this look like a real button, that we want it to look like at this point. So we'll swap out, in this case, we'll make it a brand button, Like we did before.

[00:06:03]
And we can make the three variations, as well, if we want at this point. I think that serves as an example. And what I'll do in this case is we'll say, this one is State=Default. Actually, let's do that Here. Now, we'll start here and we'll make it better in a second.

[00:06:37]
State=Default, State=Hover. State=Active. Make this one just a little bit darker again. Let me give this one the drop shadow again. All right, now we can do the same thing we did before, we'll create the set and rename it Primary Button. Now, if you remember the last example, we tried to change the radius cuz that seemed like a fun thing to change.

[00:07:16]
And only the one that I changed, changed. All the rest of them did not update. And we can even, just to make a point here, we could theoretically take this group. Let's also say, Danger Button and Well let's actually describe the whole set here. We'll change all the light blue to this red and that red, right?

[00:07:51]
And now I can go ahead, we'll change the border radius to zero, and they all update, right? We never used this component except, again, as array prototype, object prototype, what have you, as the button in which all of the other buttons inherit from. But now we have the advantage, let's put this in a frame called Buttons.

[00:08:16]
And now in assets, we've got a lot of the same buttons here. Here's the two buttons that we made. I can bring an instance in, again, I can put this back if I want. In fact, let's make it 32. Let's go really round it. All the change, they all update.

[00:08:36]
This one is its own instance. And I can toggle to a hover state or an active state totally, right? And I can also swap it out, as well. And it will even stay in whatever state it was in at that point, too. So you get to both have a lot of the power of dragging stuff in.

[00:08:56]
They're all inherit from this base component that you never seek to use itself. But now you can make large-scale changes, as well.