This week I saw a LinkedIn post by Edgar Marukyan (CTO at Bioneex) talking about growing complexity in front end and back end. His blog post reminded me about Fractal Code Refactor. He used this image to illustrate how back end scales like math, and front end scales like biology.
I don’t want to win a competition on which one is more difficult. I am a fullstack web developer 70% back-end and 30% front-end. But this blog post signals something I am agreed with: front end complexity is often neglected. There are many common phrases about front end that are wrong. For example “front end don’t need tests, because when it fails it will alert you instantly”, this kind of phrases shows how often Front end complexity is neglected. This kind of phrases are used to justify lack of testing and QA on the front end
How to deal with complexity?
Fractal Code Refactoring deals with this issue. It can be applied to back end and front end, but I believe it highlights in the front end side of any application.
- – Write your component in a single file.
- – When you note your file has become difficult to handle due to its big number of lines, create a folder with the same name of your file. Don’t include the file extension in your folder name.
- – Move your file inside this new folder, and change its name to “index.jsx” (change the extension according to the language you are using)
- – Identify related chunks of code in your “index.jsx” file, and move them to new files siblings to your “index.jsx” main file.
- – Import new sibling files inside your “index.jsx”.
- – Treat each file on this folder as a single component file, like the one described on the first step. Your “index.jsx” file will be the conductor who will lead your big band.
This is what Fractal Code Refactoring is all about: just transform your files into folders when they become big and difficult to handle.
When you zoom inside a Mandelbrot fractal, you find other figures raising. This is what Fractal Code Refactoring is all about. You add the feature to zoom inside a folder, see a bunch of files, and wherever you find a folder, you can zoom in again on your folder. You can go on and on with this method, it does not have any limits at all.
By following Fractal Code Refactor rules, you add another dimension on which your code base can grow. Tipically you open a folder and you find dozens of files, or maybe you have your components library with widgets are used only once in your entire code base. In such cases, complexity grows vertically in number of files inside your folders. With Fractal Code Refactor, your complexity now can grow vertically or horizontally: on nested folders.
This is not a Silver Bullet
It is evident this is not a silver bullet. Fractal Code Refactor is not meant to fix all issues of the world. In addition, when you use this methodology, it will be hard to create reusable components inside one of your nested folders.
Use your criteria and experience to determine when you’ll need to build a reusable component inside your widgets/ folder, and when you should convert a big file into a folder.