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
2. Chris Ball cball_
3. Chris Ball cball_ If you want to work with: React
 React Native
 GraphQL
 Node / Elixir / Rails Say
4. Chris Ball cball_
5. A Familiar Song & Dance
6. Team productivity++ “Let’s make a new component”
7. Team productivity++ 1. Manually create files.
8. Team productivity++ 1. Manually create files.
9. Team productivity++ Now let’s actually write the code.
10. Team productivity++
11. Team productivity++ Code Review
12. Team productivity++ Code Review “Can you add a test?”
13. Team productivity++ Code Review “Can you add a test?” “Actually, this is the old way. Check out <file>”
14. Team productivity++ Code Review “Can you add a test?” “Actually, this is the old way. Check out <file>” … etc
15. Team productivity++ Sound familiar?
16. What’s the problem?
17. Team productivity++ Source of truth is either:
 1. In someone’s head 2. Non-existent
18. Team productivity++ DRY
19. Team productivity++ The “right way” changes over time.
20. Boilerplates & Starter Kits
21. Team productivity++
22. Team productivity++
23. Team productivity++
24. Team productivity++ “To get started, choose from one of these 30 options.”
25. Team productivity++ You are tied to a structure and set of conventions.
26. Team productivity++ Someone has to keep things up-to-date.
27. Team productivity++ Toor not to?
28. Team productivity++
29. A trend towards Flexible conventions
30. Team productivity++
31. Team productivity++ Create conventions for your team.
32. Why?
33. Team productivity++ ~12 clicks, min 5 keystrokes per file x 3 different files = At least 45 seconds per component
34. Team productivity++ And that assumes you do it right.
35. Team productivity++ More important than time savings…
36. Team productivity++ Decision Fatigue
37. Team productivity++
38. Team productivity++ No more copy paste.
39. Team productivity++ Ensure everyone is doing things “the new way”.
40. Team productivity++ Simplify onboarding of new team members.
41. Team productivity++ Automation makes devs happy!
42. How?
43. Team productivity++ Use a CLI
44. Team productivity++ Use a CLI
45. Team productivity++ Use a CLI File / folder structure
46. Team productivity++ Use a CLI File / folder structure Generate a failing test
47. Team productivity++ Use a CLI File / folder structure Generate a failing test Redux boilerplate
48. Team productivity++ But, make sure you can customize it.
49. Team productivity++ Which CLI to use?
50. Team productivity++
51. Team productivity++
52. Team productivity++
53. Team productivity++
54. Team productivity++
55. Team productivity++
56. Team productivity++
57. Team productivity++
58. Team productivity++
59. Team productivity++
60. Team productivity++
61. Team productivity++
62. Team productivity++
63. Team productivity++ Before hygen, here’s what we did.
64. Team productivity++
65. Team productivity++
66. Team productivity++
67. Team productivity++
68. Productivity++
70. Team productivity++ Create conventions for your team.
71. Team productivity++ Extract or leverage tooling to enforce the pattern.
72. Team productivity++ How can you improve your workflow?
73. Team productivity++
74. Chris Ball cball_ Thanks!