Facade Pattern - Design Patterns
ฝัง
- เผยแพร่เมื่อ 8 ก.ย. 2024
- The facade pattern is one of my favorite design patterns, because of how incredibly useful it is when refactoring code. The idea of the facade pattern is to create your own API that hides away complex or repetitive code so that you are left with a clean and easy to use API. The benefits of this is not only clean code that is easy and fun to work with, but your code is also much easier to refactor when the complex code behind your facade needs to change.
🚨 IMPORTANT:
Design Patterns Playlist: • What Are Design Patterns?
📚 Materials/References:
GitHub Code: github.com/Web...
🧠 Concepts Covered:
- What the facade pattern is
- How to use the facade pattern
- Why the facade pattern is important
- Before/After comparison of the facade pattern
🌎 Find Me Here:
My Courses: courses.webdev...
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/Web...
CodePen: codepen.io/Web...
#FacadePattern #WDS #DesignPatterns
![Megan Thee Stallion - Neva Play (feat. RM) [Official Video]](http://i.ytimg.com/vi/TpYTyAaTRts/mqdefault.jpg)
![🎤 ไปกันต่อออ! จับฉลากร้องเพลง x P’ #XXSIVK [EP.2] (1/2) เพลงของใครจึ้งสุดน้าา 💓🎤 #MXFRUIT](http://i.ytimg.com/vi/mLI_K0sAS4o/mqdefault.jpg)
Greate job with these videos Kyle. I’ve been writing software since 1975 (no kidding) and I like coming here for quick, solid briefings on technologies I haven’t used yet. I’ve actually recommended your videos to team members in my professional circles. Keep it up!
Thank you so much! I am really glad you find my videos useful as a form of informational nuggets since that is my goal with most of my videos.
awesome! I have been using the facade pattern for years at my job's codebase to make api calls without even knowing that it was a pattern. It helps a lot to put things in context. Cheers mate
ditto here, he just described what i have been doiong but didnt know the cool trendy name for it!!
Your videos are awesome. No weird comedy, no lengthy talking about your life, just code
I love the way how you showed how this looks instead of just talking.
Thank you! I try my best to show while explaining since it is so much easier to see what is happening that way.
@@WebDevSimplified i think i used to live across the street from you
Great job as usual. Design patterns often arise automatically through experience without studying them or naming them. This is a perfect example, the original has almost the same code for each fetch, is verbose and appears more complex than it could be; it follows a *pattern* and a good developer will immediately see this and abstract it away.
Turns out I always used this pattern and didn't even suspect. Maybe that's why it is so easy to understand. But your explanation is also really simplified. Thanks buddy, great job. Like, subscribe.
Thank you again, Kyle,
you always stick to the point in 100% of your videos,
no bullshitting, no unnecessary talks, and you use a very easy, understandable way to teach.
In many other TH-cam channels 60-70% part of the video is unusable, we need to fast forward several times to skip the bullshit parts.
Thank you again, this is the way to go,
you set a high level standard for teaching programming!
Videos aimed at helping you code cleaner/more efficient, brilliant idea and nice job! I didn't know this had a name.
Never came across any tutorial that puts it so simply, truly, "Web dev simplified". Thank you
hey loved this whole series. please add more patterns to it. like factory etc.
I will do. I really want to get into the command pattern next.
How can you not blink at all?!
Don't worry, I'm sure Skynet will work out the kinks at some point. He's probably just a beta test.
I know right?! I'm both equally confused and impressed.
Look at "Builder Pattern" video
The algorithm put missing blinks from this video into that one.
Is sick and annoying
He is super Human
This is the best series for explaining design patterns, i have ever seen. I wish you complte it.
I have been using this for a while but till now didn't know it's actually a design pattern. Thanks for making such good videos on these topics. Before watching your videos on design pattern and principles I used to ignore them.👌
Thank you, this is very helpful. I really need to dive more into design patterns.
The way u explained it... bravo my man !!!!
Great stuff, even though JS is used this can be use with any language. Been doing this for years definitely a way to keep things things clean, keep the codebase flexible, and reduce time to market.
Didn't know I use Facad pattern all the time. Love your videos!
You explain things so simply. I love your videos and very much appreciate the effort you put into the explanations. Thank You!
Damn, I use this pattern all the time.
Thanks, Great vid.
An alternative way to generate query string is by using URLSearchParams
For example : new URLSearchParams(params).toString()
Very good job you done here!
You have a soothing and calming voice.
Thanks!
I like how you explain it, really Simplified as your channel name! keep up the great content! thanks.
Hey Kyle, hope you're doing well. I just wanted to suggest a video idea for the future on calculating CSS Specificity. I was searching your channel and didn't see it, so I apologize if it's there. But if not, I think it'd be great since it's one of those things that many beginners gloss over, but it's really important. Take care.
This is a great idea. I think I talk about it a bit in my Learn CSS in 20 Minutes video, but a full dedicated video would be best.
@@WebDevSimplified Thank you for the consideration, Kyle! I actually went ahead and learned it, and it's not too complex. I think you can do it in under 3 minutes and I didn't find any video that explains it as well as the site I learned it from, so I think this would be a great video as you'd be one of the first to not only go into it, but to simplify it. FWIW, here's the site I learned it from: www.w3.org/TR/selectors-3/#specificity
Thank you so much, i really like software engineering. Very enjoyable
Awesome video as always. I have a question though. Do you ever blink bro?
That was a quick and on the point video Great. I've learned something today 😍
well explained!
Thank you I have an exam tomorrow, helped alot
The Facade Design Pattern, so well explained. Thanks, Kyle.
{2024-07-01}
thank you for this video
4 years ago man... time flies
please do more videos about patterns
I have a full playlist on them you can checkout.
You are a great teacher 🙏🏻
Excellent explanation 👌
thank you
Just found ur channel! I love it!
Thank you!
Congrats on reaching 50k. You earned it.
Thank you! It really snuck up on me and was quite the surprise. I am so thankful for all the amazing people who have subscribed to my channel.
@@WebDevSimplified Your videos are very helpful that's why people are subscribing.
very good
Quality content as always, great work!
Can't believe Kyle used to talk slowly, guess the was the Engineers beta test release of the Kyle Robot
Thank you so much. Make more videos like this. Thanks again.
I have a full playlist on design patterns and hope to update it more consistently than I have been.
Appreciate , so well explained
bro never blinks!
Nice explanation..Keep up the good work.
I didn't know the facade pattern, and I still don't know if I really understand it. Most of the time my code looks like the end result in the video, but I just keep DRY and SRP in mind. What's the difference between a facade and DRY/SRP? Or is a facade one of the means of achieving DRY/SRP?
It's simple (from the description):
>The idea of the facade pattern is to create your own API that hides away complex or repetitive code so that you are left with a clean and easy to use API.
An API takes complicated / repetitive code and reduces it to just the info you need with minimal syntax, which is what Kyle did in this video. HTTP requests are a great example of this, since only the options change, so there's no need to repeat the code over and over for making a simple request.
I did the similar work, but don't know its name is facade pattern
jQuery api would be a facade over normal DOM operations and aimations etc for example.
@@AlexTechie yes, I understand the definition, but I have learned that good organized code with SRP should be Transparent, Reasonable, Usable and Exemplary (aka TRUE). My experience is that when writing TRUE code, you also end up with abstractions that hide complex code, and keeping DRY in mind will prevent repetitive code. So what is the difference if you both end up with similar or equal implementation?
There are some fine lines between clean code and the facade pattern. The main difference is that the facade pattern is about hiding a complex API and exposing a simple API. Generally a facade will be used in many places in your application while SRP and DRY code could be just for a single class/function. It doesn't really matter if something is technically a facade or not. What matters is that the code overall is clean.
Wow.. This is amazing.. Thanks Sir.
Ur so smooth keep it up bro
Nice blinds BTW. I have the same ones in my office.
Nice!
awesome
Thanks for this man!
so the façade pattern is basically making a connection between complex and simple code... the complex part can be changed, the simpler code can be used everywhere throughout the rest of the project in a more general way avoiding repetition of hard-to-understand code. Am I correct?
It's really interesting how these patterns and SOLID principles are relevant to JS. I never would have thought that.
Great One ! Waiting for you to make a MongoDB or Firebase Database Video.
I want to do MongoDB, but haven't had the time. I do have a SQL video though.
Thank you a lot
I always struggle with one thing when it comes to JS and that is the use of const. Coming from VB, C# and so on, I am used to a const being one value throughout the life of the application. Am I right in thinking, in JS, it means a constant type rather than value? So far so good on the design patterns, but this is throwing me.
Thanks for this video, in the case when we have a setUser and setPost for exemple how we can refactoring that in getFetch function in order to get information after fetching?
Thank's man
Oh, didn't realize this was a pattern, I though something like this would simply be general refactoring.
Missed opportunity to URLencode the query string.
For knowledge: The pronouncation of `Facade` is (Fasade) or (Fakade)?
Facade pattern is just like straight up refactoring
sir can you make a detailed tutorial on JS....???
This is something I have wanted to do for awhile, but just haven't found the time.
@@WebDevSimplified Hmmmmmmmmmmm
great video. why do we have to use body.json()?
Great video, big thank you!
So the Facade pattern basically means to extract the repetitive code/logic to a function and use it instead? Also, why do you map params and not just pass it inside the URL?
No, Facade doesn't mean just to extract repetitive logic at all. Facade is for 'cutting' and presentation complex logic into simple interface.
Mapping params means you can potentially construct the query string dynamically without spending too much time to join them which could introduce bug easily. if you would like the original getFetch() to be more fancy, you may also check if url should follow by "?" or "&", or if there is a need to append query string, etc.
hi guys i'm an anspiring web dev currently studying html5/css3 so which languages should i learn next?
(i was work as a technical support in a company but due to massive lay offs i was 1 of the unfortunate who got fired but due to family needs i seek urgent employment currently working as a pump attendant and now seeking to work as a freelancer(web dev) to provide a better future to my family)
please help me any advice and tips would really help me.............thanks guys
You should learn JS and then React. With JS skills and React skills you have the best chance of getting hired.
Hello instructor, can you built a social network app by node js on youtube ?. Thank you instructor very much.
Hi there. I'm looking for information about using the facade design pattern with UI libraries such as Bootstrap. Is this recommended (or common) in the professional world? Thanks
great video. I would use the $http when doing AngularJS is axios similar ?
I am not sure since I have not used Angular, but if $http is similar to fetch then yes.
what is the diffrent between fetch and axios ? thank you
dang if only i code like this from the beginning :(
Is this pattern related to the Dependency Inversion principle?
Should I add anything else besides the script tag for the cdn to index.html for axios to work? I keep getting an error that says axios isn't defined.
this feels like DRY concept to me, Is there any difference, what am i missing?
So, is it basically an interface on top of an interface?
Isn't it also the "DRY" principle?
So de facto refactoring is facade pattern or what?
Kyle talked so slowly back then. I can't tell if it's purposeful or if he's now speeding up the video.
Very good vid with usefull examples but it seems to me more like a DRY principle than Facade Pattern. Isn't Facade Pattern more OOP related? When you have and object that hides a methods of a complex system and provides only necessary tools.
So design pattern is basically common sense.
3:30 Tell me you use VS Code without telling me you use VS Code
why do you say git instead of get ?
I use the pattern but didn't know the name.
do you even blink bro
That is not Facade Pattern. It is only a reusable function.
To me, this video is an odd explanation of Facade pattern... Author just created function-helper to avoid repeating
How about using ONE custom hook, this video is outdated
Please blink!
First
This is called an alias
I don't think your example can be called Facade pattern.
That’s actually not then facadepattern… DRYing a little bit the code in a small reusable function it’s not facade my dude 🤣
so the facade pattern is just using functions? lol
why does bro talk like a robot
/////
I need your assistance with something
A very serious project I believe we can work on together
Why do you make it so complicated with the parameters? Why don't you send the parameters with the URL? This way the facade also works for endpoints that don't expect parameters without a default value for params.