SOLID Design Principles in

Ғылым және технология

🔥 Learn how to build really complex Angular forms & form controls with my new advanced course bit.ly/advanced-angular-forms 🔥
Use coupon: KZread_DISCOUNT to get -a 10%-off discount!
I am quite sure that every one of you has heard about S.O.L.I.D design principles which help to design our code maintainable and flexible. In this video, I wanted to show you how these principles could be applied to your Angular applications. I hope you will find something useful and enjoy watching it!
⭐ Successful Interview "Angular Interview Hacking" course
courses.decodedfrontend.io/co...
⭐ Become a Pro in Angular Material Theming
bit.ly/angular-material-themi...
⭐ Blazing fast GraphQL Backend just in 1 Day with Hasura Engine
bit.ly/complete-hasura-course
00:00:00 - Intro;
00:01:05 - What is Design Principle;
00:02:23 - Single Responsibility Principle;
00:13:21 - Open/Closed Principle;
00:21:40 - Liskov Substitution Principle;
00:27:15 - Interface Segregation Principle;
00:32:52 - Dependency Inversion Principle;
00:41:02 - Outro;
🔗 Link to the source code on GitHub:
github.com/DMezhenskyi/solid-...
#webdevelopment #angulartip #frontend

Пікірлер: 184

  • @DecodedFrontend
    @DecodedFrontend Жыл бұрын

    💥 Learn Angular Forms in-depth and start building complex form controls with ease💥 🔗 10% discount for the first 10 students - bit.ly/advanced-ng-forms-discounted 💡 Short Frontend Snacks (Tips) every week here: Twitter - twitter.com/DecodedFrontend Instagram - instagram.com/decodedfrontend LinkedIn - www.linkedin.com/in/dmezhenskyi

  • @alexshubin1
    @alexshubin19 ай бұрын

    Thanks a lot for this video. I'm not a native English speaker but I was very impressed that you managed to explain the Liskov principle much better than I heard in my native language. This is because your explanation was from real life but not from books.

  • @AndrewRowenko
    @AndrewRowenko3 жыл бұрын

    Thank you! Very helpful. It is quite challenging to find such a good combination of integrity, consistency and practicality inside one video about Angular. Definitely favorite frontend youtube channel!

  • @adriangasiewicz4084
    @adriangasiewicz40842 жыл бұрын

    The Dependency Inversion Principle use case is great. The combination of local provider, Injection Token, useExisting and Content Projection is just epic. Good job Dmytro!

  • @DecodedFrontend

    @DecodedFrontend

    2 жыл бұрын

    Thanks Adrian! ;)

  • @praktycznewskazowki6733

    @praktycznewskazowki6733

    2 жыл бұрын

    hejka

  • @westhack3552
    @westhack35523 жыл бұрын

    Thank you so much. This is all I've been searching for months.

  • @jojojawjaw
    @jojojawjaw2 жыл бұрын

    Your channel is handsdown the best Angular channel on KZread, many thanks!

  • @Timofei-yy5nm
    @Timofei-yy5nm7 сағат бұрын

    Hello, Dmitry! Could you please add more design pattern videos in context of Angular? I find your approach extremely useful to understand

  • @jonadushi
    @jonadushi Жыл бұрын

    Thank you Dmytro! I love your videos. You are gifted, clear and short explanation, easy to follow. Thank you 🙏

  • @TheMaltissimo
    @TheMaltissimo Жыл бұрын

    Was looking for an angular related channel and this is noice, well explained and good stuff. Thank you

  • @alan614
    @alan614 Жыл бұрын

    This was great. Thanks for putting this together!

  • @mktrann
    @mktrann10 ай бұрын

    Thank you! So amazing video!

  • @ATTI0822
    @ATTI08222 жыл бұрын

    Very great examples. I think best I've seen so far. Thanks!

  • @RickyBanerjee
    @RickyBanerjee3 жыл бұрын

    This is very rich content, thanks for sharing it across.

  • @miguelcastillo7346
    @miguelcastillo73462 жыл бұрын

    Admirable your comprehension of Angular, thanks god i found your channel, thank you teacher.

  • @BorisTheGrunt
    @BorisTheGrunt Жыл бұрын

    really good examples thanks. specially for DI

  • @maximlyakhov967
    @maximlyakhov9672 жыл бұрын

    it's the most impressive video on frontend topic! huge and unique content, thank you a lot!

  • @ayoubelhayat9650
    @ayoubelhayat96503 жыл бұрын

    Excellent explanation. Thank you

  • @rconr007
    @rconr0073 жыл бұрын

    Thanks you have explained this difficult subject in a way that makes it digestible.

  • @ganesh56789
    @ganesh567893 жыл бұрын

    Super cool content... Thanks, I am glad that I came across your channel 🙏

  • @mashab9129
    @mashab91292 жыл бұрын

    hi Dmytro, thanks for sharing great content - very informative and easy to follow/grasp thanks to your teaching style.

  • @tebohomakibile3385
    @tebohomakibile3385 Жыл бұрын

    This is brilliant content. Beautifully expalined.

  • @anish92
    @anish925 ай бұрын

    So Thankful for this Video

  • @Billiam112
    @Billiam1123 жыл бұрын

    Fantastic topic! Thanks a lot! 👌

  • @css2014
    @css20142 жыл бұрын

    I was looking for something like this. Is kind of hard to understand this concepts but with easy examples as you showed, is just simple ! thanks

  • @DecodedFrontend

    @DecodedFrontend

    2 жыл бұрын

    Thank you for your feedback 😊 glad you liked it!

  • @pastagaz4241
    @pastagaz42413 жыл бұрын

    Definitely you have to be mentioned in the Angular documentation! As always, another useful video on your useful YTchannel !

  • @JmonteroArg

    @JmonteroArg

    2 жыл бұрын

    Make a pull request adding the link!

  • @moacir8663
    @moacir8663 Жыл бұрын

    Loved it!

  • @sourishdutta9600
    @sourishdutta96003 жыл бұрын

    Thanks for making this video. Thank you 😊😊👍❤

  • @filipslezak5152
    @filipslezak51523 жыл бұрын

    As always, thank you for quality materials. Gonna check it yout later :)

  • @giorgi1337
    @giorgi13373 жыл бұрын

    You have made my day! Thanks a lot. Cheers from Tbilisi✊🏻

  • @DecodedFrontend

    @DecodedFrontend

    3 жыл бұрын

    Thanks! Happy to hear that 😉

  • @maximermoshin393
    @maximermoshin3933 жыл бұрын

    Nice video. Thanks for sharing your knowledge.

  • @user-wr8gg9kh6l
    @user-wr8gg9kh6l Жыл бұрын

    very nice, thank you!

  • @JmonteroArg
    @JmonteroArg2 жыл бұрын

    This contains video invaluable information. Thank you very much for putting the time and effort creating this. The example is fantastic with the right mount of complexity to deliver the learning lesson. Thank a lot. Keep it up. I really like the content you are making.

  • @lenvaz8957
    @lenvaz89572 жыл бұрын

    Awesome tutorial! 👍

  • @prabuk3819
    @prabuk38193 жыл бұрын

    Thank You So Much For This Video...

  • @anupbista8427
    @anupbista84273 жыл бұрын

    Finally New Video 😊

  • @whatssnots
    @whatssnots2 жыл бұрын

    Excellent tutorial! Earned a sub :)

  • @archiee1337
    @archiee13373 жыл бұрын

    Awesome stuff

  • @pitsaveliev
    @pitsaveliev Жыл бұрын

    Отличное видео! Лучшее из тех что я видел на эту тему. Лайк и подписка!

  • @GuillermoArellano
    @GuillermoArellano3 жыл бұрын

    Another excellent video, Dmytro. Thank you for educating me on the use cases where SOLID could be used with Angular. I will have to re-watch that last Dependency Inversion section a few more times to understand better. Nevertheless, the 40 minutes taken up in this video flew by with so much knowledge you shared. Thank you for being awesome!

  • @DecodedFrontend

    @DecodedFrontend

    Жыл бұрын

    Thanks a lot for your feedback, Guillermo! Much appreciated :)

  • @VipinRawat_Offcial
    @VipinRawat_Offcial3 жыл бұрын

    All explained very well specially dependency inversion principle. 🙏🙏👌👌

  • @user-ir4ug1kt4e
    @user-ir4ug1kt4e2 жыл бұрын

    Nice, Thanks!!!

  • @vishnum7811
    @vishnum78113 жыл бұрын

    awesome stuff.

  • @amarmesham
    @amarmesham Жыл бұрын

    Greate Content !!

  • @dennisluken1167
    @dennisluken11672 жыл бұрын

    Excellent video, thank you!

  • @DecodedFrontend

    @DecodedFrontend

    2 жыл бұрын

    Glad it was helpful!

  • @DavidSoles
    @DavidSoles2 жыл бұрын

    Great explanation. Thanks 👍🏼

  • @DecodedFrontend

    @DecodedFrontend

    2 жыл бұрын

    You're welcome! :)

  • @ryanngalea
    @ryanngalea3 жыл бұрын

    Thank you!!

  • @adityamore287
    @adityamore2872 жыл бұрын

    Thank you, Dmytro. I love you man. 👍👍👍👍

  • @DecodedFrontend

    @DecodedFrontend

    2 жыл бұрын

    😀 👍

  • @pauloafpjunior
    @pauloafpjunior2 жыл бұрын

    Amazing video, Dmytro. Do you intend to continue this serie? Talking about architecture styles in Angular, such as CleanArch, will be great.😃

  • @DecodedFrontend

    @DecodedFrontend

    Жыл бұрын

    Thanks for the idea, Paulo!

  • @fatiharkan5163
    @fatiharkan51632 жыл бұрын

    Thanks a lot, Dmytro! I might have some recommendations for you. I hope It would be great if you describe or explain and show your little padawan's the right way of use. 1 - Observables 2 - HostListeners. Thanks a lot!

  • @adiscivgin
    @adiscivgin3 жыл бұрын

    Nice as always..

  • @mightytechno
    @mightytechno Жыл бұрын

    Great video

  • @giorgimerabishvili8194
    @giorgimerabishvili81943 жыл бұрын

    Great channel!

  • 2 жыл бұрын

    Amazing!

  • @g3co875
    @g3co875 Жыл бұрын

    Thanks!

  • @hugofilipeseleiro
    @hugofilipeseleiro3 жыл бұрын

    Thank you !!!

  • @haroldpepete
    @haroldpepete3 жыл бұрын

    That was awesome, you won a new susbcriber, thank forr share

  • @DecodedFrontend

    @DecodedFrontend

    3 жыл бұрын

    You are welcome! Thanks for sub🙂

  • @BC2Monster
    @BC2Monster Жыл бұрын

    Not gonna lie, i didn't think i'd learn anything here, but damn the DI Principle was partly new to me. Thumbs Up, thank you for showing me that!

  • @maes4224
    @maes4224 Жыл бұрын

    You are the best

  • @superduper1211
    @superduper12113 жыл бұрын

    like before watching ... as always

  • @KamelJabber1
    @KamelJabber12 жыл бұрын

    Excellent content!

  • @DecodedFrontend

    @DecodedFrontend

    2 жыл бұрын

    Glad you enjoyed it

  • @Ag3sd
    @Ag3sd3 жыл бұрын

    Good content. I am watching in 2x and it feels normal. 😊

  • @the-real-pawook
    @the-real-pawook11 ай бұрын

    Гуд ту кноу, дуже дякую 🙃

  • @Kreator321RG
    @Kreator321RG2 жыл бұрын

    Rally cool! Thanks

  • @DecodedFrontend

    @DecodedFrontend

    2 жыл бұрын

    Great to hear that! Thanks :)

  • @miroslavmihalakev4588
    @miroslavmihalakev45882 жыл бұрын

    Hi Dmytro, thank you for all that interesting topics that you covered so far. The way that you are explaining everything in deep is very very good approach and again than you for that. Can I give you an idea to explain the change detection strategy more deeply with couple of examples, thanks in advance ;)

  • @alison.aguiar
    @alison.aguiar3 жыл бұрын

    Thanks guy 😀🤝

  • @DecodedFrontend

    @DecodedFrontend

    3 жыл бұрын

    My pleasure 🙂

  • @fryser007
    @fryser007 Жыл бұрын

    One of the best exemple of SOLID in real-life Thank you! The last DI exemple was confusing tho :)

  • @yeinsdavidllanohernandez1228
    @yeinsdavidllanohernandez1228Ай бұрын

    What a great class 👏, I would like to know more about how we can abstract logic everywhere to have a code as clean as possible

  • @MichaelEvanchik
    @MichaelEvanchik2 жыл бұрын

    good job

  • @ayaramzy6815
    @ayaramzy68152 жыл бұрын

    I really 🤍🤍🤍🤍🤍🤍 u .You rescue me today in the interview.Your video before the interview with 2 hours makes solid very clear.Allah bless u .Keep do this please apply head first design pattern in angular also 🤍🤍🤍🤍 u from Egypt.

  • @DecodedFrontend

    @DecodedFrontend

    Жыл бұрын

    Glad to hear that, Aya! Good luck with your new job ;) P.s sorry for the late reply

  • @sour4ik
    @sour4ik2 жыл бұрын

    Not sure about Open/Close principle. For me your explanation looks more related to code reusability. I expected smth more parent - child (when child class extends parent) related examples. What do you think? But explanations of other principles are amazing)

  • @RSmarza
    @RSmarza3 жыл бұрын

    Great content! Congratulations 👏👏 Would be great if you create a video about debugging angular memory leaks. 😉 it's an difficult issue to find good references.

  • @DecodedFrontend

    @DecodedFrontend

    3 жыл бұрын

    Great suggestion! Thank you 😊

  • @karthik_vijay

    @karthik_vijay

    Жыл бұрын

    Make a video on takeUntil of RxJS Subject which can help reduce memory leaks while using observables.

  • @SafetyLast-_-
    @SafetyLast-_- Жыл бұрын

    Does anybody knows what is the name of VSCode extension for colorized offsets in CSS and HTML templates? P.S. Thanks for the video, Dmytro!

  • @atulgupta426
    @atulgupta4262 жыл бұрын

    Hi, Thanks for this good stuff. Can you please make a tutorial on view encapsulation and change detection?

  • @genyklemberg
    @genyklemberg3 жыл бұрын

    Advanced content, thanks

  • @DecodedFrontend

    @DecodedFrontend

    3 жыл бұрын

    You’re welcome ☺️

  • @phuc_cuhp
    @phuc_cuhp2 жыл бұрын

    5:04 if you're not good at listening English (not your native language) like me, and has a little trouble to get what rule he said, it's the "And rule" (the auto caption generates "end", and I took some time to figure it out)

  • @DecodedFrontend

    @DecodedFrontend

    Жыл бұрын

    Thank you Phuc! 🙏🏻 indeed I meant “And-Word-Rule“. Sorry for inconvenience, I have fixed the subtitle 😊

  • @phuc_cuhp

    @phuc_cuhp

    Жыл бұрын

    You're welcome 😊

  • @MrKOHKyPEHT
    @MrKOHKyPEHT Жыл бұрын

    You right: splitting by extremely small pieces is overkill

  • @gururajmoger8649
    @gururajmoger86493 жыл бұрын

    Pls explain how to make reusable angular tabs as shared or child components.. that should open components dynamically

  • @Alex-bc3xe
    @Alex-bc3xe Жыл бұрын

    You are indeed the Angular Papa

  • @kennethebora6367
    @kennethebora63672 жыл бұрын

    Can you share what extension you're using for those nice block color highlights? Thanks!

  • @santoshraju9230
    @santoshraju92303 жыл бұрын

    Excellent video. Thank you. Could you please do a video on ngTemplateOutlet?

  • @hiteshsuthar1097
    @hiteshsuthar1097 Жыл бұрын

    How to do Component communication as it becomes much harder when working with multiple sub components. Especially, getting data in the parent component.

  • @Dons98
    @Dons98 Жыл бұрын

    Just best.

  • @Moinshaikh611
    @Moinshaikh611 Жыл бұрын

    This content is really really awesome Just asking which extension you are using for creating component

  • @DecodedFrontend

    @DecodedFrontend

    Жыл бұрын

    Thank you! The extension is called NX Console

  • @rikihanks
    @rikihanks2 жыл бұрын

    what if I have multiple reloadables components? how does de abastraction know which one to import?

  • @subba18
    @subba182 жыл бұрын

    Can you do an video of Module Federation implementation in Angular 12 which has webpack 5.

  • @ZeroInfinityVideo
    @ZeroInfinityVideo Жыл бұрын

    Can you do a video on unit testing long poll with Rxjs using timer, switchmap and takeuntil?

  • @slothchunk
    @slothchunk2 жыл бұрын

    SICK. hell yea

  • @balajeebala7810
    @balajeebala78103 жыл бұрын

    Tell about your glasses ,, Where do u get them and which is best for developers ?

  • @APEDUCO
    @APEDUCO3 жыл бұрын

    Great Video, Loved It ❤, BTW Which extention are you using to generate components.

  • @DecodedFrontend

    @DecodedFrontend

    3 жыл бұрын

    Hi! Thank you! I use ext called nx console marketplace.visualstudio.com/items?itemName=nrwl.angular-console

  • @APEDUCO

    @APEDUCO

    3 жыл бұрын

    @@DecodedFrontend thank you very much, I appreciate it 👍👍

  • @dfytq
    @dfytq Жыл бұрын

    how to maintain single responsibility in case u need to show the user pre-selected values in the dropdown?

  • @TheDeseth38
    @TheDeseth38 Жыл бұрын

    Have you thought about making some series about jasmine and tests in Angular? I would be happy to see it on your channel. You do great, keep it like this.

  • @eugenekalashnikov9331

    @eugenekalashnikov9331

    Жыл бұрын

    Why Jasmine? Jest most probably

  • @JoshDeveloper
    @JoshDeveloper2 жыл бұрын

    Good content as usual bro, I like it. ♥ Just I wanna mention your little typo that "wether" must be "weather" :D Anyways,, keep posting such nice videos

  • @DecodedFrontend

    @DecodedFrontend

    Жыл бұрын

    ah... Indeed, you're right :)

  • @harpreetsinghsahota5191
    @harpreetsinghsahota51912 жыл бұрын

    Hey Dmytro, Just a thought that we can mark properties optional in interfaces in that way we need not to make multiple interfaces. What are you guys think about it???

  • @jacqueskloster4085
    @jacqueskloster4085 Жыл бұрын

    A little side note for the Interface Segregation Principle, since it has a major benefit that maybe isn't clear in the beginning: The angular lifecycle hooks are a great example since every hook method has its own interface. The benefit of the principle is that a) implementation developers do not need to implement irrelevant code (as demonstrated in the video) and b) implementation developers of your library/component whatever will only ever see those bits of the implemented code that is relevant to them when you provide them references to classes. b is maybe not so obvious but imagine you had a class that has some methods that must be public due to other internal dependencies (the way component classes are forced to have public props/methods for their template immediately comes to mind) but you don't necessarily want the implementation developers that use your class see all the methods. The solution is to write an interface and only ever provide variables to the class typed with that interface. That could be in callback Methods, abstract methods or anywhere else where an instance to a consumable class would occur. This pattern is especially useful in typescript where you have so many different ways to compose your classes due to the nature of javascript. Example: You have an API abstraction with read and write methods (yes that sort of breaks CQRS, but let's ignore that) but you want to expose only the reader API although all operations are implemented in one class. That's where you would expose the class instance by typing it with the IReader (silly name, sorry) interface. Consumer code can now only access the reader methods. Unless they (apiInstance as IWriter).write :D

  • @seblaise94
    @seblaise943 жыл бұрын

    Awesome video, what is the name of the extension your using for generating the component?

  • @DecodedFrontend

    @DecodedFrontend

    3 жыл бұрын

    Hi, it is called “NX console” :)

  • @user-zy2jw1pi1f
    @user-zy2jw1pi1f11 ай бұрын

    what is the name of extension he is using to generate components any idea ?

  • @NaomiNos
    @NaomiNos16 күн бұрын

    What is this VS Code extension used in this video to run ng commands interactively?

  • @SanketLakhera
    @SanketLakhera Жыл бұрын

    Great video. Just like to know how to integrate git in vscode just like you?

  • @salarystealer
    @salarystealer2 жыл бұрын

    great

  • @youraccountissuspended
    @youraccountissuspended Жыл бұрын

    hello sir, do you know how to use common module in child module without import in child module i have parent module that import common module and child module

Келесі