This presentation includes: Reflective injection using TypeScript, Reflect Metadata, Zone.js, Dependecny Injection, Angular, Decorators, Decorator Factories and etc.

1. REFLECTIVE INJECTION
using TypeScript

2. ABOUT ME {
'name': 'Ilia Idakiev',
'about': [
'Lecturer in 'Advanced JS' @ FMI',
'Developer / Manager / Owner @ HNS',
'Consultant'
],
'courses': [
'Angular Course 2016 @ HackBulgaria',
'Angular Course 2017 @ HackBulgaria',
'Advanced JS + Angular Course 2017 @ Innovative Labs'
],
'contacts': {
email: 'ilia.idakiev@gmail.com',
github: 'http://github.com/iliaidakiev/'
}
}

3. AGENDA
• Dependency Injection
• TypeScript Decorators
• Reflect-Metadata
• Reflective Injection
• Zone.js

4. COHESION
Cohesion measures the strength of relationship between pieces of
functionality within a given module / class

5. COHESIVE MODULES / CLASSES
• Represent a single entity
• They have a well defined role

6. THE GOAL IS HIGH COHESION

7. COUPLING
A measure of how closely connected two modules are

8. TIGHTVS LOOSE COUPLING

9. TIGHT COUPLING
• A change in one module usually forces
changes in other modules.
• Assembly of modules might require
more effort and time due to the
increased inter-module dependency.
• A particular module might be harder to
reuse and test because dependent
modules must be included.

10. THE GOAL IS LOOSE COUPLING

11. S.O.L.I.D.

12. DEPENDENCY INVERSION PRINCIPLE

13. DEPENDENCY INVERSION PRINCIPLE
High-level modules should not depend on low-level modules. Both
should depend on abstractions.

14. DEPENDENCY INJECTION
It's a coding pattern in which a class receives its dependencies from
external sources rather than creating them itself.

15. DEPENDENCY INJECTION PATTERN
• Easy to reuse in different environments
• Easy for testing

16. THE WIRING

17. THE WIRING
(MAINTENANCE)

18. DEPENDENCY INJECTION CONTAINER

19. DEPENDENCY INJECTION CONTAINER

20. ANGULAR DEPENDENCY INJECTION
• Providers
• Injectors
A provider provides the concrete, runtime version of a dependency value.
The injector relies on providers to create instances of the services that the
injector injects into components and other services.

21. CREATING AN INJECTOR

22. DEMO

23. TYPESCRIPT DECORATORS

24. TYPESCRIPT DECORATORS
• Decorators provide a way to add both annotations and a meta-
programming syntax for class declarations and members.
• Decorators are a stage 2 proposal for JavaScript and are available as
an experimental feature ofTypeScript (+ reflect-metadata library).
• Decorators are an experimental feature so we need to explicitly tell
the compiler that we want to enable them.

25. DEMO

26. THE COMPONENT DECORATOR

27. DEEP LOOK INTO COMPILED JAVASCRIPT

28. THE DECORATED CLASS

29. __DECORATE PRETTIFIED

30. __METADATA & __PARAM

31. REFLECT METADATA KEYS
• design:type
• design:paramtypes
• design:returntype

32. DEPENDENCY INJECTOR
+
REFLECT-METADATA
=
REFLECTIVE INJECTOR

33. DEMO

34. DECORATORS IN ANGULAR

35. ZONE.JS

36. WHAT IS A ZONE
• A zone is an execution context that persists across asynchronous tasks.
• It allows us to control execution of the code within the zone.

37. ZONES.JS
• The library monkey patches all the async browser APIs.
• Redirects all the async operations trough a zone of interception.
• Creates a <root> zone.
• Provides a global Zone object used for zone management.

38. DEMO

39. SLIDES & DEMOS
http://github.com/iliaidakiev/slides

40. THANKYOU!