Refactoring with images

That’s probably a misleading name. Not sure what to call this process but perhaps someone can suggest something better.

I’ve long been taking screen shots of software refactorings. For those new to that concept, these are small improvements we make to software code that don’t change the behaviour. It still works in the same way, it’s just easier to understand and easier to update. Why bother? The more often we work with the software, the better our return on investment. ROI? Definitely ROI except the investment is time and not money. Well time is money…(let’s avoid that rabbit hole). ¹

I’ve tried this with a video before but I found people were always asking questions along the way so I kept stopping the video to explain what was going on at a given step, what my coding partner and I were thinking about and what was driving our approach.

I’ll try demonstrating refactoring again, this time with images. I’ll put minimal dialog in and hopefully the images speak for themselves.

Here’s our starting point. This is a little program I use with friends that loads an image from disk. There’s another program that does fun stuff to the image then saves it onto the disk. I’ll be posting more about the whole program later, for today let’s just focus on this part and a small (they should all be small) refactoring

To start we’re going to inline a small helper method called load_image.

So now we can see two methods that are similar but not the same. Let’s rearrange this methods so the similar ones are right beside each other. A small step like this seems unnecessary but if you think about our goal being clarity, this step makes sense.

It’s now easier to see the similarities and the differences between these two methods.

But these methods are similar but not the same. Let’s do what we can to make them more the same. Let’s introduce a variable called path in each of them. “Hang on a minute!” some of you might be saying to yourselves or out loud in a coffee shop surrounding by strangers. Yes, I just introduced duplication. If you remember to me discussing EPIC (Examine, Prepare, Implement, Clear), the Prepare phase often involves taking one step backwards. Up until now we’ve been making things worse some might argue. Don’t panic², just give me a few more minutes and the code will be improved.

Now when we extract method our friendly IDE PyCharm locates the now duplicate code. Thanks PyCharm! I am in no way affiliated with JetBrains but I do think they make a good IDE.

I skipped the rearranging step. Remember it’s nice to see the duplication together to helps us figure out how to remove it. Now the path variable seems a bit useless so since it’s not helping, let’s inline it in both methods.

That name seems a bit confusing now so let’s rename it to load_initial_image. That, at least, explains what it does.

And there we go. We can make a few improvements still but when we’re refactoring we really want to focus on what’s blocking us from moving forward. It’s easy to get distracted and it becomes a lot of fun to refactor but you need to stay focused. Making small changes at a time really help.

I feel like I need to mention the obvious that nothing in here has to do with personal health or well being. Or does it? Perhaps you can draw parallels to making small improvements instead of giant steps.

Do you like refactoring with images? Have a better name for it? Let me know.

1. https://en.wikipedia.org/wiki/Rabbit_hole

2. https://en.wikipedia.org/wiki/Phrases_from_The_Hitchhiker%27s_Guide_to_the_Galaxy#Don’t_Panic