Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

YOU CAN INJECT DEPENDENCIES IN YOUR COMPONENTS, LET'S DO IT.

178 views

Published on

A talk about patterns and dependency injection in Frontend

Published in: Engineering
  • Be the first to comment

YOU CAN INJECT DEPENDENCIES IN YOUR COMPONENTS, LET'S DO IT.

  1. 1. There are two ways to explain a pattern…
  2. 2. LIKE AN ARCHITECT
  3. 3. OR THE OTHER WAY
  4. 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. 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. 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. 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. 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. 9. AND YOU GO TO TALKS, HERE WE ARE!
  10. 10. YOU CAN INJECT DEPENDENCIES IN YOUR COMPONENTS, LET'S DO IT! QuiqueFdezGuerra SoftwareEngineer PlainConcepts @CKGrafico
  11. 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. 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. 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. 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. 15. And how we work with that?
  16. 16. WE HAVE A SERVICE
  17. 17. AND WANT TO USE OTHER SERVICE
  18. 18. How we usually import our dependencies?
  19. 19. IMPORTING AN OBJECT ’’’’’Singleton’’’’’
  20. 20. IMPORTING A CLASS ’’’’Transient’’’’’
  21. 21. Congratulations! That was your first DI approach
  22. 22. Object singleton, class transient, no container, the service has too much responsibility… abstractions?
  23. 23. First step in the evolution chain, semi-injection
  24. 24. 1st STEP: SEMI-INJECTION
  25. 25. 2nd STEP: AUTO-INJECTION
  26. 26. 3rd STEP: INJECTION WITH CONTAINER
  27. 27. 4th STEP: REALISTIC WORLD
  28. 28. 5th STEP: ADDING ABSTRACTIONS
  29. 29. 6th STEP: MOVING TO COMPONENTS
  30. 30. Ok, but how can I do that Quique?
  31. 31. InversifyJS
  32. 32. Inversify-props @ helpdev.org github.com/CKGrafico/inversify-props twitter.com/CKGrafico plainconcepts.com

×