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 full-size slide

  2. Chris Ball
    cball_

    View full-size slide

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

    React Native

    GraphQL

    Node / Elixir / Rails
    Say

    View full-size slide

  4. Chris Ball
    cball_

    View full-size slide

  5. A Familiar
    Song & Dance

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  10. Team productivity++

    View full-size slide

  11. Team productivity++
    Code Review

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  15. Team productivity++
    Sound familiar?

    View full-size slide

  16. What’s the
    problem?

    View full-size slide

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

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

    View full-size slide

  18. Team productivity++
    DRY

    View full-size slide

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

    View full-size slide

  20. Boilerplates
    &
    Starter Kits

    View full-size slide

  21. Team productivity++

    View full-size slide

  22. Team productivity++

    View full-size slide

  23. Team productivity++

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  27. Team productivity++
    Toor not to?

    View full-size slide

  28. Team productivity++

    View full-size slide

  29. A trend towards
    Flexible conventions

    View full-size slide

  30. Team productivity++

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  35. Team productivity++
    Decision Fatigue

    View full-size slide

  36. Team productivity++

    View full-size slide

  37. Team productivity++
    No more copy paste.

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  40. Team productivity++
    Automation makes
    devs happy!

    View full-size slide

  41. Team productivity++
    Use a CLI

    View full-size slide

  42. Team productivity++
    Use a CLI

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  47. Team productivity++
    Which CLI to use?

    View full-size slide

  48. Team productivity++

    View full-size slide

  49. Team productivity++

    View full-size slide

  50. Team productivity++

    View full-size slide

  51. Team productivity++

    View full-size slide

  52. Team productivity++

    View full-size slide

  53. Team productivity++

    View full-size slide

  54. Team productivity++

    View full-size slide

  55. Team productivity++

    View full-size slide

  56. Team productivity++

    View full-size slide

  57. Team productivity++

    View full-size slide

  58. Team productivity++

    View full-size slide

  59. Team productivity++

    View full-size slide

  60. Team productivity++

    View full-size slide

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

    View full-size slide

  62. Team productivity++

    View full-size slide

  63. Team productivity++

    View full-size slide

  64. Team productivity++

    View full-size slide

  65. Team productivity++

    View full-size slide

  66. Productivity++

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  70. Team productivity++

    View full-size slide

  71. Chris Ball
    cball_
    Thanks!

    View full-size slide