Dependency Injection Easily Explained

dependency injection is very interesting it essentially allows an object to use other objects and their properties or functions without having to worry about the implementation specifics of those dependencies in other words it aims to separate the concerns of constructing objects and using them for that it needs an injector also known as an assembler or provider that is responsible for providing dependencies to objects when they are needed think about how video consoles for example only require a suitable disk to operate to play a different game The Gamer only needs to insert or swap out game discs in order to play a game while neither games nor disks are required to understand anything about the consoles in their working although dependency injection is a technique that is frequently used and implemented in programming languages like Jawa c-sharp and python it is less frequently observed in JavaScript therefore purely out of curiosity we'll see how dependency injection would look exactly in JavaScript also keep in mind dependency injection is one of the forms of the pattern called inversion of control if you wish to learn more about such patterns check out my video on programming principle now if you didn't understand anything so far don't worry to make it easy for us we're obviously going to take a look at the code while doing this we're also gonna try to understand why you would need dependency injection in the first place alright so think of an example that we mentioned before we have a PlayStation console which a gamer uses to play games and below here we are instantiating this class with an object PlayStation consult and we're calling this play Method so what does it do the play Method is calling the game loader inside the game loader object all right and the game loader has a method called load so the game motor is also another class as you can see here and what it is is basically a driver inside the console that is able to load different games for example Need for Speed underground alright and the game loader has a Constructor and it also has a load method which basically is being called from the play method in the console and the load method is going to start loading the game okay if you if it's confusing please pause the video and look at the code but anyway we are instantiating this game loader inside the console which lets us to start the game okay but what is wrong with this approach it doesn't use inversion of control and obviously there is no dependency injection what if we want to try Underground 2 so a different game we would literally have to reconstruct our console so take our console apart and destroy it so break it in a way so we don't want to do we don't want to do that obviously we want a more convenient way of swapping games okay so what I'm gonna do is remove this we no longer have any hard-coded dependencies inside the console and I'm going to create a Constructor instead so this Constructor is going to accept a gam loader and the game loader is going to be assigned to this Dot Game loader now we no longer are going to have a deep coupling or we're going to decouple our game loader so in the bottom we are going to instantiate a game loader like this not const but change it like this and I think I copied it so I'm going to paste it oops let's remove the game loader all right looking good and now let's say if I want to change it to a different game I would do that easily all right it's a Underground 2 and now since we have this game loader decoupled from the console I can simply take it and pass it inside the console and now the console since it has a Constructor it's going to work pretty much the same way as it did before all right now this is dependency injection and this is inversion of control and even let's say we have a different class let's say we have a new game loader driver which is like a Next Generation game loader which can load even better games let's say something like Need for Speed um some some like newer version of Need for Speed so let's change the variable name first now I'm going to change the name of the game as well let's say Need for Speed Pro speed well it came out literally a couple years later after Underground 2 but it still looks much better than underground 2. and now since we have the same load method and given that the new class is going to have the same methods we can simply pass it inside our console and now our PlayStation console has an upgraded game loader okay this is dependency injection in the real world okay now let's be honest and admit that dependency injection can also have its disadvantages all right so in bigger code bases it can obviously make your code flexible reduce the boilerplate code and of course lead to less bugs but it's quite a complex topic as you noticed before so again in bigger code bases it can get quite complex if you are not good with it so why what are what are the things that you need to consider first of all an injection provider right in the previous example you saw that we could create a new object and pass it to the next class but who does it in a huge code base you cannot do that on your own all the time for that you have some JavaScript libraries like injection.js inversify JS and so on and of course JavaScript Frameworks like angular so let's take a look how angular solves this problem with an injection provider how does it know what to bind to what so here we have a component called example component right quite simple and this example component can accept an array of providers so in this case we have only one service called logger service which is a provider to this component which is imported here and later is basically used in The Constructor so that you can use it inside a component like for example called the right count method from this service but let's take a look at this service itself so if we go inside this logger service we're going to see that it's basically a very simple code but it has this annotation called injectable so let's hover over we're going to see that this annotation is about decorator that marks a class as an available to as available to be provided and injected as a dependency basically marking this ensures that this service has all the needed metadata and is checked within the component if it's basically appropriate to import it and inject it or not so basically the injection provider is living inside angular itself and is taking care of everything that you need so if you're using angular you are already using inversion of control and dependency injection at its best I hope this video was clear if it wasn't please leave me a comment and I will try to do my best to explain the concept again of or provide you any support that you need hey there it's me again I just wanted to quickly say thank you very much for watching this video and smashing the like button and if you want to stay up to date with such cool topics make sure you subscribe so that you don't miss whenever a new video is out and I'm gonna see you in the next one

Channel: Software Developer Diaries

Views: 11,356

Keywords: software development, software developer, programming, software engineering, javascript, web development, coding, dependency injection, dependency inversion principle, dependency injection java, dependency injection angular, angular injectable, contructor injection, react dependency injection, inversion of control

Id: l7Gu_XrwtZE

Length: 8min 14sec (494 seconds)

Published: Fri Jan 20 2023