Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Team productivity++ with conventions and CLIs

Team productivity++ with conventions and CLIs

How many times have you created a component file manually in a React project? It’s a lot of repetitive busy work. Perhaps your team uses a feature-based folder structure, so you need to create a folder, index, and style file. More work. Don’t forget to add a test!

We’ll look at how to reduce this repetitive work by leveraging a CLI to generate files in a predictable, yet customizable way. Watch your team’s productivity skyrocket by embracing a cornerstone of developer happiness — automation.

Chris Ball

April 03, 2018
Tweet

More Decks by Chris Ball

Other Decks in Programming

Transcript

  1. Team productivity++ with
    conventions and CLIs

    View Slide

  2. Chris Ball
    cball_

    View Slide

  3. Chris Ball
    cball_
    If you want to work with:
    React

    React Native

    GraphQL

    Node / Elixir / Rails
    Say

    View Slide

  4. Chris Ball
    cball_

    View Slide

  5. A Familiar
    Song & Dance

    View Slide

  6. Team productivity++
    “Let’s make a new
    component”

    View Slide

  7. Team productivity++
    1. Manually create files.

    View Slide

  8. Team productivity++
    1. Manually create files.

    View Slide

  9. Team productivity++
    Now let’s actually
    write the code.

    View Slide

  10. Team productivity++

    View Slide

  11. Team productivity++
    Code Review

    View Slide

  12. Team productivity++
    Code Review
    “Can you add a test?”

    View Slide

  13. Team productivity++
    Code Review
    “Can you add a test?”
    “Actually, this is the old way.
    Check out <file>”

    View Slide

  14. Team productivity++
    Code Review
    “Can you add a test?”
    “Actually, this is the old way.
    Check out <file>”
    … etc

    View Slide

  15. Team productivity++
    Sound familiar?

    View Slide

  16. What’s the
    problem?

    View Slide

  17. Team productivity++
    Source of truth is either:

    1. In someone’s head
    2. Non-existent

    View Slide

  18. Team productivity++
    DRY

    View Slide

  19. Team productivity++
    The “right way” changes
    over time.

    View Slide

  20. Boilerplates
    &
    Starter Kits

    View Slide

  21. Team productivity++

    View Slide

  22. Team productivity++

    View Slide

  23. Team productivity++

    View Slide

  24. Team productivity++
    “To get started, choose from
    one of these 30 options.”

    View Slide

  25. Team productivity++
    You are tied to a structure
    and set of conventions.

    View Slide

  26. Team productivity++
    Someone has to keep
    things up-to-date.

    View Slide

  27. Team productivity++
    Toor not to?

    View Slide

  28. Team productivity++

    View Slide

  29. A trend towards
    Flexible conventions

    View Slide

  30. Team productivity++

    View Slide

  31. Team productivity++
    Create conventions
    for your team.

    View Slide

  32. Why?

    View Slide

  33. Team productivity++
    ~12 clicks, min 5 keystrokes per file
    x
    3 different files
    =
    At least 45 seconds per component

    View Slide

  34. Team productivity++
    And that assumes you do it right.

    View Slide

  35. Team productivity++
    More important than
    time savings…

    View Slide

  36. Team productivity++
    Decision Fatigue

    View Slide

  37. Team productivity++

    View Slide

  38. Team productivity++
    No more copy paste.

    View Slide

  39. Team productivity++
    Ensure everyone is doing
    things “the new way”.

    View Slide

  40. Team productivity++
    Simplify onboarding of
    new team members.

    View Slide

  41. Team productivity++
    Automation makes
    devs happy!

    View Slide

  42. How?

    View Slide

  43. Team productivity++
    Use a CLI

    View Slide

  44. Team productivity++
    Use a CLI

    View Slide

  45. Team productivity++
    Use a CLI
    File / folder structure

    View Slide

  46. Team productivity++
    Use a CLI
    File / folder structure
    Generate a failing test

    View Slide

  47. Team productivity++
    Use a CLI
    File / folder structure
    Generate a failing test
    Redux boilerplate

    View Slide

  48. Team productivity++
    But, make sure
    you can customize it.

    View Slide

  49. Team productivity++
    Which CLI to use?

    View Slide

  50. Team productivity++

    View Slide

  51. Team productivity++

    View Slide

  52. Team productivity++

    View Slide

  53. Team productivity++

    View Slide

  54. Team productivity++

    View Slide

  55. Team productivity++

    View Slide

  56. Team productivity++

    View Slide

  57. Team productivity++

    View Slide

  58. Team productivity++

    View Slide

  59. Team productivity++

    View Slide

  60. Team productivity++

    View Slide

  61. Team productivity++

    View Slide

  62. Team productivity++

    View Slide

  63. Team productivity++
    Before hygen,
    here’s what we did.

    View Slide

  64. Team productivity++

    View Slide

  65. Team productivity++

    View Slide

  66. Team productivity++

    View Slide

  67. Team productivity++

    View Slide

  68. Productivity++

    View Slide

  69. View Slide

  70. Team productivity++
    Create conventions for
    your team.

    View Slide

  71. Team productivity++
    Extract or leverage tooling to
    enforce the pattern.

    View Slide

  72. Team productivity++
    How can you improve your
    workflow?

    View Slide

  73. Team productivity++

    View Slide

  74. Chris Ball
    cball_
    Thanks!

    View Slide