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?)
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.