SLIDE 1
Imagine for a moment @trentmwillis Lazy Loading Engines: Anything - - PowerPoint PPT Presentation
Imagine for a moment @trentmwillis Lazy Loading Engines: Anything - - PowerPoint PPT Presentation
Imagine for a moment @trentmwillis Lazy Loading Engines: Anything But Lazy Engines allow multiple logical applications to be composed together into a single application from the users perspective. - Engine RFC Lazy Loading Engines.
SLIDE 2
SLIDE 3
SLIDE 4
SLIDE 5
SLIDE 6
SLIDE 7
@trentmwillis
SLIDE 8
SLIDE 9
SLIDE 10
SLIDE 11
Lazy Loading Engines: Anything But Lazy
SLIDE 12
Engines allow multiple logical applications to be composed together into a single application from the user’s perspective.
- Engine RFC
SLIDE 13
Lazy Loading Engines.
SLIDE 14
Lazy Loading.
SLIDE 15
Lazy Loading. It’s hard.
SLIDE 16
Lazy Loading. It’s hard. But, Ember makes it easy.
SLIDE 17
Problem 1: Serializing URLs
SLIDE 18
How do we construct a URL to a lazily loaded route?
SLIDE 19
{{#link-to “blog”}} Blog {{/link-to}}
SLIDE 20
How to construct a URL Router + Model + Query Params + Route + Controller ——————— URL
SLIDE 21
How to construct a URL Router + Model + Query Params + Route + Controller ——————— URL
SLIDE 22
Problem 1: Serializing URLs
SLIDE 23
Problem 1: Serializing URLs ————————————— Model Serialization w/o Routes Query Params w/o Controllers
SLIDE 24
Model Serialization w/o Routes
SLIDE 25
Router.map(function() { this.route('post', { path: ‘/post/:post_id’ }); });
SLIDE 26
Route.extend({ serialize(model) { return { post_id: model.id }; } });
SLIDE 27
Route Serializer RFC emberjs/rfcs#120
SLIDE 28
[Replace] the existing Route#serialize method with an equivalent method
- n the options hash passed into
this.route within Router#map.
SLIDE 29
Route.extend({ serialize(model) { return { post_id: model.id }; } });
SLIDE 30
function serialize(model) { return { post_id: model.id }; }
SLIDE 31
function serialize(model) { return { post_id: model.id }; } Router.map(function() { this.route('post', { path: ‘/post/:post_id’, serialize }); });
SLIDE 32
Query Params w/o Controllers
SLIDE 33
Default Query Param Values
SLIDE 34
Controller.extend({ queryParams: [‘lang’, ‘locale’], lang: ‘en’ });
SLIDE 35
Controller.extend({ queryParams: [‘lang’, ‘locale’], lang: ‘en’ }); serialize({ });
SLIDE 36
Controller.extend({ queryParams: [‘lang’, ‘locale’], lang: ‘en’ }); serialize({ lang: ‘en’, locale: ‘uk’ });
SLIDE 37
Controller.extend({ queryParams: [‘lang’, ‘locale’], lang: ‘en’ }); serialize({ lang: ‘en’, locale: ‘uk’ }); => ?locale=uk
SLIDE 38
Controller.extend({ queryParams: [‘lang’, ‘locale’], lang: ‘en’ }); serialize({ lang: ‘en’, locale: ‘uk’ }); => ?locale=uk&lang=en
SLIDE 39
With lazy Engines, default query params are part of the URL
SLIDE 40
Problem 2: Link Scoping
SLIDE 41
{{link-to “blog”}}
SLIDE 42
Where does
{{link-to “blog”}}
go in an Engine?
SLIDE 43
{{link-to “blog”}}
SLIDE 44
{{link-to “mountPoint.blog”}}
SLIDE 45
To ensure isolation (and loose- coupling), links are scoped to an Engine’s mount point.
SLIDE 46
How do you link outside the scope of an Engine?
SLIDE 47
Engine Linking RFC emberjs/rfcs#122
SLIDE 48
{{link-to-external “home”}} this.transitionToExternal(‘home’);
SLIDE 49
export default Engine.extend({ dependencies: { externalRoutes: [ 'home', 'settings' ] } });
SLIDE 50
Ember.Application.extend({ engines: { myEngine: { dependencies: { externalRoutes: { home: 'home.index', settings: 'user.settings' } } } } });
SLIDE 51
With {{link-to-external}} you are specifying what you want to go to. It is the consumer’s responsibility to tell you where that is.
SLIDE 52
Engine: Hey App, I want to go to “settings”. Where is that?
SLIDE 53
Engine: Hey App, I want to go to “settings”. Where is that? Host: “settings” is located at “user.settings.index”.
SLIDE 54
Engine: Hey App, I want to go to “settings”. Where is that? Host: “settings” is located at “user.settings.index”. Engine: Thanks!
SLIDE 55
Problem 3: Loading Assets
SLIDE 56
Problem 3: Loading Assets ———————————— What do we load? How do we load it?
SLIDE 57
What do we load?
SLIDE 58
Asset Manifest RFC emberjs/rfcs#153
SLIDE 59
The Asset Manifest is a JSON specification to describe assets and bundles of assets that can be loaded into an Ember application asynchronously at runtime.
SLIDE 60
interface Asset { type: String; uri: String; }
SLIDE 61
type BundleName = string; interface Bundle { assets: Array<Asset>; dependencies?: Array<BundleName>; }
SLIDE 62
interface AssetManifest { bundles: Map<BundleName, Bundle>; }
SLIDE 63
Transforms (e.g., fingerprinting) Compositional Loading Extensibility Transferability
SLIDE 64
How do we load it?
SLIDE 65
Asset Loader RFC emberjs/rfcs#158
SLIDE 66
The Asset Loader service is an Ember Service that is responsible for loading assets specified in an Asset Manifest.
SLIDE 67
The API for loading these assets is Promise-based for integration with Router.js.
SLIDE 68
interface AssetLoader { pushManifest(manifest: AssetManifest); };
SLIDE 69
interface AssetLoader { pushManifest(manifest: AssetManifest); loadAsset(asset: Asset): AssetPromise; };
SLIDE 70
interface AssetLoader { pushManifest(manifest: AssetManifest); loadAsset(asset: Asset): AssetPromise; loadBundle(bundle: BundleName): BundlePromise; };
SLIDE 71
interface AssetLoader { pushManifest(manifest: AssetManifest); loadAsset(asset: Asset): AssetPromise; loadBundle(bundle: BundleName): BundlePromise; defineLoader(type: String, loader: (uri: String) => Promise<T, U>); };
SLIDE 72
interface AssetLoader { pushManifest(manifest: AssetManifest); loadAsset(asset: Asset): AssetPromise; loadBundle(bundle: BundleName): BundlePromise; defineLoader(type: String, loader: (uri: String) => Promise<T, U>); };
SLIDE 73
Asset Manifest + Asset Loader —————————————- Ember Asset Loading Strategy
SLIDE 74
ember-asset-loader
SLIDE 75
Ember Engines
SLIDE 76
Ember Engines: A community-driven solution to lazy loading.
SLIDE 77
ember-engines.com github.com/ember-engines
SLIDE 78