Introducing Ember Engines

Slide 1

Slide 1 text

Dan Gebhardt @dgeb INTRODUCING  EMBER-ENGINES Boston Ember January 2016

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

A collaboration between:

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

Namespacing Isolation Dependency sharing Lazy loading Routing

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

KEY BENEFITS OF ENGINES • Distributed development • Integrated routing • Ad hoc embedding • Clean boundaries • Lazy loading

Slide 11

Slide 11 text

ENGINES & ENGINE INSTANCES • Engine • extended by Application • has a Registry and Initializers • EngineInstance • extended by ApplicationInstance • has a Registry, Container and InstanceInitializers

Slide 12

Slide 12 text

PRIMARY TYPES OF ENGINES • Routable • deﬁne their own route map • can be mounted at any route • Route-less • can be mounted in any outlet

Slide 13

Slide 13 text

ENGINE PROJECTS • Standalone addons • In-repo addons

Slide 14

Slide 14 text

CREATING A STANDALONE ROUTABLE ENGINE

Slide 15

Slide 15 text

$ ember addon ember-blog-engine Coming soon: ember engine

Slide 16

Slide 16 text

$ rm -rf bower_components $ bower install --save ember#canary $ bower install

Slide 17

Slide 17 text

$ ember install ember-engines

Slide 18

Slide 18 text

import Engine from 'ember-engines/engine'; import Resolver from 'ember-engines/resolver'; export default Engine.extend({ modulePrefix: 'ember-blog-engine', Resolver }); addon/engine.js

Slide 19

Slide 19 text

export default function() { this.route('new'); this.route('post', { path: 'posts/:id' }, function() { this.route('comments'); } ); } addon/routes.js

Slide 20

Slide 20 text

Blog

{{#link-to "new"}}New Post{{/link-to}}

addon/templates/application.hbs

Slide 21

Slide 21 text

CONSUMING A STANDALONE ROUTABLE ENGINE

Slide 22

Slide 22 text

$ rm -rf bower_components $ bower install --save ember#canary $ bower install

Slide 23

Slide 23 text

$ ember install ember-blog-engine

Slide 24

Slide 24 text

import Ember from 'ember'; import Resolver from 'ember-engines/resolver'; import loadInitializers from 'ember/load-initializers'; import config from './config/environment'; let App; Ember.MODEL_FACTORY_INJECTIONS = true; App = Ember.Application.extend({ modulePrefix: config.modulePrefix, podModulePrefix: config.podModulePrefix, Resolver }); loadInitializers(App, config.modulePrefix); export default App; app/app.js

Slide 25

Slide 25 text

import Ember from 'ember'; import config from './config/environment'; const Router = Ember.Router.extend({ location: config.locationType }); Router.map(function() { this.mount('ember-blog-engine', {as: 'blog'}); }); export default Router; app/router.js

Slide 26

Slide 26 text

{{#link-to "blog.new"}}New Post{{/link-to}}

app/templates/application.hbs

Slide 27

Slide 27 text

CREATING A ROUTE-LESS ENGINE

Slide 28

Slide 28 text

ROUTE-LESS ENGINES • Define Engine (engine.js) • Don't define a route map (routes.js) • Define an application template  (addon/templates/application.hbs)

Slide 29

Slide 29 text

CONSUMING A ROUTE-LESS ENGINE

Slide 30

Slide 30 text

Chat app

app/templates/application.hbs

Slide 31

Slide 31 text

import Ember from 'ember'; export default Ember.Route.extend({ renderTemplate() { this._super(...arguments); // Mount the chat engine in the sidebar this.mount('ember-chat', { into: 'routeless-engine-demo', outlet: 'sidebar' }); } }); app/routes/application.js

Slide 32

Slide 32 text

CREATING AN IN-REPO ENGINE

Slide 33

Slide 33 text

$ ember g in-repo-addon ember-chat Coming soon: ember g in-repo-engine

Slide 34

Slide 34 text

DEPENDENCY SHARING

Slide 35

Slide 35 text

import Engine from 'ember-engines/engine'; import Resolver from 'ember-engines/resolver'; export default Engine.extend({ modulePrefix: 'ember-blog-engine', Resolver, dependencies: { services: [ 'store', 'session' ] } }); addon/engine.js

Slide 36

Slide 36 text

App = Ember.Application.extend({ modulePrefix: config.modulePrefix, podModulePrefix: config.podModulePrefix, Resolver, engines: { emberBlogEngine: { dependencies: { services: [ 'store', {'session': 'user-session'} ] } } } }); app/app.js

Slide 37

Slide 37 text

WHAT'S NEXT?

Slide 38

Slide 38 text

COMING SOON • Pushing work upstream • Lazy loading of engines • Testing, testing, testing ...

Slide 39

Slide 39 text

TBD • Engine attributes • Namespaced access to engine from parent • Expanded dependency sharing • Synergies with routable components

Slide 40

Slide 40 text

References Engines RFC: https://github.com/emberjs/rfcs/pull/10 ember-engines addon: https://github.com/dgeb/ember-engines ember-blog-engine simple demo: https://github.com/dgeb/ember-blog-engine

Slide 41

Slide 41 text

Thanks! @dgeb Boston Ember January 2016