Dependency Injection with Ember

Let's discover or rediscover the Dependency Injection pattern, then look how it can be used in Ember to inject in custom objects.

Transcript

1. Dependency Injection with Ember Dependency Injection with Ember — @pbernery — Sêmeia
3. Service injection // my-component.js export default class MyComponent extends Component { @service router; [...] }
4. How to inject in a custom object? // alpha-object.js export default class OscarObject { @service sierraService; // does not work out of the box }
5. What is Dependency Injection?
6. Coupled code // coolness-component.js export default class CoolnessComponent extends Component { get coolness() { const result = await fetch(`https://ex.co/coolness?dev=${this.developer}`); return result.data.firstObject; } }
7. Coupled code // coolness-component.js export default class CoolnessComponent extends Component { get coolness() { const result = await fetch(`https://ex.co/coolness?dev=${this.developer}`); return result.data.firstObject; } }
8. Isolated code // coolness-component.js export default class CoolnessComponent extends Component { init() { this.categorizer = new CoolnessFetcher(); } get coolness() { return this.categorizer.coolness(this.developer); } }
9. Isolated and decoupled code // coolness-component.js export default class CoolnessComponent extends Component { // this.categorizer is a component param get category() { return this.categorizer.coolness(this.developer); } }
10. Dependency Inversion
11. // coolness-component.js export default class CoolnessComponent extends Component { get category() { return this.categorizer.coolness(this.developer); } } <!-- template_tango.hbs --> <CoolnessComponent @categorizer={{this.categorizer}} /> <!-- template_zoulou.hbs --> <CoolnessComponent @categorizer={{this.categorizer}} />
12. // coolness-component.js // global dependencies; export default class CoolnessComponent extends Component { get category() { const categorizer = dependencies.getInstanceOf("categorizer"); return categorizer.coolness(this.developer); } }
13. // dependencies.js class Dependencies { getInstanceOf(type) { switch(type) { case 'categorizer': return new CoolnessFetcher(); } } } export default new Dependencies();
14. // dependencies.js class Dependencies { // @param {string} type - a type identifier // @param {() => any} factory - a function returning an object register(type, factory) { this.factories[type] = factory; } getInstanceOf(type) { const factory = this.factories[type]; return factory(); } } export default new Dependencies();
15. // dependencies.js class Dependencies { // @param {string} type - a type identifier // @param {() => any} factory - a function returning an object register(type, factory) { this.factories[type] = factory; } getInstanceOf(type) { const factory = this.factories[type]; return factory(); } } export default new Dependencies();
16. // dependencies.js class Dependencies { // @param {string} type - a type identifier // @param {() => any} factory - a function returning an object register(type, factory) { this.factories[type] = factory; } getInstanceOf(type) { const factory = this.factories[type]; return factory(); } } export default new Dependencies();
17. // coolness-component.js export default class CoolnessComponent extends Component { get category() { return this.categorizer.coolness(this.developer); } } <!-- template_tango.hbs --> <CoolnessComponent @categorizer={{this.categorizer}} /> <!-- template_zoulou.hbs --> <CoolnessComponent @categorizer={{this.categorizer}} />
18. // coolness-component.js export default class CoolnessComponent extends Component { get category() { const categorizer = dependencies.getInstanceOf("categorizer"); return categorizer.coolness(this.developer); } } <!-- template_tango.hbs --> <CoolnessComponent /> <!-- template_zoulou.hbs --> <CoolnessComponent />
19. // initializers/my-app.js export default { initialize() { dependencies.register("categorizer", () => { return new CoolnessFetcher(); }); } }
20. Dependency Injection
22. How to inject in a custom object?
23. // form-india.js class FormIndia { @service store; // does not work out of the box }
24. // initializers/my-app.js export default { initialize(registry) { registry.register('form:india', FormIndia); } }
25. // form-india.js class FormIndia extends EmberObject { @service store; }
26. // india-component.js export default IndiaComponent extends Component { get form() { return new FormIndia(); } }
27. // india-component.js import { getOwner } from '@ember/application'; export default IndiaComponent extends Component { get form() { let container = getOwner(this); return container.lookup('form:india'); } }
28. Merci ! Questions ?
29. References Ember Guides: Dependency injection Dependency inversion principle Dependency injection