Hammock thoughts

Looking back at our recent refactor, one of the parts I'm more proud of is the execution plan. It's not a coincidence that we almost always think that we need a full re-write. It's easier to plan, and let's face it, way more fun. Building a real refactor plan is tough. How do we deliver something of value without breaking the whole system?

In some cases this is similar to making a feature backwards compatible. Somehow this always feels like taking a huge detour. "I can get it all done in 3 weeks, but if we maintain backwards compatibility it will take 3 more..." But this is the same when approaching a refactor. And the deeper it is the easier it will be to say - let just re-write the system.

I won't delve into the process of deciding when a re-write is necessary as there are many great posts on the matter. But I will take you through the process we did.

As explained earlier - the project was in quite a mess and we wanted to accomplish many different goals. After consulting my team and reviewing the past few months it was quite easy to find the main issues:

• We have a mess when it came to file structure.
• The app layout was outdated and was built based on premises that were no longer true.
• I started having more and more issues with Redux and suggested a move to Mobx.
• We were in the middle of a transition to TypeScript
• We were also moving to Style-Components, two projects we would like to complete.
• Our build was annoying and and we had some issues with our Webpack config and we thought to fix it or more to Create-React-App.
• The last burning issue was building a design system and removing a lot of duplication we created.

Reviewing the issues we had at hand I tried to look at each issue and think what would it look like completing just this task. So I continued to write this down, how long would it take, what would the benefit be, can it be delivered in chunks or is it an all or nothing move, etc. I set a meeting with the whole team - not just the other frontend devs, and discussed the different options. Each spoke from his or her own experience and shared how they would plan this and added some benefits they saw, or adjusted the time frame.

Finally we all took a vote, assuming we will have the time to complete just two tasks. This was very interesting as it was very different from my initial plan. BTW - I think that was the most important part - Although I didn't present it I made a clear plan how I would do this. I listened to the team, but in case they wouldn't adjust or simply wouldn't care too much, I formulated my own plan. But the team did provide interesting push-backs so the plan was adjusted and in my opinion, improved :)

So in case I blabbered too much: 1. Create a list of issues you would like to fix. 2. Asses each task and create a stand alone plan. 3. review with your team and pick a few. 4. Review you plan according to the new information. 5. Execute!

We decided to fix:

• File structure
• App layout
• Modularize app and gradually shift to Mobx.

We realized that fixing the file structure might cause a lot of trouble, especially with coordinating a few teammates, so this was done first by one person. Once complete (a few painful days of fixing import paths), we could split the work among us without a worry. One of us worked on the layout, as he was editing mainly the view layer. The other two started fixing module after module, keeping each a deliverable. That way we avoided collisions, and continued to deliver while refactoring.

We decided that moving to CRA, or fixing webpack isn't important enough (at the moment). Typescript was added to each new module, so that was incrementally improved. Styled-components was our new default, so we decided that if we change or fix something css related it will be in Styled, but there was no active effort. Regarding our design system, we felt that at the time being, bringing and organizing our shared component will be a good enough step, and we will deal with this issue at a later time.

I'll review the actual results in a later post, Cheers!