A few weeks ago, Nick, Senior Software Developer at DEV, tweeted about live pairing on a Forem/DEV issue. I reached out to Nick because it was a great opportunity to learn and make my first contribution to an open source platform I enjoy using. Together, we live paired on Twitch and worked on refactoring the code for Forem's image upload feature.
In this blog, I’ll talk about what issue we worked on, how the live stream went, and what I learned.
Nick and I worked on converting a Preact class component to a functional component using hooks. We worked on the <ImageUploader /> component, which allows users to upload images to their DEV blog.
Preact is a lighter version of React. Class components are the original way of including state and lifecycle methods. Functional components are plain JavaScript functions that accept props as arguments. Hooks introduce stateful logic in functional components. Class components and functional components with hooks both introduce state, but hooks allow us to reuse stateful logic without changing our component hierarchy.
You can check out the issue in this GitHub pull request.
To get set up on my local machine, I followed the DEV install documentation. The documentation is thorough and detailed, so following the instructions was straightforward. The only issue I ran into was Ruby versioning on my local machine.
Before the live stream, Nick and I did a test run to make sure my environment was running properly and our set up would work. Nick patiently helped troubleshoot the Ruby versioning issue with me. After a lot of Googling and StackOverflow, we figured out that I needed to run bash within bash in order to run DEV locally on my machine.
Our live stream started off with a couple minutes of our sound unknowingly off on Twitch while we did introductions. It’s only normal that there’s a tech issue, right? 🤪 Once we got that fixed and re-introduced ourselves and the Forem issue, the rest of the live stream ran smoothly.
We converted the image uploader feature from a Preact class component to functional component using the useState hook. Since we weren’t making any feature updates, we only needed to refactor the syntax and make sure all the tests were still passing.
Nick did a fantastic job balancing moderating the stream to make sure the audience understood what we were doing while also pairing with me. Similar to my previous pair programming experiences, we discussed our changes and plan, then got to coding. I also shared my thought process out loud as I was coding, which was helpful for letting the audience understand what changes were being made and why. The difference with the Twitch live stream was that I also had extra eyes from the audience, which was great for catching things like typos.
After updating the class component to a functional component with the useState hook on the live stream, Nick and I worked on adding a useReducer hook to make the code more uniform and easy to understand. After passing all the tests again, I submitted my first pull request to Forem’s code base!
This was my first time live pairing and contributing to an open source code project. Here’s a couple of things I learned:
useReducer hook is a great way to manage components with complex state logic. It makes code easier to understand because it centralizes the logic that would otherwise be spread throughout the component.If you want to live pair with Nick on a Forem issue, you can reach out to him on DEV or Twitter. You can also watch his programming videos on YouTube or Twitch.
Huge thanks to Nick for live pairing with me and everyone for joining the stream!