Estudios. Metodología de la Refactorización Fractal.

La metodología de refactorización fractal sigue una fórmula bastante simple. Esta fórmula funciona con el framework Vue.JS y con Composition API, dado que Composition API permite desacoplar la lógica del código en funciones independientes, en lugar de trabajar con POO donde están todos los métodos encapsulados en clases. El siguiente proyecto lo construí en Vue.js usando Composition API y siguiendo una metodología de refactorización fractal. Es solo un ejemplo para ilustrar la refactorización fractal, la app la hice a propósito sin seguir lineamientos de código limpio, ni principios SOLID. El propósito es de mostrar que tú puedes escribir mejor código SOLAMENTE usando esta forma de abordar el problema. En aplicaciones del mundo real, tú DEBES seguir reglas y lineamientos en combinación con la refactorización fractal. Debes usar todas las herramientas disponibles en tu caja de herramientas. Aquí hay un video que explica esto:

1. Escriba un componente con extensión .vue
2. ¿El componente tiene más de 250 línea? Si, siga al siguiente paso. No, continue escribiendo
3. Haga un commit para quedar con su working tree limpio
4. Haga una carpeta con el mismo nombre del archivo
5. Mueva el componente grande dentro de la carpeta recién creada
6. Modifique el nombre del archivo dentro de la carpeta con el nombre index.vue, y corrija la ruta del componente que renderiza el componente en el que se está trabajando
7. Verifique que todo está bien, y haga un commit
8. Aquí se separa en componentes fractales. Puede ser necesario crear varios componentes fractales que se encuentren en la misma carpeta del archivo nuevo index.vue. Por eso fractalizaremos también este punto
   1. Examine el archivo index.vue, busque el nodo HTML que contenga más nodos al interior
   2. Haga un archivo nuevo, bautícelo con un nombre relacionado a lo que hace ese nodo HTML y con extensión .vue.
   3. Mueva el tag HTML a este archivo recien creado, mueva la lógica asociada a este nodo HTML al archivo nuevo.
   4. Compruebe que todo sigue funcionando, quizás tenga que agregar algunos

      emit

      al nuevo componente. Si todo sigue funcionando bien, haga un commit y continue. Si hay cosas rotas, siga corrigiendo errores. Tener un test suite acá puede ser de gran utilidad.
   5. Si el archivo index.vue todavía le quedan muchos nodos HTML, vuelva al punto

      a

      de este sublistado
9. Refactorización lista, siga ampliando la carpeta del componente completando los archivos de acuerdo a las especificaciones del proyecto. Cuando alguno de los componentes dentro de la carpeta crezca demasiado y se vuelva difícil de manejar debido a su tamaño. Vuelva al punto dos de esta metodología.