Saber y ganar Aprendizaje semanal
En esta semana se propuso hacer un juego de preguntas en el cual dependiendo del tiempo de reacción del usuario a la hora de responder a las preguntas, la puntuación varia y al finalizar el juego te devuelve la puntuación total.
Este ejercicio se ha hecho con pair programming, una técnica de trabajo en pares que a mi personalmente me gusta mucho ya que cada poco tiempo nos turnamos para ser el controlador y el navegador, de forma que mientras uno va pensando como aplicar el código, el otro hace de mano ejecutora. Encuentro muchas ventajas con esta técnica y es que cuando te quedas atascado, puedes cambiar los roles, el flujo de trabajo es constante, aprendes mas ya que el código lo tienes que explicar o el por que piensas que así es mejor, etc.
Comenzamos a picar un código inicial que no tiene nada que ver con el código final, ya que refactorizamos cada pequeña parte de nuestro código para que fuera lo mas claro posible, con las menos dependencias posibles, con las variables globales necesarias, y aplicamos el patrón módulo.
Refactorizar de esta manera no lo había hecho nunca, y aunque acostumbrada a tener una función que hiciera varias cosas, como por ejemplo pintar en el DOM y analizar los datos, una vez visto el código refactorizado, es mas fácil de entender y es mas mantenible.
Voy a dejar un ejemplo del código ya refactorizado:
En este código podemos ver lo que comentaba anteriormente, es un código limpio, en el que las funciones hacen una única cosa, sin depender o saber lo que hacen otras funciones, cada evaluación de los datos se extrae a una función independiente que se ejecutara cuando sea necesario.
Veo super importante el uso del patrón módulo en el cual tenemos una función que engloba al resto de código, para no tener funciones o variables globales, que puedan hacer que el código se rompa con mas facilidad ya que por ejemplo puede haber otras variables en el código que puedan colisionar.
Me gustaría entrar un poco mas en detalle de como proceder en el caso de la refactorización o como lo hicimos en este caso, lo primero de todo fue aplicar el patrón módulo creando una función application que contenía a el resto de código, dentro creamos una función start en la que metíamos lo que queríamos tener listo al iniciar la aplicación, como por ejemplo los elementos del DOM o los datos que queríamos tener preparados. En el index.html, dentro de una etiqueta script, hacíamos la llamada a nuestra función application().start(). Lo siguiente fue mover todas las variables que teníamos globales para dejar únicamente las que se usaban en mas de una función, en este caso, lo que hacemos es únicamente declarar la variable fuera y darle el valor dentro de la función en la que la usamos. Una vez que tenemos el código mas o menos limpio, comenzamos a despiezar las funciones mas sencillas, por ejemplo una función que pinta en el DOM, una función que evalúa datos, etc, todo esto se va sacado en funciones independientes que después ejecutaremos en los sitios donde sea necesario. En estos casos, siempre hay que refactorizar de lo mas sencillo a lo mas complicado, o a mi por lo menos me sirvió de mucho, y en cada cambio por pequeñito que sea, comprobar que la aplicación funciona (en caso de tener test de el código comprobar los test), con cada cambio, revisión del código y commit para que si rompiéramos algo, pudiesemos volver al commit anterior y recuperar el código en el que funcionaba todo correctamente.
La verdad es que al hacer este ejercicio hemos aplicado muchos de los conocimientos que nos han ido contando en estos días, como por ejemplo una de las anteriores entradas sobre los principios de diseño.
Os dejo el enlace de github para que podais echar un ojo al código.