Facade Pattern - Design Patterns

[@deroesch]

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!

[@WebDevSimplified]

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.

[@alexkarydis2270]

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

[@justinmeskan4410]

ditto here, he just described what i have been doiong but didnt know the cool trendy name for it!!

[@calebprenger3928]

Your videos are awesome. No weird comedy, no lengthy talking about your life, just code

[@szabolcsjobbagy30]

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 KZbin 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!

[@ProgrammingwithPeter]

I love the way how you showed how this looks instead of just talking.

[@WebDevSimplified]

Thank you! I try my best to show while explaining since it is so much easier to see what is happening that way.

[@slowbr600rr]

@@WebDevSimplified i think i used to live across the street from you

[@rnater7145]

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.

[@rustamergashev7278]

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.

[@SXCRD]

Videos aimed at helping you code cleaner/more efficient, brilliant idea and nice job! I didn't know this had a name.

[@shankerm3959]

Never came across any tutorial that puts it so simply, truly, "Web dev simplified". Thank you

[@ebrahimkassem8939]

This is the best series for explaining design patterns, i have ever seen. I wish you complte it.

[@justcurious1349]

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.👌

[@hiradr3857]

How can you not blink at all?!

[@t4int3d0n3]

Don't worry, I'm sure Skynet will work out the kinks at some point. He's probably just a beta test.

[@lonnekelommers3106]

I know right?! I'm both equally confused and impressed.

[@Gogolian]

Look at "Builder Pattern" video The algorithm put missing blinks from this video into that one.

[@stopPlannedObsolescence]

Is sick and annoying

[@Rohitsingh-vv3um]

He is super Human

[@siddheshkadam4231]

The way u explained it... bravo my man !!!!

[@ayushjain349]

hey loved this whole series. please add more patterns to it. like factory etc.

[@WebDevSimplified]

I will do. I really want to get into the command pattern next.

[@justinpaoletta1]

You explain things so simply. I love your videos and very much appreciate the effort you put into the explanations. Thank You!

[@sheri9245]

Thank you, this is very helpful. I really need to dive more into design patterns.

[@ardhiirfansyabani4921]

I like how you explain it, really Simplified as your channel name! keep up the great content! thanks.

[@thisissyedbasim]

Didn't know I use Facad pattern all the time. Love your videos!

[@vik8860]

You have a soothing and calming voice.

[@WebDevSimplified]

Thanks!

[@muhayminkhan7063]

That was a quick and on the point video Great. I've learned something today 😍

[@ricardoigconsultancy4424]

Very good job you done here!

[@avilabiel]

You are a great teacher 🙏🏻

[@JM-jk9vz]

Awesome video as always. I have a question though. Do you ever blink bro?

[@bikramchettri9405]

Congrats on reaching 50k. You earned it.

[@WebDevSimplified]

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.

[@bikramchettri9405]

@@WebDevSimplified Your videos are very helpful that's why people are subscribing.

[@sharmarahul17]

Excellent explanation 👌

[@alreadytakenindeed]

Quality content as always, great work!

[@haythamdahri9321]

Thank you so much, i really like software engineering. Very enjoyable

[@KRIMAart]

Just found ur channel! I love it!

[@WebDevSimplified]

Thank you!

[@bharathten1249]

Appreciate , so well explained

[@thefakedeal]

Damn, I use this pattern all the time.

[@khairnarshekhar]

Nice explanation..Keep up the good work.

[@thatWebGuySolutions]

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.

[@Sunwarul]

Thank you so much. Make more videos like this. Thanks again.

[@WebDevSimplified]

I have a full playlist on design patterns and hope to update it more consistently than I have been.

[@sqrt420]

thank you for this video

[@sillevl]

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?

[@AlexTechie]

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.

[@zhongzhongclock]

I did the similar work, but don't know its name is facade pattern

[@danko95bgd]

jQuery api would be a facade over normal DOM operations and aimations etc for example.

[@sillevl]

@@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?

[@WebDevSimplified]

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.

[@Coder112]

Ur so smooth keep it up bro

[@AlexTechie]

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.

[@WebDevSimplified]

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.

[@AlexTechie]

@@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

[@hashadhijayasinghe717]

well explained!

[@zellaxoxo]

Thank you I have an exam tomorrow, helped alot

[@pastorfred2543]

Wow.. This is amazing.. Thanks Sir.

[@mhmdalharbi2370]

Thanks, Great vid. An alternative way to generate query string is by using URLSearchParams For example : new URLSearchParams(params).toString()

[@stannone7272]

