In this article, I want to briefly go through SOLID principles (the acronym that stands for five basic principles of object-oriented programming and design) supplying each of them with real-world visual examples to make those principles more understandable, readable and memorizable.
If you want to see code examples instead you may take a look at variety of tree data structure implementations in JavaScript like Binary Search Tree, AVL Tree, Red-Black Tree, Segment Tree or Fenwick Tree.
So let’s move on!
S — Single Responsibility Principle
[a.k.a SRP] A class should have only a single responsibility. Only one potential change in the software’s specification should be able to affect the specification of the class.
O — Open/Closed Principle
[a.k.a OCP] Software entities should be open for EXTENSION, but closed for MODIFICATION. Allow behavior to be extended without modifying the source code.
L — Liskov Substitution Principle
[a.k.a. LSP] Objects in a program should be replaceable with instances of their subtypes without altering the correctness of that program.
I — Interface Segregation Principle
[a.k.a. ISP] Many client-specific interfaces are better than one general-purpose interface. No client should be forced to depend on methods it does not use.
D — Dependency Inversion Principle
[a.k.a. DIP] One should depend upon abstractions, not concretions.
- High-level modules should not depend on low-level modules. Both should depend on abstractions.
- Abstractions should not depend on details. Details should depend on abstractions.
The plug doesn’t care which type of wire it uses, it just needs wires that conduct electricity.
I hope these illustrations have been useful for you :)
Top comments (27)
This is the best explanation of SOLID I've ever seen. Just fantastic, kudos Oleksii!
This would be a wonderful read for many Javascript folks because the principals still apply. It started as an OOD thing, but transcends Object Oriented Design/Programming.
I follow this pattern religiously, especially the first two. It keeps monolithic programming far away as a result. That is always good.
I agree with you John. Sticking to these principles makes code less fragile and easy to manage as well.
Nice meeting you, I'm adding you to my list to Follow, hope we meet again!
Great article! Love the examples.
Personally I think the DIP example could have been more explicit about “the plug doesn’t care which type of wire it uses, it just needs wires that conduct electricity”
Good point, Adam! If you don't mind I've just added one more sentence to DIP to reflect the idea from your comment.
Awesome :)
Very easy and unique pictorial representation. This would really help me to memorize the principle with real-world examples. I appreciate your efforts.
I have a request :
Can you publish the article with this same pictorial examples of topic design patterns? I often messed up with each other. This would be a great help for me. Thanks in advance.
I'm glad that you liked it, Sanchit!
Very good idea about making a similar article about design patterns! I can guarantee that I'll write it any time soon, just because of lacking of time, but let me put it in my ToDo list.
Hi Oleksii, this is one of the nicest explanations of SOLID I have seen, thank you so much for sharing. I'd love to use these images in a work presentation; however, just want to check that A) you're ok with that and B) what's the best way/your preferred option to credit these images back to you? Thanks again
Sure, you may re-use these images with the link to the article (dev.to/trekhleb/s-o-l-i-d-principl...) or if it is too long then just use my Twitter link: twitter.com/Trekhleb
illustration are amazing and easy to understand.
Thanks for sharing (y)
Cool! Glad to hear that illustrations help!
This is the best explanation i have ever read about S.O.L.I.D 👏 👏 👏
Thanks for such words Nikos!
I never was able to grasp the last three principles (LID), but the concrete examples you gave made everything click into place. I'll be sharing this at work tomorrow, thanks Oleksii! 😁
Cool! I'm glad that those pictures were clear enough!
Thank you so much for sharing. I understand clearly.
Cool! I'm glad that it was useful!
This is incredible!! I've always learned these, then forgot them straight away. This is something that will actually stick! Thank you!
Cool! I'm glad that it was useful for you!
this is one of the best explaining I have ever got. thanks
Cool! I'm glad that it was clear
Very clean! i have an article about those S.O.L.I.D. principles, too :)
I like that your's one have code examples, Francesco! Well done!
Just what I've been looking for, this is magnificent! 💜
Nice article 🙂
Best S.O.L.I.D. article I've ever read. Thank you!