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?)
Top comments (6)
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.
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.
Yes, exactly! It's such a helpful feature for refactoring smaller parts of a big application.
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.
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.
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.