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.

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.
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?
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
18. BUILD A FEATURE: WARN ON MISSING KEYS
19. WARNING! ENTERING NODE
22. Index.js The entry point to addons.
25. FIND A CLI HOOK Many could work, we're going to use preProcessTree.
29. BROCCOLI FUNNEL No need to run this over the whole app tree. Select only our locales folder, and process that.
32. BROCCOLI MERGE TREES Take the normal app tree + our funnel tree and merge them.
36. BROCCOLI FILTER For each file in the tree, determine if it should be processed, and what the file contents should be.
41. ADD DUMMY TRANSLATIONS Add translations to the dummy app inside the addon.
48. ADD CONFIG Use the ember-cli-build file to pass config options to your addon.
50. BUILD A FEATURE: SYNC MISSING KEYS
51. ADD A COMMAND Create a command definition, then add it to your index.js file.
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