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

Ember Libraries and Addons

Ember Libraries and Addons

Talk about how Ember extension libraries and addons extend the core framework and are distributed so they can be installed easily.


Marco Otte-Witte

October 23, 2014


  1. Ember.js Libraries and Addons

  2. Marco Otte-Witte http://simplabs.com

  3. None
  4. Ember is great but there are a lot of libraries

    and addons already
  5. ember-animated-outlet https://github.com/billysbilling/ember- animated-outlet

  6. ember-data https://github.com/emberjs/data

  7. epf https://github.com/getoutreach/epf

  8. list-view https://github.com/emberjs/list-view

  9. Ember Simple Auth https://github.com/simplabs/ember-simple-auth

  10. How do those actually extend Ember?

  11. Ember can be extended on many levels

  12. Adding new classes to the Ember namespace

  13. //list-view/packages/list-view/lib/main.js import ListView from 'list-view/list_view'; … Ember.ListView = ListView; …

  14. Reopening Ember's classes

  15. //ember-animated-outlet/src/js/router.js Ember.Router.reopen({ … transitionToAnimated: function( name, animations, model ) {

    … }, …
  16. Registering Handlebars helpers

  17. //list-view/packages/list-view/lib/main.js import EmberList from 'list-view/helper'; … Ember.Handlebars.registerHelper( 'ember-list', EmberList );

  18. injecting functionality into an application's objects via the container

  19. the container is Ember's dependency injection implementation http://emberjs.com/guides/understanding- ember/dependency-injection-and-service- lookup/

  20. injecting functionality into an application's objects via the container

  21. Demo Ember Simple Auth

  22. How are libraries and addons distributed?

  23. There are basically 3 ways to build an Ember application

  24. Globals

  25. <script> tags, using the Ember global

  26. install libraries or addons by adding another <script> tag, use

    the exported global
  27. Demo Ember Simple Auth

  28. some build system using AMD

  29. install libraries or addons by adding the AMD distribution to

    the project
  30. require some module that sets the extension up

  31. Demo Ember Simple Auth

  32. Ember CLI (this is what you should be using)

  33. Ember CLI 0.0.35 added the concept of addons

  34. install libraries or addons by installing the respective npm package

    npm install --save-dev ember-cli-simple-auth
  35. Ember CLI Addons have a special package.json property "ember-addon": {

    "main": "index" }
  36. Ember CLI Addons can define generators ember generate ember-cli-simple-auth

  37. Ember CLI Addons can implement build-time hooks

  38. everything in an addon's /app directory will be treated as

    part of the application
  39. Demo Ember Simple Auth

  40. Ember CLI can generate an Addon for you ember generate

    addon <my-addon>
  41. implement your own Ember libraries and addons!

  42. …and use the Ember CLI Addon mechanism to do it

  43. Thanks

  44. Q&A