An introduction to InversifyJS. A powerful lightweight inversion of control container for JavaScript apps powered by TypeScript.

1. Dependency Inversion
in large-scale
TypeScript applications
with InversifyJS
By Remo H. Jansen

2. Coupling between modules occurs when one
module directly references another module. In
other words, one module “knows” about another
module.
The problem: Coupling

3. The solution: The OO design principles
“Depend upon Abstractions. Do
not depend upon concretions.”
“Favor 'object composition' over
'class inheritance'.”

4. Abstractions
Something considered as a general quality or characteristic, apart
from concrete realities, specific objects, or actual instances.

5. Concretions
A concretion is something that relates to or involves specific
people, things, or actions rather than general ideas or qualities.

6. Dependency Injection

7. Dependency Inversion

8. Composition root
“A (preferably) unique location in an application
where modules are composed together.”

9. Inversion of Control (IoC) and IoC containers
● Inversion of control is used to increase modularity of the program
and make it extensible and flexible.
● The question is: "what aspect of control are we inverting?" The
IoC container takes the control over the object composition.

10. InversifyJS
A powerful lightweight inversion
of control container for JavaScript
apps powered by TypeScript

11. inversify.config.ts
The modules are unaware of each other but the
IoC container is aware of all the modules in the
application.
Coupling takes place in one unique place.

12. Declaring kernel modules
Kernel modules are used when your inversify.config.ts file becomes too large.

13. Declaring kernel middleware
The middleware is an extension point
for InversifyJS. It allows developers to
create plugins for InverifyJS.
The internal InversifyJS process:
1. Annotation phase
2. Planning phase
3. Middleware (optional)
4. Resolution phase
5. Activation handlers (optional)

14. Using concretions: Classes

15. Using abstractions: String literals
● We use string literals to represent interfaces at runtime
● String literals can lead to naming collisions be careful!

16. Using abstractions: Symbols
● Symbols helps us to avoid naming collisions
● Symbols might be generated by the TypeScript compiler in the future.
This would eliminate the need for manual annotations when using
interfaces!

17. Controlling the scope of the dependencies
The IoC container takes the control over the lifecycle of the dependencies.

18. Let’s take a look to some of the
InversifyJS features!

19. Injecting a value

20. Injecting a class constructor

21. Injecting a Factory

22. Auto-factory

23. Injecting a Provider (async Factory)

24. Activation handlers
Objects become unaware of cross-cutting concerns and the IoC
container takes the control over them!

25. Multi-injection

26. Contextual bindings: Tagged bindings
@named(“name”) is an alias of @tagged(“named”, “name”)

27. Contextual bindings: Named bindings

28. Create your own decorators
Useful when you are going to apply a @tagged decorator to many entities.

29. Contextual bindings: @paramName
Only needed if you are planning to compress your application.

30. Out of the box contextual constraints
InversifyJS includes out of the box implementations of the most common
contextual constraints.

31. Custom contextual constraints
InversifyJS includes some helpers to help you to declare contextual constraints.

32. Thanks!
$ npm install inversify@2.0.0-beta.1 --save
Beta available now!

33. Questions?

34. Thanks!
Want to learn more?
● http://inversify.io/
● @InversifyJS
● https://github.com/inversify/InversifyJS