Introducing Ember Engines

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