Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Introducing Ember Engines

Dan Gebhardt
January 14, 2016

Introducing Ember Engines

An introduction to the ember-engines addon. Presented at the Boston Ember January 2016 meetup.

Dan Gebhardt

January 14, 2016
Tweet

More Decks by Dan Gebhardt

Other Decks in Programming

Transcript

  1. KEY BENEFITS OF ENGINES • Distributed development • Integrated routing

    • Ad hoc embedding • Clean boundaries • Lazy loading
  2. ENGINES & ENGINE INSTANCES • Engine • extended by Application

    • has a Registry and Initializers • EngineInstance • extended by ApplicationInstance • has a Registry, Container and InstanceInitializers
  3. PRIMARY TYPES OF ENGINES • Routable • define their own

    route map • can be mounted at any route • Route-less • can be mounted in any outlet
  4. import Engine from 'ember-engines/engine'; import Resolver from 'ember-engines/resolver'; export default

    Engine.extend({ modulePrefix: 'ember-blog-engine', Resolver }); addon/engine.js
  5. export default function() { this.route('new'); this.route('post', { path: 'posts/:id' },

    function() { this.route('comments'); } ); } addon/routes.js
  6. 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
  7. 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
  8. ROUTE-LESS ENGINES • Define Engine (engine.js) • Don't define a

    route map (routes.js) • Define an application template
 (addon/templates/application.hbs)
  9. 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
  10. 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
  11. App = Ember.Application.extend({ modulePrefix: config.modulePrefix, podModulePrefix: config.podModulePrefix, Resolver, engines: {

    emberBlogEngine: { dependencies: { services: [ 'store', {'session': 'user-session'} ] } } } }); app/app.js
  12. COMING SOON • Pushing work upstream • Lazy loading of

    engines • Testing, testing, testing ...
  13. TBD • Engine attributes • Namespaced access to engine from

    parent • Expanded dependency sharing • Synergies with routable components