Estudios. Fractal Refactorization Methodology.

The fractal refactorization methodology follows a simple rule. This formula works well with vue.js framework and its composition API, because composition API enables you to disconnect the logic of your code in independent functions (pure functions), instead of working with OOP, where all the methods are encapsulated in a single class. It is not yet tested on React, but it should work with React Hooks, not with React class components. Check this example repo, here I built the application in Vue.js using Composition API and following a fractal refactorization methodology. It is only an example to show how to follow a fractal refactorization approach, the app is made on purpose without following rules of clean code, not SOLID principles. It is meant to show how you can write better code ONLY by using this approach. In real world applications, you MUST follow all rules and guidelines. You have to use all tools available in your toolbelt. Here you have a youtube screencast explains this. This is the method:
  1. Write your component with extension .vue
  2. Has the component more than 300 lines of code? Yes, follow the next step. No, return to step 1 and continue writing awesome code.
  3. Make a commit so your working tree will get clean.
  4. Make a new folder with the same name as your target file without the .vue extension
  5. Move your component inside this new folder
  6. Modify the name of your file inside the new folder and call it index.vue, fix the route that calls this component on the parent components.
  7. Verify that everything is OK. Did all the tests pass? They should be passing, there is only a route that was modified
  8. Here we'll begin working in fractals. It may be necessary to create many new fractal components inside the new folder, siblings to index.vue. From this point onwards, we'll be fractalizing.
    1. Examine your index.vue file, search the HTML node which has many nodes inside.
    2. Make a new file, call it by a name related to what does that node HTML and add a .vue extension
    3. Move the HTML node from index.vue to the recently created file, move the logic associated to that HTML node in the script section into this new file
    4. Check that everything is still working. Maybe you will need to add some 
      emit
      into the new component. If everything is OK, make a commit and continue. If there are broken things, continue fixing the errors. A good test suite will help you verify that you will not broke anything with this refactorization.
    5. If index.vue file still has a lot of HTML nodes, return to step 
      a
      of this section.
  9. Refactorization is ready, continue writing code to accomplish the specs of your project. If you got another file that grows very complex, turn it into a folder and repeat the steps of this guide.