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

Ember Addon Deep Dive: Modifying the Build Process

Ember Addon Deep Dive: Modifying the Build Process

n this talk, we'll look at creating an Ember addon that changes the ember-cli build process. Good examples of existing addons that do this are ember-cli-babel and ember-cli-code-coverage.

We'll walk through developing an addon that automatically warns us if we have missing keys in our translation files. We'll also add a command that lets us sync the keys and get them ready to send for translation.

We'll talk about Broccoli, ember-cli hooks, and how we can take this a step further with a built-in management page and ember-cli-deploy.

Chris Ball

August 11, 2016

More Decks by Chris Ball

Other Decks in Programming


  1. BEFORE ADDONS It was very common to need to manually

    configure Broccoli. NOW Most Broccoli configuration lives in addons; you might not need to touch it.
  2. TASK: HELP MANAGE I18N KEYS Managing translation files can be

    a bit of a pain. Let's create an addon that helps us update locales with new keys for translation.
  3. FIND A REFERENCE To use as a guide. DOES THIS

    EXIST? If so, does it fit my use case?
  4. CREATE ADDON Don't forget to upgrade ember-cli first! Naming conventions:

    - cli in the name = build-time - no cli in the name = run-time
  5. BROCCOLI FUNNEL No need to run this over the whole

    app tree. Select only our locales folder, and process that.
  6. BROCCOLI FILTER For each file in the tree, determine if

    it should be processed, and what the file contents should be.
  7. OPTIONAL THROW Add a setting to throw an error if

    any locales have missing keys.
  8. USE ES6 Node 4+ supports most of what you're used

    to: let, const, =>, etc. See http://node.green for info
  9. MANAGEMENT PAGE Add server middleware that serves up a page

    to view translated progress, easily import and export files.