Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Ember.js Module Loading
Or, how to almost certainly confuse yourself with limited terminology.
Explaining DI to a 5 year old
When you go and get things out of the refrigerator for yourself, you can
cause problems. You...
Ember’s Module Loader: Terms
● Owner - The object managing this object’s lifecycle
● Container - Manages the lifecycle of ...
Ember’s Module Loader
Server Client
ES Modules
AMD Modules
Ember’s Module Loader
Client
AMD Modules
Container
Registry
Resolver
Registry
ES Modules
Server
Ember’s Module Loader
Client
AMD Modules
Container
Registry
Resolver
Registry
ES Modules
Server
lookup(‘service:notes’)
de...
Ember’s Module Loader
Client
AMD Modules
Container
Registry
Resolver
Registry
ES Modules
Server
File / Filename
Factory / ...
Ember’s Module Loader: Register a Factory
// app/instance-initializers/storage.js
function storage(appInstance) {
appInsta...
Ember’s Module Loader: Customize the Resolver
// app/resolver.js
import Resolver from 'ember-resolver';
import Ember from ...
Two efforts: Glimmer/di, and Module Unification
● Use Ember-style DI without Ember ● Routable Components
● Local Lookup
● ...
Things you want to be the same
● Filenames on disk
● Semantics of the DI system
A few things that will improve
Ember’s Module Loader: Too much string manipulation
Client
AMD Modules
Container
Registry
Resolver
Registry
ES Modules
Ser...
Ember’s Module Loader: Too many lookup failures
appInstance.factoryFor('component:my-input');
app/components/my-input/comp...
Ember’s Module Loader: Too many lookup failures
appInstance.factoryFor('component:my-input');
app/components/my-input/comp...
Ember’s Module Loader: Too many lookup failures
At build time, compiles:
app/components/my-input/component.js with a defau...
Ember’s Module Loader: AMD
Client
AMD Modules
Container
Registry
Resolver
Registry
ES Modules
Server
Ember’s Module Loader: Better home for the resolver
Client
AMD Modules
Container
Registry
Resolver
Registry
ES Modules
Ser...
More goals
● TypeScript (can pass through types)
● Drop cruft
● More work during build time
The plan
● Integrate Glimmer/di into Ember behind a feature flag, replace its
current DI system
● Permit Ember apps on can...
Three Resolvers
● DefaultResolver - Lives in Ember, Globals
● Ember-Resolver - Comes with CLI, supports “classic” and pods...
Hard bits
● Ensure Ember and Glimmer/di use the same API, or code
● The build system, how can MU do more statically
● Cont...
Ember’s Module Loader
Client
AMD Modules
Container
Registry
Resolver
Registry
ES Modules
Server
Thanks
Go shave. @mixonic
Ember.js Module Loading
Ember.js Module Loading
Ember.js Module Loading
Ember.js Module Loading
Ember.js Module Loading
Upcoming SlideShare
Loading in …5
×

Ember.js Module Loading

429 views

Published on

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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Ember.js Module Loading

  1. 1. Ember.js Module Loading Or, how to almost certainly confuse yourself with limited terminology.
  2. 2. 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
  3. 3. 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)
  4. 4. Ember’s Module Loader Server Client ES Modules AMD Modules
  5. 5. Ember’s Module Loader Client AMD Modules Container Registry Resolver Registry ES Modules Server
  6. 6. Ember’s Module Loader Client AMD Modules Container Registry Resolver Registry ES Modules Server lookup(‘service:notes’) define(‘my-app/services/notes’, ...)
  7. 7. Ember’s Module Loader Client AMD Modules Container Registry Resolver Registry ES Modules Server File / Filename Factory / Module name Class / Fullname
  8. 8. 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 }
  9. 9. 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(); } } });
  10. 10. Two efforts: Glimmer/di, and Module Unification ● Use Ember-style DI without Ember ● Routable Components ● Local Lookup ● Addon Namespacing
  11. 11. Things you want to be the same ● Filenames on disk ● Semantics of the DI system
  12. 12. A few things that will improve
  13. 13. Ember’s Module Loader: Too much string manipulation Client AMD Modules Container Registry Resolver Registry ES Modules Server
  14. 14. Ember’s Module Loader: Too many lookup failures appInstance.factoryFor('component:my-input'); app/components/my-input/component app/components/my-input
  15. 15. 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
  16. 16. 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
  17. 17. Ember’s Module Loader: AMD Client AMD Modules Container Registry Resolver Registry ES Modules Server
  18. 18. Ember’s Module Loader: Better home for the resolver Client AMD Modules Container Registry Resolver Registry ES Modules Server Container Registry Resolver Registry
  19. 19. More goals ● TypeScript (can pass through types) ● Drop cruft ● More work during build time
  20. 20. 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
  21. 21. 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
  22. 22. 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
  23. 23. Ember’s Module Loader Client AMD Modules Container Registry Resolver Registry ES Modules Server
  24. 24. Thanks Go shave. @mixonic

×