EMBER ADDON DEEP DIVE
Modifying the build process
Chris Ball
@cball_
Slide 2
Slide 2 text
EMBER
ADDONS?
Slide 3
Slide 3 text
PACKAGES OF
FUNCTIONALITY
Add behavior and features to any
Ember application.
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
BUILD-TIME
VS
RUN-TIME
Slide 6
Slide 6 text
BUILD-TIME
Modify the build process: add,
remove, or modify files.
Slide 7
Slide 7 text
RUN-TIME
Most addons. Enhance the
consuming app.
Slide 8
Slide 8 text
BROCCOLI
Slide 9
Slide 9 text
BUILD PIPELINE
Broccoli is the workhorse in
ember-cli for building assets.
Slide 10
Slide 10 text
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.
Slide 11
Slide 11 text
OUR ADDON
Slide 12
Slide 12 text
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.
Slide 13
Slide 13 text
FIND A REFERENCE
To use as a guide.
DOES THIS EXIST?
If so, does it fit my use case?
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
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
Slide 17
Slide 17 text
No content
Slide 18
Slide 18 text
BUILD A
FEATURE:
WARN ON
MISSING KEYS
Slide 19
Slide 19 text
WARNING!
ENTERING NODE
Slide 20
Slide 20 text
No content
Slide 21
Slide 21 text
No content
Slide 22
Slide 22 text
Index.js
The entry point to addons.
Slide 23
Slide 23 text
No content
Slide 24
Slide 24 text
No content
Slide 25
Slide 25 text
FIND A CLI HOOK
Many could work, we're going to
use preProcessTree.
Slide 26
Slide 26 text
No content
Slide 27
Slide 27 text
No content
Slide 28
Slide 28 text
No content
Slide 29
Slide 29 text
BROCCOLI FUNNEL
No need to run this over the whole
app tree. Select only our locales
folder, and process that.
Slide 30
Slide 30 text
No content
Slide 31
Slide 31 text
No content
Slide 32
Slide 32 text
BROCCOLI MERGE TREES
Take the normal app tree + our
funnel tree and merge them.
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
No content
Slide 35
Slide 35 text
No content
Slide 36
Slide 36 text
BROCCOLI FILTER
For each file in the tree, determine
if it should be processed, and what
the file contents should be.
Slide 37
Slide 37 text
No content
Slide 38
Slide 38 text
No content
Slide 39
Slide 39 text
No content
Slide 40
Slide 40 text
No content
Slide 41
Slide 41 text
ADD DUMMY
TRANSLATIONS
Add translations to the dummy
app inside the addon.
Slide 42
Slide 42 text
No content
Slide 43
Slide 43 text
No content
Slide 44
Slide 44 text
No content
Slide 45
Slide 45 text
No content
Slide 46
Slide 46 text
No content
Slide 47
Slide 47 text
No content
Slide 48
Slide 48 text
ADD CONFIG
Use the ember-cli-build file to pass
config options to your addon.
Slide 49
Slide 49 text
No content
Slide 50
Slide 50 text
BUILD A
FEATURE:
SYNC
MISSING KEYS
Slide 51
Slide 51 text
ADD A COMMAND
Create a command definition, then
add it to your index.js file.
Slide 52
Slide 52 text
No content
Slide 53
Slide 53 text
HOW TO
MAKE THIS
BETTER?
Slide 54
Slide 54 text
OPTIONAL THROW
Add a setting to throw an error if
any locales have missing keys.
Slide 55
Slide 55 text
UI.STARTPROGRESS
Use this.ui.startProgress(), and
return a Promise in the
command's run function.
Slide 56
Slide 56 text
USE ES6
Node 4+ supports most of what
you're used to: let, const, =>, etc.
See http://node.green for info
Slide 57
Slide 57 text
HOW TO
MAKE THIS
BETTER++?
Slide 58
Slide 58 text
GENERATE TESTS
Just like auto-generated JSHint
tests in ember-cli.
Slide 59
Slide 59 text
ember-cli-deploy
Create a plugin that confirms
deploy if missing or untranslated
keys.
Slide 60
Slide 60 text
MANAGEMENT PAGE
Add server middleware that serves
up a page to view translated
progress, easily import and export
files.
Slide 61
Slide 61 text
BUILD-TIME
ADDONS
CAN BE WILD.
Slide 62
Slide 62 text
BUT THEY
SHOULDN'T
BE SCARY.
Slide 63
Slide 63 text
THANKS!
Chris Ball
@cball_
github.com/echobind/ember-cli-i18n-sync