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.

6254dc2b7e4f26b2ab5d05c560834671?s=128

Chris Ball

August 11, 2016
Tweet

Transcript

  1. EMBER ADDON DEEP DIVE Modifying the build process Chris Ball

    @cball_
  2. EMBER ADDONS?

  3. PACKAGES OF FUNCTIONALITY Add behavior and features to any Ember

    application.
  4. None
  5. BUILD-TIME VS RUN-TIME

  6. BUILD-TIME Modify the build process: add, remove, or modify files.

  7. RUN-TIME Most addons. Enhance the consuming app.

  8. BROCCOLI

  9. BUILD PIPELINE Broccoli is the workhorse in ember-cli for building

    assets.
  10. 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.
  11. OUR ADDON

  12. 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.
  13. FIND A REFERENCE To use as a guide. DOES THIS

    EXIST? If so, does it fit my use case?
  14. None
  15. None
  16. 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
  17. None
  18. BUILD A FEATURE: WARN ON MISSING KEYS

  19. WARNING! ENTERING NODE

  20. None
  21. None
  22. Index.js The entry point to addons.

  23. None
  24. None
  25. FIND A CLI HOOK Many could work, we're going to

    use preProcessTree.
  26. None
  27. None
  28. None
  29. BROCCOLI FUNNEL No need to run this over the whole

    app tree. Select only our locales folder, and process that.
  30. None
  31. None
  32. BROCCOLI MERGE TREES Take the normal app tree + our

    funnel tree and merge them.
  33. None
  34. None
  35. None
  36. BROCCOLI FILTER For each file in the tree, determine if

    it should be processed, and what the file contents should be.
  37. None
  38. None
  39. None
  40. None
  41. ADD DUMMY TRANSLATIONS Add translations to the dummy app inside

    the addon.
  42. None
  43. None
  44. None
  45. None
  46. None
  47. None
  48. ADD CONFIG Use the ember-cli-build file to pass config options

    to your addon.
  49. None
  50. BUILD A FEATURE: SYNC MISSING KEYS

  51. ADD A COMMAND Create a command definition, then add it

    to your index.js file.
  52. None
  53. HOW TO MAKE THIS BETTER?

  54. OPTIONAL THROW Add a setting to throw an error if

    any locales have missing keys.
  55. UI.STARTPROGRESS Use this.ui.startProgress(), and return a Promise in the command's

    run function.
  56. USE ES6 Node 4+ supports most of what you're used

    to: let, const, =>, etc. See http://node.green for info
  57. HOW TO MAKE THIS BETTER++?

  58. GENERATE TESTS Just like auto-generated JSHint tests in ember-cli.

  59. ember-cli-deploy Create a plugin that confirms deploy if missing or

    untranslated keys.
  60. MANAGEMENT PAGE Add server middleware that serves up a page

    to view translated progress, easily import and export files.
  61. BUILD-TIME ADDONS CAN BE WILD.

  62. BUT THEY SHOULDN'T BE SCARY.

  63. THANKS! Chris Ball @cball_ github.com/echobind/ember-cli-i18n-sync

  64. http://2.bp.blogspot.com/-BBHBXgzVoWA/T3DOgIRT60I/AAAAAAAAM6A/yXo4dShOq-o/s1600/lego %2Bminifigures%2Bseries%2B7.jpg http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/sign-warning-icon.png http://www.lakeshorelaments.com/wp-content/uploads/2009/03/bumper-bowling.jpg http://www.rocketwatcher.com/wp-content/uploads/2011/01/Funnel-mod.jpg IMAGE CREDITS