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_
   

   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