YOU CAN INJECT DEPENDENCIES IN YOUR COMPONENTS, LET'S DO IT.
•Download as PPTX, PDF•
1 like•610 views
A talk about patterns and dependency injection in Frontend
Recommended
More Related Content
Similar to YOU CAN INJECT DEPENDENCIES IN YOUR COMPONENTS, LET'S DO IT.
Similar to YOU CAN INJECT DEPENDENCIES IN YOUR COMPONENTS, LET'S DO IT. (12)
More from Quique Fdez Guerra
More from Quique Fdez Guerra (20)
Recently uploaded
Recently uploaded (20)
YOU CAN INJECT DEPENDENCIES IN YOUR COMPONENTS, LET'S DO IT.
- 1. There are two ways to explain a pattern…
- 3. OR THE OTHER WAY
- 4. This strip was made by CKGrafico mixin some strips from, all the rights are for commitstrip, and their awesome work. Can you help me with a pattern? Ye s! And this is the new pattern to study this week FIRST YOU USE IT WITHOUT KNOWLEDGE
- 5. This strip was made by CKGrafico mixin some strips from, all the rights are for commitstrip, and their awesome work. Can you help me with a pattern? Ye s! And this is the new pattern to study this week This strip was made by CKGrafico mixin some strips from, all the rights are for commitstrip, and their awesome work. Can you help me with a pattern? Ye s! And this is the new pattern to study this week AND YOU DISCOVER THE PATTERN
- 6. This strip was made by CKGrafico mixin some strips from, all the rights are for commitstrip, and their awesome work. Can you help me with a pattern? Ye s! And this is the new pattern to study this week This strip was made by CKGrafico mixin some strips from, all the rights are for commitstrip, and their awesome work. Can you help me with a pattern? Ye s! And this is the new pattern to study this week YOU INVESTIGATE ALONE
- 7. This strip was made by CKGrafico mixin some strips from, all the rights are for commitstrip, and their awesome work. Can you help me with a pattern? Ye s! And this is the new pattern to study this week This strip was made by CKGrafico mixin some strips from, all the rights are for commitstrip, and their awesome work. Can you help me with a pattern? Ye s! And this is the new pattern to study this week DISCUSS WITH TEAMMATES
- 8. This strip was made by CKGrafico mixin some strips from, all the rights are for commitstrip, and their awesome work. Can you help me with a pattern? Ye s! And this is the new pattern to study this week This strip was made by CKGrafico mixin some strips from, all the rights are for commitstrip, and their awesome work. Can you help me with a pattern? Ye s! And this is the new pattern to study this week HAVE INTERNAL TRAININGS ABOUT IT
- 9. AND YOU GO TO TALKS, HERE WE ARE!
- 10. YOU CAN INJECT DEPENDENCIES IN YOUR COMPONENTS, LET'S DO IT! QuiqueFdezGuerra SoftwareEngineer PlainConcepts @CKGrafico
- 11. WHY THIS PATTERN? A B - One of the most used patterns in backend for coupling. - If A depends on B and B is broken, you should change A. - A has to manage the life time of B. - Mocking dependencies is not easy. We want to make our classes independent from creating the instance of the dependencies.
- 12. A THE SOLID PRINCIPLE A BIB Dependency Inversion Principle One module should not depend of other module, they both should depend of an abstraction
- 13. Injector (container?) Inversion of Control ( IoC ) THE DESIGN PRINCIPLE A B A Creates B? B ☆ Using IoC, when one class depends on other class, the first should not manage the life time of the second, this should be done outside.
- 14. THE (FAMOUS) PATTERN A Injector (container?) IB? B D C E Dependency Injection We should have one object supplies the dependency of another object helping on Inversion of Control, and we should use abstractions to apply Dependency Inversion.
- 15. And how we work with that?
- 16. WE HAVE A SERVICE
- 17. AND WANT TO USE OTHER SERVICE
- 18. How we usually import our dependencies?
- 19. IMPORTING AN OBJECT ’’’’’Singleton’’’’’
- 20. IMPORTING A CLASS ’’’’Transient’’’’’
- 21. Congratulations! That was your first DI approach
- 22. Object singleton, class transient, no container, the service has too much responsibility… abstractions?
- 23. First step in the evolution chain, semi-injection
- 26. 3rd STEP: INJECTION WITH CONTAINER
- 27. 4th STEP: REALISTIC WORLD
- 28. 5th STEP: ADDING ABSTRACTIONS
- 29. 6th STEP: MOVING TO COMPONENTS
- 30. Ok, but how can I do that Quique?
- 31. InversifyJS
Editor's Notes
- https://carbon.now.sh/?bg=rgba(21%2C23%2C25%2C1)&t=one-dark&wt=none&l=application%2Ftypescript&ds=true&dsyoff=19px&dsblur=25px&wc=true&wa=true&pv=80px&ph=68px&ln=true&fm=Hack&fs=15.5px&lh=144%25&si=false&es=4x&wm=false&code=import%2520%257B%2520insightsFactory%2520%257D%2520from%2520%27.%252Finsights%27%253B%250A%250Aclass%2520CartService%2520%257B%250A%2520%2520constructor(insights)%2520%257B%250A%2520%2520%2520%2520this.insights%2520%253D%2520insights%253B%250A%2520%2520%2520%2520this.products%2520%253D%2520%255B%255D%253B%250A%2520%2520%257D%250A%250A%2520%2520add(product)%2520%257B%250A%2520%2520%2520%2520this.products.push(product)%253B%250A%2520%2520%2520%2520this.insights.info(%2560Product%2520%2524%257Bproduct.id%257D%2520added%2520from%2520cart%2560)%253B%250A%2520%2520%257D%250A%257D%250A%250Aexport%2520const%2520cartService%2520%253D%2520new%2520CartService(insightsFactory())%253B