DEV Community

loading...

Do you even refactor, bro?

codevault profile image Sergiu Mureşan ・1 min read

You are surrounded by a horribly implemented functionality made up of multiple files of hundreds of lines each that barely crawls while doing its job.

The front-end is a mountain of copy-pasted HTML templates using very "!important" CSS coupled with highly redundant and confusing JavaScript functions that who knows where they are called from or how to even use.

Back-end looks innocent with only a couple calls but it absolutely stinks from the amount of workarounds that the current architecture didn't account for and the repetitive boiler-plate code for each entity in it.

Your task is to refactor this beast while keeping all its functionality intact. How would you tackle this monster?

(a.k.a. What are the more generic steps you use while refactoring?)

Discussion

pic
Editor guide
Collapse
marcus profile image
Marcus Müller

Bluebird covered a lot in the comment dev.to/bluebird1/comment/4pjh.

What helps me a lot is the usage of a rough map of objects, functions and templates (usually done with draw.io/). Then I start making the map easier to read and change the code to reflect that.

Collapse
codevault profile image
Sergiu Mureşan Author

Great idea! A full view of the whole architecture always helps. I sometimes look at the automatically generated class hierarchy if the IDE provides such a feature.

Collapse
marcus profile image
Marcus Müller

Yes, exactly! It's such a helpful feature for refactoring smaller parts of a big application.

Collapse
bluebird1 profile image
bluebird

This may be a project I have written.I use golang+gin+mysql,But I successfully refactored.

1.extract duplicate code
fisrt extract html templates/css duplicate code,As a separate file. in my project,extract site head and tail. Then use the template to render the code.

Facing confused and duplicate JavaScript code,I used the vue framework,Packaged into components.

2.shorter function
Split/Extract existing big functions,I think the duplicate part of each function is a good target.

3.generalization

duplicate code Means they may need a common parent class (if you don't use an object-oriented language, you should have the same effect).Duplicate code should be moved to the parent class

4.architecture
The best way to code quality is a good architecture.If the current architecture is a junk, try better.

Collapse
marcus profile image
Marcus Müller

Regarding "1.extract duplicate code":
You can use static code analyzers, most of them free for Open Source Projects, for finding larger blocks of duplicate.
Most of them are very helpful for standard things like missing null checks etc.

Collapse
codevault profile image
Sergiu Mureşan Author

That's great advice! A work colleague actually suggested we do this before refactoring anything.

If we had existing tests for a feature, they would catch most bugs after a refactor.