From the Ember LA meetup in March 2017. This presentation discussed dependency injection in Ember.js as well as the module unification and Glimmer/di projects. Some demos of Ember DI live-coded during the talk can be found here: https://github.com/mixonic/ember-dependency-injection-demo

1. Ember.js Module Loading
Or, how to almost certainly confuse yourself with limited terminology.

4. Explaining DI to a 5 year old
When you go and get things out of the refrigerator for yourself, you can
cause problems. You might leave the door open, you might get
something Mommy or Daddy doesn't want you to have. You might even
be looking for something we don't even have or which has expired.
What you should be doing is stating a need, "I need something to drink
with lunch," and then we will make sure you have something when you sit
down to eat.
John Munsch, StackOverflow

6. Ember’s Module Loader: Terms
● Owner - The object managing this object’s lifecycle
● Container - Manages the lifecycle of instances
● Registry - Stores options, injections, and factories
● Resolver - Resolves a fullName (type:name) to a specifier (filename)
● Module Registry - Fetch a specifier (e.g. from AMD)

7. Ember’s Module Loader
Server Client
ES Modules
AMD Modules

8. Ember’s Module Loader
Client
AMD Modules
Container
Registry
Resolver
Registry
ES Modules
Server

9. Ember’s Module Loader
Client
AMD Modules
Container
Registry
Resolver
Registry
ES Modules
Server
lookup(‘service:notes’)
define(‘my-app/services/notes’, ...)

10. Ember’s Module Loader
Client
AMD Modules
Container
Registry
Resolver
Registry
ES Modules
Server
File / Filename
Factory / Module name
Class / Fullname

11. Ember’s Module Loader: Register a Factory
// app/instance-initializers/storage.js
function storage(appInstance) {
appInstance.register('service:storage', window.localStorage);
}
export default {
name: 'storage',
initialize
}

12. Ember’s Module Loader: Customize the Resolver
// app/resolver.js
import Resolver from 'ember-resolver';
import Ember from 'ember';
export default Resolver.extend({
resolve(fullName) {
let factory = this._super(...arguments);
if (!factory && fullName.indexOf('service:') === 0) {
return Ember.Service.extend();
}
}
});

14. Two efforts: Glimmer/di, and Module Unification
● Use Ember-style DI without Ember ● Routable Components
● Local Lookup
● Addon Namespacing

15. Things you want to be the same
● Filenames on disk
● Semantics of the DI system

16. A few things that will improve

17. Ember’s Module Loader: Too much string manipulation
Client
AMD Modules
Container
Registry
Resolver
Registry
ES Modules
Server

18. Ember’s Module Loader: Too many lookup failures
appInstance.factoryFor('component:my-input');
app/components/my-input/component
app/components/my-input

19. Ember’s Module Loader: Too many lookup failures
appInstance.factoryFor('component:my-input');
app/components/my-input/component
app/components/my-input
app/pods/components/my-input/component
app/pods/components/my-input

20. Ember’s Module Loader: Too many lookup failures
At build time, compiles:
app/components/my-input/component.js with a default export
app/components/my-input.js with a named export
To an "absolute specifier"
component:/app/components/my-input

21. Ember’s Module Loader: AMD
Client
AMD Modules
Container
Registry
Resolver
Registry
ES Modules
Server

22. Ember’s Module Loader: Better home for the resolver
Client
AMD Modules
Container
Registry
Resolver
Registry
ES Modules
Server
Container
Registry
Resolver
Registry

23. More goals
● TypeScript (can pass through types)
● Drop cruft
● More work during build time

24. The plan
● Integrate Glimmer/di into Ember behind a feature flag, replace its
current DI system
● Permit Ember apps on canary to use Glimmer/resolver to support
Module Unification
● Build a version of the Ember Resolver that supports both classic and
Module Unification lookup

25. Three Resolvers
● DefaultResolver - Lives in Ember, Globals
● Ember-Resolver - Comes with CLI, supports “classic” and pods
○ We want to add a “migrate” resolver to this
● Glimmer/resolver - Opt-in

26. Hard bits
● Ensure Ember and Glimmer/di use the same API, or code
● The build system, how can MU do more statically
● Continue to support the current Ember Resolver API
● Continue to support the current Ember CLI Resolver
● Deprecate the globals mode resolver

27. Ember’s Module Loader
Client
AMD Modules
Container
Registry
Resolver
Registry
ES Modules
Server

29. Thanks
Go shave. @mixonic