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.

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