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
Tweet

More Decks by Marco Otte-Witte

Other Decks in Programming

Transcript

  1. Ember.js Libraries
    and Addons

    View full-size slide

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

    View full-size slide

  3. Ember is great but there are a
    lot of libraries and addons
    already

    View full-size slide

  4. ember-animated-outlet
    https://github.com/billysbilling/ember-
    animated-outlet

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  9. How do those
    actually extend
    Ember?

    View full-size slide

  10. Ember can be extended on
    many levels

    View full-size slide

  11. Adding new classes to the
    Ember namespace

    View full-size slide

  12. //list-view/packages/list-view/lib/main.js
    import ListView from 'list-view/list_view';

    Ember.ListView = ListView;

    View full-size slide

  13. Reopening Ember's classes

    View full-size slide

  14. //ember-animated-outlet/src/js/router.js
    Ember.Router.reopen({

    transitionToAnimated: function(
    name, animations, model
    ) {

    },

    View full-size slide

  15. Registering Handlebars
    helpers

    View full-size slide

  16. //list-view/packages/list-view/lib/main.js
    import EmberList from 'list-view/helper';

    Ember.Handlebars.registerHelper(
    'ember-list', EmberList
    );

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  20. Demo
    Ember Simple Auth

    View full-size slide

  21. How are libraries
    and addons
    distributed?

    View full-size slide

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

    View full-size slide

  23. tags, using the Ember<br/>global<br/>

    View full-size slide

  24. install libraries or addons by
    adding another tag,<br/>use the exported global<br/>

    View full-size slide

  25. Demo
    Ember Simple Auth

    View full-size slide

  26. some build
    system using
    AMD

    View full-size slide

  27. install libraries or addons by
    adding the AMD distribution
    to the project

    View full-size slide

  28. require some module that
    sets the extension up

    View full-size slide

  29. Demo
    Ember Simple Auth

    View full-size slide

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

    View full-size slide

  31. Ember CLI 0.0.35 added the
    concept of addons

    View full-size slide

  32. install libraries or addons by
    installing the respective npm
    package
    npm install --save-dev ember-cli-simple-auth

    View full-size slide

  33. Ember CLI Addons have a
    special package.json property
    "ember-addon": {
    "main": "index"
    }

    View full-size slide

  34. Ember CLI Addons can define
    generators
    ember generate ember-cli-simple-auth

    View full-size slide

  35. Ember CLI Addons can
    implement build-time hooks

    View full-size slide

  36. everything in an addon's /app
    directory will be treated as
    part of the application

    View full-size slide

  37. Demo
    Ember Simple Auth

    View full-size slide

  38. Ember CLI can generate an
    Addon for you
    ember generate addon

    View full-size slide

  39. implement your
    own Ember
    libraries and
    addons!

    View full-size slide

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

    View full-size slide