Imagine for a moment

Transcription

1 Imagine for a moment

2

3

4

5

6

7 @trentmwillis

8

9

10

11 Lazy Loading Engines: Anything But Lazy

12 Engines allow multiple logical applications to be composed together into a single application from the user s perspective. - Engine RFC

13 Lazy Loading Engines.

14 Lazy Loading.

15 Lazy Loading. It s hard.

16 Lazy Loading. It s hard. But, Ember makes it easy.

17 Problem 1: Serializing URLs

18 How do we construct a URL to a lazily loaded route?

19 {{#link-to blog }} Blog {{/link-to}}

20 How to construct a URL Router + Model + Query Params + Route + Controller URL

21 How to construct a URL Router + Model + Query Params + Route + Controller URL

22 Problem 1: Serializing URLs

23 Problem 1: Serializing URLs Model Serialization w/o Routes Query Params w/o Controllers

24 Model Serialization w/o Routes

25 Router.map(function() { this.route('post', { path: /post/:post_id }); });

26 Route.extend({ serialize(model) { return { post_id: model.id }; } });

27 Route Serializer RFC emberjs/rfcs#120

28 [Replace] the existing Route#serialize method with an equivalent method on the options hash passed into this.route within Router#map.

29 Route.extend({ serialize(model) { return { post_id: model.id }; } });

30 function serialize(model) { return { post_id: model.id }; }

31 function serialize(model) { return { post_id: model.id }; } Router.map(function() { this.route('post', { path: /post/:post_id, serialize }); });

32 Query Params w/o Controllers

33 Default Query Param Values

34 Controller.extend({ queryparams: [ lang, locale ], lang: en });

35 Controller.extend({ queryparams: [ lang, locale ], lang: en }); serialize({ });

36 Controller.extend({ queryparams: [ lang, locale ], lang: en }); serialize({ lang: en, locale: uk });

37 Controller.extend({ queryparams: [ lang, locale ], lang: en }); serialize({ lang: en, locale: uk }); =>?locale=uk

38 Controller.extend({ queryparams: [ lang, locale ], lang: en }); serialize({ lang: en, locale: uk }); =>?locale=uk&lang=en

39 With lazy Engines, default query params are part of the URL

40 Problem 2: Link Scoping

41 {{link-to blog }}

42 Where does {{link-to blog }} go in an Engine?

43 {{link-to blog }}

44 {{link-to mountpoint.blog }}

45 To ensure isolation (and loosecoupling), links are scoped to an Engine s mount point.

46 How do you link outside the scope of an Engine?

47 Engine Linking RFC emberjs/rfcs#122

48 {{link-to-external home }} this.transitiontoexternal( home );

49 export default Engine.extend({ dependencies: { externalroutes: [ 'home', 'settings' ] } });

50 Ember.Application.extend({ engines: { myengine: { dependencies: { externalroutes: { home: 'home.index', settings: 'user.settings' } } } } });

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.

52 Engine: Hey App, I want to go to settings. Where is that?

53 Engine: Hey App, I want to go to settings. Where is that? Host: settings is located at user.settings.index.

54 Engine: Hey App, I want to go to settings. Where is that? Host: settings is located at user.settings.index. Engine: Thanks!

55 Problem 3: Loading Assets

56 Problem 3: Loading Assets What do we load? How do we load it?

57 What do we load?

58 Asset Manifest RFC emberjs/rfcs#153

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.

60 interface Asset { type: String; uri: String; }

61 type BundleName = string; interface Bundle { assets: Array<Asset>; dependencies?: Array<BundleName>; }

62 interface AssetManifest { } bundles: Map<BundleName, Bundle>;

63 Transforms (e.g., fingerprinting) Compositional Loading Extensibility Transferability

64 How do we load it?

65 Asset Loader RFC emberjs/rfcs#158

66 The Asset Loader service is an Ember Service that is responsible for loading assets specified in an Asset Manifest.

67 The API for loading these assets is Promise-based for integration with Router.js.

68 interface AssetLoader { pushmanifest(manifest: AssetManifest); };

69 interface AssetLoader { pushmanifest(manifest: AssetManifest); loadasset(asset: Asset): AssetPromise; };

70 interface AssetLoader { pushmanifest(manifest: AssetManifest); loadasset(asset: Asset): AssetPromise; loadbundle(bundle: BundleName): BundlePromise; };

71 interface AssetLoader { pushmanifest(manifest: AssetManifest); loadasset(asset: Asset): AssetPromise; loadbundle(bundle: BundleName): BundlePromise; defineloader(type: String, loader: (uri: String) => Promise<T, U>); };

72 interface AssetLoader { pushmanifest(manifest: AssetManifest); loadasset(asset: Asset): AssetPromise; loadbundle(bundle: BundleName): BundlePromise; defineloader(type: String, loader: (uri: String) => Promise<T, U>); };

73 Asset Manifest + Asset Loader - Ember Asset Loading Strategy

74 ember-asset-loader

75 Ember Engines

76 Ember Engines: A community-driven solution to lazy loading.

77 ember-engines.com github.com/ember-engines

78 Lazy Loading Engines: Anything But Lazy