Joona Viertola

Learning journal

Front-end refactoring tips

Refactoring existing content can be a big mess. You can't lost old spent work, you need to keep code working and keep in mind what it can break else where. Also when there is need of refactoring, also code is already hard to understand. This is very time consuming and can make it also hard others to understand. So here it some tips how to spend less time on refactoring.

Clear image

What are you doing? What things are before and what they should be after refactoring. This might take more time you feel than should, but it decreases double work and messing around.

Little pieces

If someone asks you to refactor whole code, at least spearate it to logical pieces. This rule also includes smaller work, example one component. Smaller pieces you make, more you will success.

Order them

Once you have cut your work to little pieces, order them by dependency. Example it's a bad idea to do change the styling and after that change the DOM. This ordering removes double work.

Track progress

Keep up list what you have done already. You can use a list from Little pieces part.


What went good and what not? You can develop your own working and notice what is good at current project you are working on.