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
Tweet

More Decks by Chris Ball

Other Decks in Programming

Transcript

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

    View Slide

  2. EMBER
    ADDONS?

    View Slide

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

    View Slide

  4. View Slide

  5. BUILD-TIME
    VS
    RUN-TIME

    View Slide

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

    View Slide

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

    View Slide

  8. BROCCOLI

    View Slide

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

    View Slide

  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.

    View Slide

  11. OUR ADDON

    View Slide

  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.

    View Slide

  13. FIND A REFERENCE
    To use as a guide.
    DOES THIS EXIST?
    If so, does it fit my use case?

    View Slide

  14. View Slide

  15. View Slide

  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

    View Slide

  17. View Slide

  18. BUILD A
    FEATURE:
    WARN ON
    MISSING KEYS

    View Slide

  19. WARNING!
    ENTERING NODE

    View Slide

  20. View Slide

  21. View Slide

  22. Index.js
    The entry point to addons.

    View Slide

  23. View Slide

  24. View Slide

  25. FIND A CLI HOOK
    Many could work, we're going to
    use preProcessTree.

    View Slide

  26. View Slide

  27. View Slide

  28. View Slide

  29. BROCCOLI FUNNEL
    No need to run this over the whole
    app tree. Select only our locales
    folder, and process that.

    View Slide

  30. View Slide

  31. View Slide

  32. BROCCOLI MERGE TREES
    Take the normal app tree + our
    funnel tree and merge them.

    View Slide

  33. View Slide

  34. View Slide

  35. View Slide

  36. BROCCOLI FILTER
    For each file in the tree, determine
    if it should be processed, and what
    the file contents should be.

    View Slide

  37. View Slide

  38. View Slide

  39. View Slide

  40. View Slide

  41. ADD DUMMY
    TRANSLATIONS
    Add translations to the dummy
    app inside the addon.

    View Slide

  42. View Slide

  43. View Slide

  44. View Slide

  45. View Slide

  46. View Slide

  47. View Slide

  48. ADD CONFIG
    Use the ember-cli-build file to pass
    config options to your addon.

    View Slide

  49. View Slide

  50. BUILD A
    FEATURE:
    SYNC
    MISSING KEYS

    View Slide

  51. ADD A COMMAND
    Create a command definition, then
    add it to your index.js file.

    View Slide

  52. View Slide

  53. HOW TO
    MAKE THIS
    BETTER?

    View Slide

  54. OPTIONAL THROW
    Add a setting to throw an error if
    any locales have missing keys.

    View Slide

  55. UI.STARTPROGRESS
    Use this.ui.startProgress(), and
    return a Promise in the
    command's run function.

    View Slide

  56. USE ES6
    Node 4+ supports most of what
    you're used to: let, const, =>, etc.
    See http://node.green for info

    View Slide

  57. HOW TO
    MAKE THIS
    BETTER++?

    View Slide

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

    View Slide

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

    View Slide

  60. MANAGEMENT PAGE
    Add server middleware that serves
    up a page to view translated
    progress, easily import and export
    files.

    View Slide

  61. BUILD-TIME
    ADDONS
    CAN BE WILD.

    View Slide

  62. BUT THEY
    SHOULDN'T
    BE SCARY.

    View Slide

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

    View Slide

  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

    View Slide