6 Levels of Reusability

Hey, my name is Michael Thiessen and today I'm going to be talking to you about reusable components. So if you don't know who I am, I'm going to give you just a little bit about myself before we get into this. I am a full time Vue educator, so that means that I spend all of my time writing articles, sending out my weekly newsletter, creating courses, and of course, giving talks just like this.

So today we're going to talk about reusable components. And the entire reason that we want to do this is so that we can write less code but get more done. We want to make our code more effective. We want to use our time more effectively. So we don't want to spend all of this time rewriting features and rewriting them over and over again. And so this talk is more focused on that aspect. The reusability of our code.

Some people often ask me about the difference between reusable components and clean components because I have another course called Clean Components Toolkit. And so they often ask what is the difference between these two things? And the difference is really about maintainability versus reusability. So clean components are more about long term maintainability, whereas reusable components are more about being more effective, being more efficient with our time, writing less code, and getting more done. Over the past few years, I have put together this framework for thinking about reusability so that we can better figure out exactly what amount of reusability we should add to our components. Because we don't want to add tons and tons of reusability to very simple one-off components. And we also want to make sure that we are adding the appropriate level of reusability to those components that we know we're going to use over and over and over again.

So the first level is templating. Then we have configuration, adaptability, inversion, which is perhaps my favorite one. We have extension. We also have nesting. So these first three levels are a little bit easier to understand and simpler. And they also don't give us as much power and flexibility as the later three. So we're going to focus our time on the last three, although we will go and cover these first three just so that we have the context because we need to build up into those last few levels of reusability.

So level one is templating. What we have here is that we want to reuse the different parts of our template. This is exactly what you're used to with building components and encapsulating different bits of UI and markup and logic inside of your components so that we can drop them in different places around our application and reuse them. This is pretty straightforward and not a lot to say about this one. Although of course there are a lot of nuances in how do we split these different components up? Where do we put the boundaries? Should we make a new component or not? And so we don't really have time to go into those nuances in depth in this talk, but those are there. The next level is configuration. And in this level we're going to create different variations of a single component, different variations in the behavior of that component.

We're going to do this by using props. And with this there's a distinction between the three different kinds of props that we've got. So we have configuration props, we have data or state props, we also have template props. Configuration props, these are the star of the show here, as you can probably guess by the name. These configuration props are what drives this level of reusability. They are what allow us to toggle between different kinds of behavior and get a lot more reusability and flexibility out of each component.

So typically these are of a boolean type where we're either toggling something on or off. And good examples of this might be an is primary on a button. So you can have a primary button, you could have a secondary button. As well as things that are going to change like the UI of a component. So you might want to have a more compact view. Maybe you've got a video player and you want to show controls or hide the player controls. Different things like that. These are configuration props, because they allow us to configure and to change that behavior. The other kind of configuration prop are enum types or enumeration types. So these are where you have a list of acceptable values. It's not just a true or false toggle, but we instead have any number of values that we can pass into this. So one example is that the software I'm using to present this slideshow is Slidev. And it comes with a component built in to display a table of contents. And that has a prop called mode, which has three different values that you can pass to it. No other values are valid. So it can be all only current tree or only siblings. So that's a good example of a configuration prop.

Next up are data or state props. And this is probably exactly what you think it is. So we're taking our application data. Usually we're grabbing it from somewhere else, maybe an API, maybe your own API. Maybe it's entered in by the user. And we're passing that data around. This data is usually different when different users access this application or on different runs of the application.

So your Twitter newsfeed is going to be different every single time you look at it, although the configuration props used in those components are going to be the same. One useful question to ask yourself to gauge whether this is a state prop or not is if it could be stored in a database, because typically application data like this can be stored in a database. And so there I've got a few other examples.

We've got user, tweets, or posts, depending on what you like to call it, and movies. So if you've got an application that displays a list of movies, all of the movies fetch from your database. That's changing over time. And that is data props that you'd be passing in.

The third and final type of prop is template props. But for that one, we need to first cover and go into level three, which is adaptability. So just to quickly recap where we're at right now, we have these six levels of reusability. We've gone through level one, which is templating, and level two, which is configuration. And now we're on level three, which is adaptability. The whole point of this level is to use slots now to make our components more flexible. We're going to make them more flexible and adaptable to future use cases. And this allows us to not be constrained as much by props, which are very limited in what they allow, but to expand what can be done in a component by putting in slot.

So let me give you an example here. So here we've got a button, and this is an example of a template prop, because I did promise that we would cover this, and so we're going to cover it. This template prop example here shows a button, and we've got this text prop. Now this is a template prop, and the reason that it is a template prop is that it is only used in our template. We're not passing it to any components as props. We're not using it in a computed ref or in a watcher or any logic like that. We are just putting it into that template, and so that makes it a template prop.

The interesting thing with a template prop is that we can convert it directly one-to-one to a slot. And so what this allows us to do is that before we were only able to pass in text, a string, but now we can pass in an icon and some text to this button component. We can pass in whatever we want. So this makes our button component a lot more flexible because we are now treating HTML, and components as a first-class data type, whereas before we can't do that with just props. We're limited with props, and slots allow us to open that up. And the key thing here, why I call it adaptability, is that when you first create a component like this, you may not expect to add icons to your buttons. But now, because you have this slot, you don't have to go back and edit your component. We can just pop an icon into that slot, and away we go.

