Introducing Ember Engines

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

Transcript

1. Dan Gebhardt @dgeb INTRODUCING
 EMBER-ENGINES Boston Ember January 2016
4. A collaboration between:
8. Namespacing Isolation Dependency sharing Lazy loading Routing
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