Software design patterns help developers to solve common recurring problems with code. Let's explore 10 patterns from the famous Gang of Four book and implement them with JavaScript and TypeScript fireship.io/lessons/typescrip...
#programming #compsci #learntocode
🔗 Resources
Learn more from Refactoring Guru refactoring.guru/design-patte...
GOF Design Patterns Book en.wikipedia.org/wiki/Design_...
Criticism of Design Patterns blog.codinghorror.com/rethink...
📚 Chapters
00:00 Design Patterns
01:00 What are Software Design Patterns?
01:34 Singleton
02:24 Prototype
03:46 Builder
04:23 Factory
04:54 Facade
05:47 Proxy
06:45 Iterator
07:47 Observer
08:58 Mediator
09:50 State
🔥 Get More Content - Upgrade to PRO
Upgrade to Fireship PRO at fireship.io/pro
Use code lORhwXd2 for 25% off your first payment.
🎨 My Editor Settings
- Atom One Dark
- vscode-icons
- Fira Code Font
🔖 Topics Covered
- TypeScript and JavaScript Design Patterns
- Algorithm vs Design Pattern
- What is Gang of four?
- Are design patterns still relevant?
- Design patterns basics tutorial
I think explaining those 10 design patterns in 10 mins is substantially much harder than trying to explain it in 60 mins. Great work as always.
i see your point
smart cat
How did you figure that out
the floor is made of floor damn
Any books to recommend ?
Refactoring Guru is awesome. I found them a while ago and read thru their refactoring & design patterns content. It mirrors the standard books on those topics. And their cartoons for each pattern are REALLY helpful.
Hello from the author! Thank you folks for all the kind words of support. I'm flattered, really. Hopefully I'll find some way to work on the new refactoring section amidst this madness that's going on in my country. Cheers!
@@shvetsgroup ❤️👍
I second this comment. I have also purchased the refactoring course 👍
I bought both the book design patterns and the course without even looking through this video. The site just screamed quality. Also, really hope that things turns out great for you in the end and the madness in your country stops.
Love what I’m reading on the site so far! There’s one aspect of refactoring and clean code that’s just utterly tragic: many programmers don’t really appreciate well-designed code when they see it. Or at least more junior programmers anyway. A lot of the insight that goes into expert code design can just appear to be some kind of accidental happy coincidence to folks who don’t know any better. Or even worse, like an undesirable expenditure of extra lines of code. I don’t think we, as an industry, spend enough time discussing the extreme value of writing clear, robust, self-documenting code. We definitely spend a lot of time stressing the importance of learning a tiny bit about every new framework that pops up.
Ugh, I love it when people simplify complex concepts with actual examples.
Interestingly enough, I keep skimming the text the first time and reading hate, seeing love and then reading it a second time. Edit: At least I did it twice.
@@ChaoticNeutralMatt oh god, same here
Oh Lord
FINALLY Design patterns are super interesting and it's especially helpful that this is in Typescript and JavaScript. Most articles about this use examples in Java and pointing out that some are overly complicated if you're using JavaScript is great. Thanks for making a video explaining all of these with pros and cons. 🔥🚀
🥉 Bronze
Yeah, some patterns emerging from Java were because of the OOP strictness it has and don't necessarily make sense outside of that constraint. Seeing these patterns make sense in a freeing language such as JS makes them feel right.
They feel right in JavaScript indeed!!!
@@123495734 Brother, what you have just said is "sus".
Lmao classic example of midwit soydev
I always knew if I was lazy and waited long enough that Fireship would teach me about design patterns. 😂 Truly the best source for simplifying complex concepts.
Haha me too 🤣
Bro that's exactly my case 🤣
Not enough. I've been watching courses on design patterns for years, and still don't know them. The hardest part is to recognise when to use one, but for that you really need to know everything about them. 10 minutes won't be enough.
@@DavidSmith-ef4eh I just apply a few too. To be honest 🤣. I think am everything a programmer should not be 🤣
@@DavidSmith-ef4eh yeah you're absolutely right, but my point is in these 2 scenarios : 1) don't know what a design pattern is, neither categories of design pattern, neither the overall utility of each one 2) learn the *overall concepts* of common design patterns In the first scenario, I don't have enough knowledge to even think about using a pattern But in the second one, I can at least consider to implement some patterns when I code So I think this video is perfect for people like me EDIT: I didn't say this video is enough to *master* design patterns (it's up to the developer to learn them), but it's enough to *know* them
Just started reading "Head First Design Patterns" today. Perfect timing.
What a coincidence me too 👀👀
Wow interesting. Do I have to purchase the book?
It would depend on how much experience you have
Is the book good? Im planning to buy one.
Great book to actually learn design patterns without falling asleep
Funny that I'm already using most of them in some form without even knowing about them. I always avoided learning design patterns except of the simple ones because of the overly theoretical explanations in most articles. But this isn't the case in this video, everything explained in the most simpliest way with good examples. Very helpful!
If my professor wasn't such a hard working guy on forcing us to learn these pos patterns I probably would've given up on my own. The book is pretty difficult to read, at least in my experience, if you don't have a good guide it can be just painful in general. I also hate reading so xd.
I remember recommending this topic earlier. Glad to see it come to fruition. Exactly what I needed.
Oooooooh my dog, what's up?
Apart from design patterns, I learnt all the cool features that come with Typescript. Thanks Jeff
Could you do another one about some additional patterns? - Dependency injection - Adapter/Translator - Bridge/Opaque Pointer/Pimpl - RAII - Visitor And maybe a separate video about concurrency patterns.
Pure synchronization! I've been studying patterns for the last two weeks and some days ago I was reading through Refactoring Guru. Now you guys, one of my favorite youtube channels, made a video about it. Thanks!
This guy has the ability to read viewer's minds!!!!
Mind blown are the only two words I can think right now. I have been dabbling in understanding these design patterns for a while now but this is the simplest yet clear video I have come across for design patterns. Loved it!
It's super interesting when you learn Design patterns really late in your CS Career. You realize that you already implemented some of those patterns without knowing it or you already met a problem that would have been solved with one of those patterns
That’s one of your best videos thus far. I can’t imagine explaining the GoF book in 10 mins. Great job!
Content like this, code reports and 100 seconds make this literally the best channel ive seen in many years. Been here even before you had 1 million subscribers and let me say you deserve 10 millions subs!!!
Thanks Jeff for this value-packed content. Once you understand the value of these design patterns, it is hard to go back to the Play-Doh snakes. Even in my tutorials, sometimes I know that writing Play-doh snakes will be faster and easier for beginners to understand, but I still can't help myself from not spending extra 15-30 minutes to implement everything based on best practices. It's important to get started with the right foot.
Wow, I finally understand the design patterns I took in college. I am interested now in reading more about them and using them in my future projects.
The way you describe this stuff is so pragmatic. As much as I appreciate everyone's work on educational content, on here, this type of pragmatic approach is exactly what is missing from the majority of videos on these topics.
I'm just starting with programming and just when I think I know what I need to know, you show me something new to learn. Thank alot man you are teaching literally more than half of what I know.
Awesome video, even after 10 years of programming we can still learn a lot from the basics, thank you for that video
Thank for the quality content. My professor just give me introduction to design pattern today. Your video is very helpful.
It's really hard to make examples that are complex enough that it makes sense to use the feature being taught, but simple enough to understand quickly. You nail it every time.
I'd love to see another video covering more design patterns. As a new programmer this makes me feel like I'm not completely lost on at sea on if what I'm doing is a good way to design my code instead of just randomly doing the first idea that pops in my head or contemplating it for hours without getting anything done.
I always thought of design patterns as something really complex, convoluted stuff that would be so hard to learn, and only for really smart people to learn. So I was kinda intimidated to start learning it. But, this video made me realize that it looks so fun, and even I could do it. Thanks for giving me the confidence and keep making these world-class, wonderful videos.
It's fun because it's he who explains it. Traditional sources are very boring to me. I would love to watch a full design patterns course from fireship
@@yovivideos Yeah, true. I would too
I think the issue is that a lot of resources makes a lot of assumptions and theoretical problems that aren't realistic, so it it's hard to apply to your problem if you don't even know where to begin, and often overblown in a lot of cases. Design patterns are guidelines and doesn't need to be implemented 100% the same as books explain it. Books often try to cover a lot of use-cases that you may not even need to think about.
The hardest part of learning design patterns is to remember all the names.
@@dealloc Yeah, you're right. A lot of books go into details that are irrelevant in practical application. But, I guess that's why they are books, cuz it lets you go into the rabbit hole of stuff - if you want to. As you said, since these books make a lot of assumptions about your current knowledge, it makes things harder for beginners. 👍
Funny thing how I have used some of these patterns over the years but under different names: - Singleton: static / global class - Builder: classic object definition from C++ - Factory: I used to refer to this as "builder" and many of my older codes named factories as "builder" - Facade: encapsulation - Proxy: wrapper - Observer: event listener - Mediator: router
simple and easy to understand! keep up the great work!
5:01 (corruption) was a really nice touch
Very interesting, I've been programming for around 10 years now and just now am learning the names of these patterns I've been using for years haha. The only one that was completely new was the prototype pattern, I come from a mostly java reverse engineering background so I've always thought of that kind of like proxies.
This is the first thing I learned the hard way while entering in the professional world, thinking why haven't I been teach that before ! Glad to finally see it here !
They never teach you relevant shit in Uni or School.
@@imerence6290 Nah they do.
@Imerence i guess u weren't paying attention , since pretty much every CS/SE major include 1 course dedicated to System Design & Design patterns .
pattern info was very spread about internet and the main book of it is a confusing list.
@@mhcn7762 depends when you went to uni and where. In my case it didn't.
Such a much needed video! I feel that programmers today gloss over these fundamental software design patterns because they are already given features that solve them out of the box with high level languages. And so many never learn why those features exist and are still prone to recreating basic design flaws in code. And the issue with giving them a textbook like Design Patterns by gang of four is that although the concepts are timeless and fundamental, the terminology is outdated and many of the patterns in the book are eased in higher languages with powerful language-native abstractions So there’s a discrepancy where for newer programmers the patterns need to be translated into modern terminology and shown what modern language features correspond to which patterns!
I have a BS in Computer Science from Drexel, and learned a lot of this back then, and this is a very nice overview/refresher. I can tell you that at least in my career, I've rarely worked with engineers who think and talk about code and problems they're solving in these types of terms. A lot of time, explicit choices of pattern usage comes after the fact, if at all. Sometimes the hardest part is identifying when a pattern is in use, especially if it spans multiple files and/or directories. Even as a senior engineer or architect, I struggle with that. It really does require a shift in mindset (both individual and the team you work on), that touches not just on when you're typing out the code, but when you're planning or refining the work that needs to be done. Teams which can talk about these things ahead of time and document it in their ticketing system will have a much easier time when it comes to code review and pull requests, and QA engineers will have an easier time following along and identifying/pointing out potential areas of incorrectness when bugs are encountered. And for the sake of junior engineers, or engineers who've never taken a course on design patterns, document in the code itself when a particular pattern is being used. A link to the e-book, or at least the name of the book/place/blog/whatever where it originated can save everyone time and energy.
I disagree, these patterns are either built-in to modern languages, common sense, or a bad idea.
My all-time favorite is "Composite pattern" used especially in GUIs.
thats a confusing name though. It should be called grouping pattern... I've never found an application for it honesty.
@David Smith Well, I think HTML is a good example of Composite pattern. When a browser wants to calculate size of an element (like 'div') in page, it does not matter whether that 'div' is a container of more elements or if it contains no child elements. The browser treats a "container div" and a "non-container div" the same way.
@@mahdihosseinzadeh sure, folder/file system is another example. But I never used the pattern my self.
In videogames is usted a lot. Unity and Unreal Engine is structured that way. Why? For example there can be enemies that walk, fly, hit or shoot, and allies that can also walk, fly, hit or shoot. If you want to implement those features only once and not end with a god class, you cannot do it with just inheritance, because there is not a clear hierarchy. One good way to do it is by creating a "gameobject" that can have components, and then create the walk, fly, hit, shoot, and behavioral components (and the behavioral component would delegate the enemy or ally using composition)
I’m just starting out in programming and this is the kind of thing I’m looking for. This seems WAY more essential to coding than learning the syntax. Yeah you need to know how your tools work and its better and faster to know the right tool but if you don’t know how to build the house it really doesn’t matter.
No, it's actually all either common sense or outdated.
Amazing video. Love the quick, straightforward, clear, honest and self-humorous explanations. :-)
Thankyou! This was extremely helpful, I would love to see more like this. Fundamentals that everyone should have in their toolbelt.
I am an indie game developer, I think that the builder pattern works great for all the objects, the mediator is great for inputs and controlling objects, the state is good for controlling the game flow, but like you said, it works on step bases and its very easy to mess.
The facade pattern is extremely underrated. It does way more than just abstract away complex logic. Its real super power is to make your code more testable with dependency injection. One important thing to remember is that design patterns are not all or nothing. Each of the patterns are often used together, and some are just specialized versions of more fundamental patterns. A bit like how all multiples of 4 are also multiples of 2.
The best thing I loved about this video that not all patterns are required for language like JavaScript due to the nature of them
One of the best videos you've ever made. Feel free to make a part 2 should you find yourself with too much free time on your hands 🙃
I love this book, and also this video! Also that maze at 1:24 is literally unsolvable (at least from what we can see)
maybe there are tunnels :D
Plot twist: The guy is standing their since he actually finished the maze
This is like the fastest revision of 10 design patterns with best explanation as always. I wish that you covered all the design patterns instead of just 10. But still awesome video 😻
Excellent video. Definitely the best explanation of avoiding switch /case hell out there. A great reason I read about why you should use the factory pattern in JS ( even when it's as simple as function taking a Class returning new Class), is because making changes from that point onwards just involves altering the function, i.e. in one place. But changing every "new Class" instantiation to a factory can be a huge a breaking change.
Do you have superpower to read viewers mind, I was just thinking about learning design patterns. Thanks a lot for comprehensive video.
;)
Next video : Telepathy in 100 seconds xD
Singletons are useful for logging & error reporting. ActionPack, an important piece of rails, uses Singletons for route deprecation and Mime type identification. Sprinkling Singleton spice over a codebase would suck probably, but they aren't useless.
They are a colossal pita to test (to test an object you may need a fresh copy of the object many times) and so not recommended at a few minor places like google ..
These things are so important to know! Even if you don't use any of this, sometimes u can use patterns like this in a smaller way or solve another problem better just because u know whats possible
Found your channel a few days ago man, I've been binge watching your videos since. Amazing content much love from a software engineer !
Liked the examples. Observer pattern example is good.
That's because it's the most like functional programming. The application state is kept sacred.
At 2:05 In JS, objects aren’t passed by reference. Their reference ID is copied into a new value and that is passed. That’s why you can update properties but not the entire object. Small but important distinction
Man, this was brain-opening! Cool to be understanding such complex topics thanks to Fireship's skillful explanations
Amazing explanation of design patterns. I honestly never understood these with such ease till now.
For anyone questioning their knowledge: The builder pattern as explained in this video is wrong.
Can you elaborate please?
How so ? can you please explain.
@@tropicaldog430 He just added setters which can be chained. With the builder pattern, you have a dedicated builder class with these setters. In the end, you call build() and receive the object you wanted, usually immutable.
The state pattern he describes is also just the strategy pattern
@@31redorange08 like StringBuilder?
Your best video by far! One of the most important aspects in the whole programming world 🙏 thanks a ton! Great explanation
Wow. I really like how you expand your content. This is one of your best videos yet I think.
this video is amazing, i'm relatively new to programming and now experimenting with functions and processes is easier and projects is easier with the patterns
I love your videos, but the builder pattern as shown here is very different from the common interpretation of it. The point of the builder pattern is to separate the representation of an object from its construction process. This involves separating it into two classes, ie, Car, and CarBuilder. You create a CarBuilder, and use its methods, typically chained, which eventually give you a Car. This pattern is very common in Java and C# but also seen in other languages like C/C++ and Rust. Of course, this pattern is uncommon in JS where the most popular way to create an object is to pass an init/config object to a constructor or factory method, thanks to the object literal syntax.
Things are interchangeable, you could also create a config/init object in those other languages and remove the builder pattern. It’s just a little more verbose than js but is totally okay. You can also use the functional options pattern to create objects. They are so much way of creating objects 😅
Isn't that thing showed in video called fluent interface?
Great video, although I low-key expected some manner of criticism given how easy it is to overuse these patterns. What often happens is that people use these so frequently that rather than genuinely trying to provide a solution to a problem, they try to re-shape the problem in a way that there is an obvious cookie-cutter solution to it. That is of course not the problem of the patterns themselves, so I understand that you make no mention of this. Giving some examples of when _not_ to use GOF patterns would be immensely helpful though, in a future video perhaps?
This is exactly what I was looking for. Thanks for making a video on it 🔥
Shout out to Refactoring Guru. It really helps me understand the design pattern more clearly!
Simpler iterator pattern using generator functions: function* range(from, to, step = 1) { for(let i = from; i < to; i += step) { yield i; } } Or you know... you can just use for loop directly. :)
I think the he implemented the iterator method to work with of.
@@luizAugustoll generator function does work with for-of loop
You can even use a generator for the iterator implementation to make the range function an iterable. It's the perfect use case for a generator! const range = (start, end, step = 1) => ({ *[Symbol.iterator]() { for (let i = start; i
This guy is Eminem of programming
Thanks man, the explanations are short yet explicit. Great video
This video helps me a lot understand design patterns. Thank you for your work, I really appreciate it!
Generally I don't like when youtubers ask for a subscription, but this was well done! (8:40)
Spaghetti 🍝 design is still the most common. Whole internet is relying on it. It is like PHP among patterns.
This is the best video 🔥🔥🔥 I have watched explaining design patterns in an elegant way. Thanks
I love the edition of your videos! Good content, and high quality as well.
I hate when people talk fast on purpose not letting the other follow their reasoning, so that they feel smarter
First
🥇 Gold!
plain, simple and entertaining, thank you!
Love the fast paced explanation
They're based in Ukraine 😥☹️ sorry guys hope you survive..what are the odds of not loosing staff😭 impossible
Despite the economic downturn, I have been earning $50,000 returns from my $10,000 investment every 14 days.
Same here, I make $32,400 profits on my investment since I started trading with Expert Christine Norine Martin, her trading strategies are top notch. I’m winning consistently trading with Mrs Christine. She’s really the best broker. I've made a lot of profit investing with her.
I’ve heard a lot about investments with Mrs Christine Martin and how good she is, please how safe are the profits?
On what’ spp⤵️
꧂‿十𝟏𝟕𝟒𝟕𝟐𝟔𝟑𝟐𝟏𝟎𝟖‿꧁🇺🇸
I made $13,542 with Mrs Christine after my 10 business days of trading and I got my profit directly sent to my wallet. Good woman ♥️
This video (like many Fireship ones) is simply MASTERFUL ♥️ ! Thank you so much for making
This is like one of the best videos you've done so far
I have read some, but I'm glad now I get better understanding of it, thanks to you teaching skills
LOVE IT! Thanks for this video Fireship!
Thanks for showing this! This video fell on my recommendations when I wanted to check about design patterns since I am mostly fumbling by myself with regards to programming.
Great overview of common vocabulary for describing recurring patterns in programming!
the state design pattern is a must for game developer to learn, so useful
Thanks you for talking about language specific features related to design patterns. This is what many websites are missing.
I use most of these without even knowing their names. Thank you for the video. It amazing
Excellent. I like the mix of diagrams with simple code block examples. Beyond me, but videos like this will get me there. Thanks.
The repository pattern is awesome!
🔥 video! Probably the best video on the topic I’ve seen
19th! New PB, woop! But seriously, very concise explanation and would love to hear a 100 seconds on each pattern to go to the next level.
This video is so dense with amazing information. I need more of this for other topics. Following.
Such an awesome resource, thank you very much. Love experimenting with the observer pattern ;)
the fact that you explained it in TypeScript (best language) is even more valuable
thank u dude, state solved the exact question i had going into this video. i love these types of vids keep it up
I love this type of content! Thank you for making this.
as a junior developer this is really helpful, thank you
You know what's crazy? I searched for like 2 hours yesterday for design pattern videos. And then, here you are.
Wow, amazing vídeo! Thanks to you I learned a lot of design patterns that I didn't understand before 👏😄
Thanks for covering my subject , and fun fact we have same book as our main book for reference, and you did it in 10 min , hats off to you
Hey, great video ! For the iterator pattern, you can also use a generator function (*function) and the yield keyword, like this : // the * is essential *[Symbol.iterator]() { for(let i = start ; i != stop ; i+=step) { yield i; } } Feel free to check on MDN how generator functions work, it's pretty interesting :)
Exactly what I was thinking
Just like in python
Good call, generators are on my video idea list
oh shit, big 🧠
@@Fireship Glad to ear this ! Keep it up, your videos are awesome :)
Dude I love this channel. His jokes always hit with me and there’s always great information. Truly one of a kind channel
Well explained! And thanks for the Refactoring Guru tip, it looks awesome
Usually I have tutorials on 1.5x speed, but this is so information rich I need to be on 0.75. Thank you!
Thank you for making this video and the design patterns link!