The component is adaptable to future use cases that you've never even thought of. One nice trick to do with these template props is to actually use the original prop as the default fallback value for this slot. And this lets us add in this slot without breaking the existing functionality, and it also allows us to neatly and nicely transition to this slot usage. But we'll see more about this a little bit later in this talk.

So level four. Level four is where things start to get really interesting with inversion. Here we're going to invert control of our application. And so what does this actually mean? So in software development, we have this concept called inversion of control, and you can look it up on Wikipedia or in any number of software engineering books, I'm sure, have this described. And it's this idea where instead of us controlling the flow of our code and going line by line, we actually give up control of the application to other code.

So in this first one, we have a regular control, but with this watcher, we have now inverted the control. We have given up control to the framework, to view. Now we do this in components by using scoped slots.

We are using this method, and we are telling it exactly what to do, when to do it, how to do it, and we are reading that. We are in control of this program. This one line program. But if we use a watch from view, we are no longer in control of what happens here. We don't decide when this console.log gets called. We are giving that up to view. View determines when this is called and under what circumstances.

So in this first one, we have a regular control, but with this watcher, we have now inverted the control. We have given up control to the framework, to view. Now we do this in components by using scoped slots. So here's an example of a list component. We're going to pass in an array that contains all the data from our list. This is in fact a state prop, a data prop. Then we're going to grab that item off of the scoped slot and render it out inside here.

The neat thing about this is that we don't know what this list component is doing to our list of items here. It could be sorting them, it could be filtering them. It could be doing any number of things. We have no knowledge of the order that we're going to get these items back. And that's exactly the beauty of this. We are giving control to this list component instead of us completely dictating all of the different things that this component should do and how this slot is going to function. We give up all of that control and we just retain this little bit of control. But that's exactly where all of that flexibility comes in. Because then we can easily create variations on this by just changing a few little things. We don't have to know about all of this other stuff that's going on inside of this component.

So level five is extension. And here we're going to basically take all the things that we've learned and we're going to do it as much as possible within a single component. And the way that we do that is through the use of extension points. And these allow us to override specific parts of our application however we see fit. So here I've got an example of a really basic layout component. And it renders out this really, really simple page.

We can wrap this first section here in a named slot and we set the default content to be what it was before. Then we're also going to wrap this middle part in a slot, but we're going to keep it as the default slot. And similarly we're going to take this footer part here and turn it into a footer slot.

So now our layout component, it does exactly what it did before because we haven't set any slot content. So it's going to use that fallback content. So the component does what it did before. However it is now way more flexible and way more reusable because we can selectively override different aspects of this component.

The last and final level is nesting. So here we are taking everything that we've learned and maximizing it, not within a single component, but throughout our component tree. And to do that we are going to nest our scoped slots and regular slots as well.

And also the default slot, we can add in content there. The cool thing about this is that we don't have to set all or none of these. We can set whatever different pieces that we want. It's entirely up to us how we want to customize how this layout component works.

The last and final level is nesting. So here we are taking everything that we've learned and maximizing it, not within a single component, but throughout our component tree. And to do that we are going to nest our scoped slots and regular slots as well.

So if we have this structure, we've got a grandparent, we've got a parent, and a child component. We want to pass a slot from the grandparent into the child. So let's first take a look at this child component. So we're going to make it very simple, we're going to have a div and we're going to have a slot. That's it. And we know that our grandparent, we want it to render the parent component and we want to put in some content into that default slot there. But what exactly do we do to get this content into that bottom slot? How do we go from that grandparent component down into that child component?

Well this parent component we know we're going to need to render this child component somehow. And we also know that we want to put some content into that default slot, but what exactly do we put there? Well it turns out that we can take that slot outlet for the parent component and just put it into that slot. And this is similar to like a try-catch block where you catch the error, you do something with it and then you may rethrow that error again. So it's a very similar kind of thing. We catch the slot in a way and then we just render it out again and pass it down the chain.

And we can also simplify this syntax if we do it like this. So why would we even want to do this? Why would we want to have to nest these slots and complicate our structure of our components? And the reason is the same that we would want to take our functions and break them up into smaller functions and it's that we can reuse these intermediate components. So we have grandparent, parent, child components. If we have some functionality in the parent component that we want to reuse on its own, we can do that. We don't have to use this grandparent component all of the time. And so those are the six levels of reusability.

I recently updated this course Reusable Components, which talks about these six levels in much, much more depth, much more depth than I can cover in a 20 minute talk. And this course I originally created four years ago, but I recently did this massive update for it. And I'm just going to take a moment to show you what this update looks like. So we have a whole set of ideas and concepts, some of which we have already covered in this talk. And they're organized by the different level of reusability. And each different tool that you get has a video, an explanation of what this is, what the base component pattern is, for example.

But then we also go into a refactoring example. We're going to show you exactly step by step how to apply this to a real-world example. We do this through this refactoring steps interface here, where you can see exactly with diffs how this works. So we go step by step to see all the different things on this refactoring.

And then there's a quiz that you can use to test your understanding of the material. And then lastly, we ended off with a video where I go in-depth into these concepts. Even more in-depth than I did previously.

So that is the course reusable components. It is my most recent one, but I also have Mastering Nuxt 3, which I created in partnership with Vue School and Nuxt Labs. So this is the official course on Nuxt, and if you want to learn Nuxt, it's the best way to do it.

So thank you all for listening to my talk. I hope you got a ton of value out of it. And here are some links to different courses and things that I've got as well as some links for if you want to find me online anywhere else. And check out the slides again if you want. So thank you, and I hope you have a great day.