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
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)
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
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