please do more videos about patterns

[@WebDevSimplified]

I have a full playlist on them you can checkout.

[@klirmio21]

4 years ago man... time flies

[@dean6046]

Thanks for this man!

[@rhutikgiradkar]

thank you

[@VanPetersonKpoti]

Thank you a lot

[@youcefkhalainou1420]

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?

[@pipertripp]

Nice blinds BTW. I have the same ones in my office.

[@WebDevSimplified]

Nice!

[@MrMarkgyuro]

great video. why do we have to use body.json()?

[@Pareshbpatel]

The Facade Design Pattern, so well explained. Thanks, Kyle. {2024-07-01}

[@preciousadedibu1821]

Can't believe Kyle used to talk slowly, guess the was the Engineers beta test release of the Kyle Robot

[@uplink-on-yt]

Missed opportunity to URLencode the query string.

[@usama57926]

sir can you make a detailed tutorial on JS....???

[@WebDevSimplified]

This is something I have wanted to do for awhile, but just haven't found the time.

[@usama57926]

@@WebDevSimplified Hmmmmmmmmmmm

[@brunofilgueiras3518]

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?

[@alienspro]

Thank's man

[@SpencerDavis2000]

great video. I would use the $http when doing AngularJS is axios similar ?

[@WebDevSimplified]

I am not sure since I have not used Angular, but if $http is similar to fetch then yes.

[@vitoroliveira6170]

Is this pattern related to the Dependency Inversion principle?

[@Jeremiahss]

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

[@anasamati]

very good

[@baatar]

So, is it basically an interface on top of an interface?

[@utof]

this feels like DRY concept to me, Is there any difference, what am i missing?

[@jamesbowring9528]

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.

[@akn9699]

Great One ! Waiting for you to make a MongoDB or Firebase Database Video.

[@WebDevSimplified]

I want to do MongoDB, but haven't had the time. I do have a SQL video though.

[@3ab9ari1]

what is the diffrent between fetch and axios ? thank you

[@paliamite]

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?

[@Mikyye]

No, Facade doesn't mean just to extract repetitive logic at all. Facade is for 'cutting' and presentation complex logic into simple interface.

[@lauyuhin]

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.

[@channel_panel193]

bro never blinks!

[@KallyanBRoy]

For knowledge: The pronouncation of `Facade` is (Fasade) or (Fakade)?

[@HologramJay]

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.

[@ANNGUYEN-cw7lw]

Hello instructor, can you built a social network app by node js on youtube ?. Thank you instructor very much.

[@dragonore2009]

Oh, didn't realize this was a pattern, I though something like this would simply be general refactoring.

[@gilbertovazdemoraes3093]

awesome

[@markangelogarcia2584]

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

[@WebDevSimplified]

You should learn JS and then React. With JS skills and React skills you have the best chance of getting hired.

[@rabbyhossain6150]

Isn't it also the "DRY" principle?

[@netbin]

So de facto refactoring is facade pattern or what?

[@vncntjms]

Facade pattern is just like straight up refactoring

[@m3rl1on]

dang if only i code like this from the beginning :(

[@FelipeCoralSasso]

3:30 Tell me you use VS Code without telling me you use VS Code

[@koraytugay]

why do you say git instead of get ?

[@NoahNobody]

It's really interesting how these patterns and SOLID principles are relevant to JS. I never would have thought that.

[@ontheruntonowhere]

Kyle talked so slowly back then. I can't tell if it's purposeful or if he's now speeding up the video.

[@richienabuk]

I use the pattern but didn't know the name.

[@imanidiot2180]

do you even blink bro

[@julian_handpan]

That’s actually not then facadepattern… DRYing a little bit the code in a small reusable function it’s not facade my dude 🤣

[@kamranbashir4842]

So design pattern is basically common sense.

[@im-luke]

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.

[@Alexis-ei9ct]

That is not Facade Pattern. It is only a reusable function.

[@johnddonnet5151]

How about using ONE custom hook, this video is outdated

[@chesswithsalman3375]

I need your assistance with something A very serious project I believe we can work on together

[@Quynn-Oneal]

I don't think your example can be called Facade pattern.

[@Mikyye]

To me, this video is an odd explanation of Facade pattern... Author just created function-helper to avoid repeating

[@ezeargen]

Please blink!

[@ahmedboutaraa8771]

/////

[@EthanG298]

so the facade pattern is just using functions? lol

[@guy11827]

First

[@dustinpoissant]

This is called an alias

[@massalkhii]

why does bro talk like a robot

[@andreaskarz]

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.