Introducing Ember Engines

E01ec1de2f7783812d2235a6a9aaaeea?s=47 Dan Gebhardt
January 14, 2016

Introducing Ember Engines

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

E01ec1de2f7783812d2235a6a9aaaeea?s=128

Dan Gebhardt

January 14, 2016
Tweet

Transcript

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

  2. None
  3. None
  4. A collaboration between:

  5. None
  6. None
  7. None
  8. Namespacing Isolation Dependency sharing Lazy loading Routing

  9. None
  10. KEY BENEFITS OF ENGINES • Distributed development • Integrated routing

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

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

    route map • can be mounted at any route • Route-less • can be mounted in any outlet
  13. ENGINE PROJECTS • Standalone addons • In-repo addons

  14. CREATING A STANDALONE ROUTABLE ENGINE

  15. $ ember addon ember-blog-engine Coming soon: ember engine <engine-name>

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

    bower install
  17. $ ember install ember-engines

  18. import Engine from 'ember-engines/engine'; import Resolver from 'ember-engines/resolver'; export default

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

    function() { this.route('comments'); } ); } addon/routes.js
  20. <h2>Blog</h2> <div class="nav-bar"> {{#link-to "new"}}New Post{{/link-to}} </div> addon/templates/application.hbs

  21. CONSUMING A STANDALONE ROUTABLE ENGINE

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

    bower install
  23. $ ember install ember-blog-engine

  24. 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
  25. 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
  26. <div class="nav-bar"> {{#link-to "blog.new"}}New Post{{/link-to}} </div> app/templates/application.hbs

  27. CREATING A ROUTE-LESS ENGINE

  28. ROUTE-LESS ENGINES • Define Engine (engine.js) • Don't define a

    route map (routes.js) • Define an application template
 (addon/templates/application.hbs)
  29. CONSUMING A ROUTE-LESS ENGINE

  30. <div class="sidebar"> <h3>Chat app</h3> {{mount "ember-chat"}} </div> app/templates/application.hbs

  31. 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
  32. CREATING AN IN-REPO ENGINE

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

    <name>
  34. DEPENDENCY SHARING

  35. 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
  36. App = Ember.Application.extend({ modulePrefix: config.modulePrefix, podModulePrefix: config.podModulePrefix, Resolver, engines: {

    emberBlogEngine: { dependencies: { services: [ 'store', {'session': 'user-session'} ] } } } }); app/app.js
  37. WHAT'S NEXT?

  38. COMING SOON • Pushing work upstream • Lazy loading of

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

    parent • Expanded dependency sharing • Synergies with routable components
  40. 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
  41. Thanks! @dgeb Boston Ember January 2016