Facade Pattern - Design Patterns

Подписаться 1,6 млн

Просмотров 103 тыс.

50% 1

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/WebDevSimplified/D...
🧠 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.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
#FacadePattern #WDS #DesignPatterns

Опубликовано:

11 окт 2019

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 138

@deroesch 4 года назад

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 4 года назад

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 2 года назад

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 4 года назад

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

@rnater7145 2 года назад

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.

@szabolcsjobbagy30 6 месяцев назад

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 RU-vid 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!

@SXCRD 4 года назад

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

@shankerm3959 3 года назад

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

@ProgrammingwithPeter 4 года назад

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

@WebDevSimplified 4 года назад

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

@slowbr600rr 3 года назад

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

@rustamergashev7278 4 года назад

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.

@justinpaoletta1 2 года назад

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

@sheririchardson9245 4 года назад

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

@justcurious1349 3 года назад

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

@ebrahimkassem8939 2 года назад

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

@ardhiirfansyabani4921 3 года назад

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

@thisissyedbasim 3 года назад

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

@siddheshkadam4231 2 года назад

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

@muhayminkhan7063 Год назад

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

@alreadytakenindeed 2 года назад

Quality content as always, great work!

@ricardoigconsultancy4424 8 месяцев назад

Very good job you done here!

@haythamdahri9321 4 года назад

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

@avilabiel 3 года назад

You are a great teacher 🙏🏻

@hiradr3857 4 года назад

How can you not blink at all?!

@t4int3d0n3 4 года назад

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

@lonnekelommers3106 4 года назад

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

@Gogolian 3 года назад

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

@stopPlannedObsolescence 3 года назад

Is sick and annoying

@Rohitsingh-vv3um 2 года назад

He is super Human

@ayushjain349 4 года назад

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

@WebDevSimplified 4 года назад

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

@dean6046 4 года назад

Thanks for this man!

@vik8860 4 года назад

You have a soothing and calming voice.

@WebDevSimplified 4 года назад

Thanks!

@hashadhijayasinghe717 9 месяцев назад

well explained!

@thatWebGuySolutions 11 месяцев назад

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.

@bharathten1249 2 года назад

Appreciate , so well explained

@tobiapioscivoletto3686 2 года назад

thank you for this video

@khairnarshekhar 4 года назад

Nice explanation..Keep up the good work.

@pastorfred2543 4 года назад

Wow.. This is amazing.. Thanks Sir.

@Sunwarul 4 года назад

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

@WebDevSimplified 4 года назад

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

@KRIMAart 4 года назад

Just found ur channel! I love it!

@WebDevSimplified 4 года назад

Thank you!

@sharmarahul17 Год назад

Excellent explanation 👌

@mhmdalharbi2370 4 года назад

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

@bikramchettri9405 4 года назад

Congrats on reaching 50k. You earned it.

@WebDevSimplified 4 года назад

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 4 года назад

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

@Ina_dahirr 4 года назад

Ur so smooth keep it up bro

@youcefkhalainou1420 3 года назад

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?

@rhutikgiradkar 3 года назад

thank you

@VanPetersonKpoti 4 года назад

Thank you a lot

@JM-jk9vz 2 года назад

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

@alienspro 4 года назад

Thank's man

@gilbertovazdemoraes3093 2 года назад

awesome

@anasamati 3 года назад

very good

@zellaxoxo 3 года назад

Thank you I have an exam tomorrow, helped alot

@MrMarkgyuro 4 года назад

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

@TheLucidWay 3 года назад

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.

@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

@vitoroliveira6170 4 года назад

Is this pattern related to the Dependency Inversion principle?

@pipertripp 4 года назад

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

@WebDevSimplified 4 года назад

Nice!

@3ab9ari1 4 года назад

what is the diffrent between fetch and axios ? thank you

@jamesbowring9528 2 года назад

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.

@klirmio21 8 месяцев назад

4 years ago man... time flies

@ANNGUYEN-cw7lw 4 года назад

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

@akn9699 4 года назад

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

@WebDevSimplified 4 года назад

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

@SpencerDavis2000 4 года назад

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

@WebDevSimplified 4 года назад

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

@baatar 4 года назад

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

@thefakedeal 4 года назад

Damn, I use this pattern all the time.

@stannone7272 4 года назад

please do more videos about patterns

@WebDevSimplified 4 года назад

I have a full playlist on them you can checkout.

@uplink-on-yt 4 года назад

Missed opportunity to URLencode the query string.

@AlexTechie 4 года назад

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 4 года назад

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 4 года назад

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

@channel_panel193 5 месяцев назад

bro never blinks!

@m3rl1on 4 года назад

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

@Pareshbpatel 22 дня назад

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

@paliamite 3 года назад

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 2 года назад

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

@lauyuhin 2 года назад

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.

@brunofilgueiras3518 3 года назад

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?

@dragonore2009 2 года назад

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

@preciousadedibu1821 Год назад

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

@sillevl 4 года назад

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 4 года назад

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 4 года назад

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

@danko95bgd 4 года назад

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

@sillevl 4 года назад

@@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 4 года назад

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.

@NoahNobody 2 года назад

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

@KallyanBRoy 3 года назад

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

@markangelogarcia2584 4 года назад

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 4 года назад

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

@usama57926 4 года назад

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

@WebDevSimplified 4 года назад

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

@usama57926 4 года назад

@@WebDevSimplified Hmmmmmmmmmmm

@vncntjms 2 года назад

Facade pattern is just like straight up refactoring

@rabbyhossain6150 2 года назад

Isn't it also the "DRY" principle?

@netbin 3 года назад

So de facto refactoring is facade pattern or what?

@utof 17 дней назад

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

@koraytugay 4 года назад

why do you say git instead of get ?

@richienabuk 4 года назад

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

@imanidiot2180 4 года назад

do you even blink bro

@guy11827 4 года назад

First

@kamranbashir4842 3 года назад

So design pattern is basically common sense.

@ontheruntonowhere Год назад

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

@chesswithsalman3375 4 года назад

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

@FelipeCoralSasso 2 года назад

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

@Alexis-ei9ct 2 года назад

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

@ezeargen 4 года назад

Please blink!

@johnddonnet5151 2 года назад

How about using ONE custom hook, this video is outdated

@ahmedboutaraa8771 3 года назад

/////

@Mikyye 2 года назад

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

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

@EthanG298 3 года назад

so the facade pattern is just using functions? lol

@dustinpoissant 4 года назад

This is called an alias

@Quynn-Oneal 2 года назад

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

@julian_handpan 2 года назад

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

@ahmadelmassalkhi 6 месяцев назад

why does bro talk like a robot

@andreaskarz 2 года назад

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.