Save 37% off PRO during our Black Friday Sale! »

Inversion of Control in a Vue Application

Inversion of Control in a Vue Application

Using dependency injection for building loosely coupled applications. The talk focuses on the inversion of control techniques specifically dependency injection, and how it can be implemented in an application.

1135c452bcb851741181b804cd184972?s=128

Rahul Kadyan

March 20, 2020
Tweet

Transcript

  1. Inversion of Control in a Vue Application

  2. Rahul Kadyan Core Team Member Ex-organiser, VueBLR @znck0

  3. 1. What is it? 2. Why do we need it?

    3. How do we use it? Inversion of Control
  4. Growing Complexity

  5. Shared State

  6. What is Inversion of Control?

  7. Program Control Flow

  8. Dependencies

  9. Chicken Tikka Masala

  10. None
  11. None
  12. None
  13. None
  14. Chicken Tikka Masala

  15. None
  16. Chicken Tikka Masala Inversion of Control

  17. None
  18. None
  19. Chicken Tikka Masala Inversion of Control

  20. Why do need we need Inversion of Control?

  21. Simple

  22. Simple is to Reason

  23. SOLID

  24. Single responsibility principle Open closed principle Liskov substitution principle Interface

    segregation principle Dependency inversion principle
  25. How do we use Inversion of Control?

  26. We are already using it.

  27. Props define dependencies.

  28. None
  29. None
  30. None
  31. None
  32. None
  33. None
  34. None
  35. None
  36. Props Vuex Provide/Inject Local Global Contextual

  37. UI Logic Business Logic

  38. Composition Functions

  39. General Purpose Dependency Injection Container

  40. None
  41. Inversify.js

  42. None
  43. None
  44. None
  45. None
  46. None
  47. None
  48. None
  49. None
  50. None
  51. None
  52. None
  53. None
  54. None
  55. UI Business Props Vuex Provide/Inject Inversify.js

  56. @znck0