In today's video, I'm going to be going over the facade pattern, which is one of my favorite design patterns available because it really makes your code so much cleaner, too right.

And also, most importantly, it makes it really easy to re factor your code in the future.

So without any further ado, let's get started.

Now.

Welcome back to Webb has simplified My name's Kyle, and my job is to simplify the Web for you so that you can start building your dream projects sooner.

So that sounds interesting to you.

Make sure you subscribe to my channel for more videos just like this one.

Now, before we jump into the code of the facade pattern, I first want to talk a little bit about what it is and why it's so important to use.

And essentially, the entire idea behind the facade pattern is to make it easy for your code to change in the future.

So the idea of this is that you create a facade between your complex code and your actual business logic code that you're writing.

So a really good example, which is the code that we're gonna be using, is the fetch a P I built into the browser.

It allows you to query AP eyes and get certain data from AP eyes.

But it's kind of cumbersome to use, and most likely you're going to trade it out later for something like Axios.

And the idea of the facade pattern is that not only does it make it so much easier to use these complex things, such as fetch, but it also makes it really, really easy to replace in the future, which is, in my opinion, the reason it is so, so useful.

So let's jump into a code example on the left side of my screen we have two functions, one for getting users and one for getting the user's post.

And they're both very similar.

They both called the speech a P I from the Jason Placeholder, a p I, and they're getting users in the 1st 1 and post in the 2nd 1 But all the contents of this fetch method of same we have the same method.

We have these headers that we have to pass along to tell fetch that were actually getting Jason data, and then we're also converting that response to Jason, so we can actually use it inside of our application.

And this is a lot of code that's not really directly tied to get in a user.

It's old kind of information that fetch needs and the rest of your code really doesn't care about.

So we were going to do is implement the facade pattern and essentially create a facade between the implementation of fetch and the actual AP I we're going to use inside of get users.

So essentially we're going to create a function which does all of this information and all we have to do is pass it the information that changes, such as In our case, the girl is the thing that's different between this function and dysfunction and also down here, all we're doing is looking through all of our users getting their post and then printing out their name and number of post on the side just so we can make sure that all the changes we make still work.

So we should get the same output later on.

So let's create that function now.

We're just gonna call it get fetch, and this is going to take a euro as you can see here we have our euro and we're also going to take parameters because this is actually passing parameters to our euro.

So let's take the euro and the Paramus.

And what we want to do is a very similar thing toe up here.

So it's just coffee.

All of this code for fetch pasted into our get fetch and recurrent place this entire section with our girl because we want to fetch for a particular euro.

We want to make sure that we're using get and we're sending that content type of application.

Jason, the last thing we had to do is just upend our programs onto the end of the query string so we can just get our query.

String here is going to be equal to object dot entries for Paramus because what we're going to do is Prem's is going to look something like this.

It's gonna say user, I D is equal to one, for example.

So the key is going to be the actual cram in our case here.

Use ready, and this value is going to be the value after the equal sign.

So by saying here, object dot entries what we're doing is we're getting an array for each one of these.

So we're going to have here.

This is going to be converted to an array and inside of that array, we're gonna have user I d.

And one just like this.

So we can just map over that.

So we're gonna have a parameter and for each one of our programs, all we want to do is return a string, and that string is just going to have at the very beginning, it's going to have our program of zero, which in our case, is user I d.

And then we want to say equal.

And we want to get Karan hear of one, and that parameter one is going to be equal to our user.

I d.

In this case, it's just one.

So now it's closed that all off.

And the last thing we want to do is just joined this array together on the and simple.

So essentially we're in Katyn, ating them all to create a correct query string.

And this code right here doesn't really matter too much.

It's just implementation of the fetch function which were trying to hide from the rest of her program.

Now we can just depend this to the end of our queries are Euro.

Just by adding it in like this haste that down and close it off and now we can replace our get fetches.

Also, make sure that this is properly There we go.

Now let's replace our fetches up here with get fetch And we can just remove this just like oops that and all of the code inside here we no longer need.

We just need to pass that our user i d which is equal to the user idea parameter We're passing to this function.

We do the same thing up here.

We don't need any of this code down here.

We could just remove all that so immediately.

You see that with this facade pattern, we've cleaned up our fetch functions, forget users and get user post.

And it's really simple.

Just says get fetch.

We passed the euro and we pass of parameters.

That is just logical code that makes sense to read.

We've made our A p i cleaner by creating this facade.

This contains all of our ugly code that connects to fetch and outputs Just this queen code that we can use inside of our application.

And if we say that, you can see we're getting an air over here and that is because by default programs is going to be no.

So we want to just make sure we set that to an object by default.

If we don't pass one in this example, we don't pass prams.

Now if we say that, you can see we're getting the people's names and the number of posts have a written.

So already we've seen one of the big advantages of the facade pattern and that it cleans up all of our code.

We no longer have to copy paste all this Petters and Method stuff all over the place.

It's all hidden away in one part of our code.

We can even put this in some other modules somewhere, and we can import it anytime we need it, and it just cleans up our code to look much nicer and easier to write.

But one of the really big advantages is when you want to actually change the implementation.

If we wanted to change to use Axios instead of fetch.

Now that we have this facade set up it's actually really easy to do.

And I've already imported axes into here.

I have the script tag from the CD en.

You can include this into your own application if you're following along.

But anyway, well, we need to do is we'll just cock it is get fetch for now so we can see both of them side by side.

And we could just replace our fetch here with a call to access.

And the way access works is you actually just passing an object.

So we have our euro, which is our girl.

We're going to have our method which is get and we're also not needed to pass any heavier ZOLL.

We could just pass in the prams like this, and we don't even need this query string at all.

So now all we need to do is just do this final dot ben.

But in our case for access, we just return resident data, and that's going to be the same as resident Jason for fetch.

Now it's comin out this code here and actually make sure that this works.

So if we say this, you can see on the side we're still getting all of our results.

But now we're actually using Axios instead of fetch, and it was so easy to change over, we only had to change it in one place, while if we had our old code like it the beginning, we'd have to go to every single place in our code, were reused, fetch and replace it with Axios, and that's very, very error prone.

You're bound to make mistakes doing that.

But with this facade pattern, you only have to change it in one place instead of having to change it everywhere.

So you're much less likely to make mistakes.

And in the end, your code is going to book much cleaner with these really nice functions that you've created, as opposed to having to use thes, really ugly functions everywhere in general, the idea of the facade pattern is to take some form of a P.

I that's either difficult to use or ugly, were not nice and create a nice AP I out of it.

In our case, we created this nice get fetch function out of the kind of ugly fetch a P I that the browser gives you.

Then we can use that nice a P I everywhere.

We're gonna use the old A p I, and it just works right out of the box.

Also, Most importantly, it makes re factoring way, way easier because we only have to change our code in one place instead of having to change it everywhere, inside of all of our code, which is easy to mess up and easy to miss.

And that's all there is to the facade pattern.

If you enjoyed this video, make sure to check on my other videos linked over here and subscribe to my channel for more videos just like this one.

Thank you very much for watching and have a good day.