In this lesson, let's take a look at the branching component pattern, or as Michael Thiessen likes to call it, the extract conditional pattern. So what are we starting with? Here on the branching component pattern page, if I refresh, you'll see that we have two GitHub cards that start out with skeleton loaders. Then once the data loads in, it displays the proper GitHub information, in this case for my user profile.
What does the code then for this look like? Well, over in my IDE, here is the page that powers what you just saw in the browser. It has a GitHub card before component in it, and then a GitHub card after component in it. Essentially, this is what the component will look like before we implement this pattern.
And then this is what the component will look like after we implement the pattern. So let's dive into this component right here. What is going on in here? Well, first, we just have a username prop set.
That's why we're able to pass in Daniel Kelly IO back over in the page component. We have some loading data set initially to true, and then some user data set initially to null. On setup of this component, we make a request to the GitHub API, passing it the username. value to the response of that API request.
We do sleep in here just a little bit, basically set a little time out in order to make the request a little bit slower so we can see that skeleton a little bit longer for the sake of demonstration. If there's an error, we just console log it. value back to false. Okay, that's pretty straightforward and a lot like what you probably saw in our view component fundamentals course.
But let's see what's going on inside of the template. So at the very beginning of the template, we have this conditional that's used to display some skeleton loading state. Notice the vf right here. This is quite a bit of markup nested inside of this vf.
And if I didn't have my comments so well placed, this might be a little bit more difficult to follow. The VLTS after all this markup in the VF only comes later right down here. This is what shows when the data has actually loaded. This pattern is probably one of the simplest patterns that we'll talk about in the whole course, but is really effective.
The core of this pattern simply states, that if you see a VIF and a VELTS inside of a component, then this is a perfect opportunity to extract each branch of that condition. In other words, branch number one for the VIF and branch number two for the VELTS into their own components. Why? Well, simply to make your component easier to maintain and read.
Let's take a look at the GitHub card after. the pattern has been implemented. Inside of the script setup section, we're doing the exact same thing as before. This does not change.
But down inside of the template, oh wow, doesn't that look a whole lot nicer? Now we have a very clear read of what is going on. If my data is loading, then show a skeleton. Otherwise, show the content.
That reads very, very nicely and it's super clear what is actually happening within this component. Then we've extracted the GitHub card skeleton. view component. Notice it doesn't even have a script setup section.
It's nothing but that HTML. Very straightforward. Then the same thing for the GitHub card content. This accepts the user data and then simply displays it to the DOM.
As you can see on the page, both the before and after component work exactly the same. However, I would much rather come into this component down the road to edit it rather than the component we had before implementing the branching component pattern. In this lesson, let's take a look at the branching component pattern, or as Michael Thiessen likes to call it, the extract conditional pattern. So what are we starting with?
Here on the branching component pattern page, if I refresh, you'll see that we have two GitHub cards that start out with skeleton loaders. Then once the data loads in, it displays the proper GitHub information, in this case for my user profile. What does the code then for this look like? Well, over in my IDE, here is the page that powers what you just saw in the browser.
It has a GitHub card before component in it, and then a GitHub card after component in it. Essentially, this is what the component will look like before we implement this pattern. And then this is what the component will look like after we implement the pattern. So let's dive into this component right here.
What is going on in here? Well, first, we just have a username prop set. That's why we're able to pass in Daniel Kelly IO back over in the page component. We have some loading data set initially to true, and then some user data set initially to null.
On setup of this component, we make a request to the GitHub API, passing it the username. value to the response of that API request. We do sleep in here just a little bit, basically set a little time out in order to make the request a little bit slower so we can see that skeleton a little bit longer for the sake of demonstration. If there's an error, we just console log it.
value back to false. Okay, that's pretty straightforward and a lot like what you probably saw in our view component fundamentals course. But let's see what's going on inside of the template. So at the very beginning of the template, we have this conditional that's used to display some skeleton loading state.
Notice the vf right here. This is quite a bit of markup nested inside of this vf. And if I didn't have my comments so well placed, this might be a little bit more difficult to follow. The VLTS after all this markup in the VF only comes later right down here.
This is what shows when the data has actually loaded. This pattern is probably one of the simplest patterns that we'll talk about in the whole course, but is really effective. The core of this pattern simply states, that if you see a VIF and a VELTS inside of a component, then this is a perfect opportunity to extract each branch of that condition. In other words, branch number one for the VIF and branch number two for the VELTS into their own components.
Why? Well, simply to make your component easier to maintain and read. Let's take a look at the GitHub card after. the pattern has been implemented.
Inside of the script setup section, we're doing the exact same thing as before. This does not change. But down inside of the template, oh wow, doesn't that look a whole lot nicer? Now we have a very clear read of what is going on.
If my data is loading, then show a skeleton. Otherwise, show the content. That reads very, very nicely and it's super clear what is actually happening within this component. Then we've extracted the GitHub card skeleton.
view component. Notice it doesn't even have a script setup section. It's nothing but that HTML. Very straightforward.
Then the same thing for the GitHub card content. This accepts the user data and then simply displays it to the DOM. As you can see on the page, both the before and after component work exactly the same. However, I would much rather come into this component down the road to edit it rather than the component we had before implementing the branching component pattern.