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