En el mundo de la programación, es frecuente escuchar sobre "revisiones de código". Se trata de una práctica donde un profesional del software revisa el código escrito por otro en búsqueda de mejorar el mismo, revisar que se esté desarrollando correctamente, que se estén utilizando buenas prácticas y darle feedback al otro desarrollador.
Buenas prácticas de programación
Como desarrollador o desarrolladora de software, gran parte de tu tiempo lo invertirás en leer código que otra persona ha escrito. Tal vez el software funcione muy bien, pero aun así puedes encontrarte con puntos de mejora donde el código podría optimizarse, ser más limpio y escalable a largo plazo.
Cuando hablamos de escalabilidad, nos referimos a la capacidad de un sistema de crecer de forma significativa, ya sea en cantidad de código o en cantidad de usuarios, y que el mismo continúe funcionando correctamente. La calidad del código fuente, le dará al software la capacidad de crecer con el paso de los años y que no sea un dolor de cabeza tener que trabajar en ese proyecto, ya sea para ti o para otro desarrollador.
Optimización del proyecto Mokepons
Hasta este punto del desarrollo del videojuego, tienes un código que funciona bastante bien. Pero, ¿qué pasaría si en el futuro te piden que agregues 1000 personajes? ¿Cómo lo harías? ¿Harías un copy & paste del código que ya tienes para agregarlos uno por uno? Esto no sería lo ideal, tomaría mucho tiempo y esfuerzo y el código no sería escalable.
Hagamos una examinación del código fuente del videojuego y busquemos oportunidades para mejorar el mismo.
Optimización de carga
La primera mejora que podemos aplicar es el momento de carga del script de Javascript. El mismo se encuentra en el comienzo del HTML, dentro de la etiqueta head.
Lo ideal es que el mismo siempre se encuentre justo antes del cierre de la etiqueta Body.
...
<scriptsrc="./js/mokepon.js"></script></body>
¿Por qué? El navegador web procesa el código HTML línea por línea, de arriba hacia abajo. Si encuentra un script, detendrá el procesamiento para realizar la descarga del código Javascript, ejecutarlo, y luego continuar con el resto del código HTML.
Esto generará un retraso en la carga del HTML en el navegador y una mala experiencia visual para el usuario.
Además, muchas veces el código Javascript necesita que el código HTML ya se encuentre procesado previamente o podría ocurrir algún error si primero ejecutamos el JS y luego el HTML.
Optimización de código
Hasta el momento, has estado creando Mokepones con el siguiente código HTML.
Hasta el momento solo tienes 3 tipos de ataques. ¿Qué pasaría si tienes 50 o 100?
El reto para ti antes de continuar con la siguiente clase es que hagas un esfuerzo por pensar cómo solucionarías este problema de optimización de código. Encontrarás la solución en la siguiente clase, pero no dejes de intentarlo.
Conclusión
La calidad del software hace al desarrollador. Te encontrarás con retos de optimización y mejora de código fuente toda tu vida si decides ser programador. Escribir buen código fuente, de buena calidad y escalabilidad, te convertirá en un gran desarrollador de software en el futuro.
Contribución creada porErnesto Herrera y Kevin Fiorentino (Platzi Contributors)
Crítica constructiva / oportunidad de mejora:
Hay un pequeño GRAN detalle de Diego de Granda que espero no pase desapercibido y lo usen los demás profesores:
Al mover código o refactorizar, Diego primero copia, se asegura que esté pegado donde debe ir, y ++después++ borra el código innecesario.
Muchos compañeros alumnos rompieron su código o directamente se perdieron porque todos los demás profesores simplemente cortan y pegan rápidamente con atajos de teclado, dejando a los alumnos perdidos (me incluyo) o con el proyecto roto, causando mucha frustración
¡Gracias Diego! 🙌
Y ojalá el resto de profesores lo hagan en futuros cursos.
Un saludo.
Yo hice un código más complejo que el que se ha visto hasta este punto del curso y todavía me pierdo cuando veo el código de aquí, porque está hecho diferente a como yo lo haría, la cosa es que uno pasa un buen tiempo leyendo código y cuando trata de optimizar funciones pasa que no se copia todo bien y queda alguna llave sin cerrar, lo que causa mucha frustracion porque los editores como Code te dicen que el código está incompleto pero no te dice exactamente dónde, por eso es bueno retroceder con Ctrl+Z cuando algo se rompe y así puedes revertir los cambios hasta el momento en el que puedes ver cuál cambio hizo que dejara de funcionar tu código, siempre que les pase esto en Code pueden retroceder con Ctrl+Z y así deshacen los cambios para que el código vuelva a su estado funcional.
Hola Leo, sí es un buen tip, gracias.
También utilizo control de versiones con GitHub. Saludos! :)
Me gusta que cada profesor tiene su propio criterio y eso es respetado.
es cierto!!
¡Estoy de acuerdo contigo! Todos complementan el curso muy, pero muy bien. Y pues yo diría que también se estructuró el curso de esta manera para permitirnos aprender a solucionar este tipo de inconvenientes👌.
Salio diego a la cancha!! un grande :muscle:
Si note que usabamos las mismas variables en diferentes funciones pero repetidas, yo las harìa variables globales, tambièn en diferentes archivos por ej uno de variables, otro de funciones y asi.. No se si sea la correcto ijiji A SEGUIR APRENDIENDO
Concuerdo contigo, también eso fue lo que pensé.
si yo tambien pensaba lo mismo pero como recien empiezo me da miedo de dañar algo y tengo que reescribirlo todo xd
Me gusta que platzi no nos encasilla en un solo metodo, con estos ejercicios nos muestra un dia a dia de un desarrollador e incluso nos deja una reflexion, al trabajar en equipo, nuestros compañeros pueden ser de mucha ayuda al momento de optimizar nuestro codigo, pues desde "afuera" a veces es mas facil ver las cosas.
concuerdo, platzi es genial 😁
tienes muchas razon
No puede ser, en el alterior curso de programación basica Freddy decía que el script tenía que ir al final, en este nuevo curso, nos dijo que se podia colocar en el head y nos enseñó una forma para que cargara toda la pagina sin afectar el código, ahora nuevamente se nos dice que el script tiene que ir al finaaaaaal.
Estaba pensando lo mismo
Es super genial como han echo este curso con muchos errores comunes para enseñarnos a hacer las cosas bien :D.
Un placer disfrutar una vez más del gran profesor Diego De Granda. Sin duda, si hoy estoy trabajando en la industria es gracias a todos los cursos que tomé suyos aquí en Platzi ❤️ 🙏🏼
Excelente esta sección. Así aprendemos a leer código e identificar las áreas de oportunidades.
Así lo resolví, creé una función de botonesDeAtaque donde me traigo los elementos de HTML para agregarle interactividad y donde se establece, por parámetro, si se deshabilitan o no. Esta se invoca en la función iniciarJuego (donde antiguamente estaban las variables de los botones de ataque) y se invoca en la función de crearMensajeFinal para desactivar los botones.
Genial!!
Gracias, Marcos!!
Hoy en día no es necesario poner los scripts antes del cierre de la etiqueta body porque en html tenemos un atributo para "bloquear el Javacripts" hasta que cargue todo el html.
Se noto el nivel de Diego, poniendo orden y quitando malas practicas.
Cada vez que escribiamos un código pensaba que podría mejorarse para escribirse en menos lineas sin ni siquiera saber como, ahora estoy listo para aprender a mejorarlo!
Esta parte me está gustando, optimizar el código, la primera fue entenderlo, ahora es mejorarlo y eso me está gustado, el camino de desarrollador me esta gustando por los retos que se presentan
Cual seria la diferencia entre hacerlo en el head con "defer"
y abajo. A mi me parece que es igual, pero me gustaria saber cual es mejor???
<script src="./src/index.js"></script></body>
Hola, Orangel. 👋
A grandes rasgos, funcionarían de igual manera: al hacerlo con defer, el JavaScript carga hasta que se cargue el resto del HTML; mientras que tenerlo al final del body hará que se cargue después de que se hayan cargado los demás elementos.
No obstante, yo creo que para mantener un mejor orden y estructura, lo ideal sería tener todo lo que no sea parte del <body> dentro del <head>: scripts, estilos, etc.
Una buena práctica es colocar la etiqueta <script></script> justo antes de la etiqueta de cierre </body> para mejora el performance
Siento que es indispensable que ++los videos tenga una descripcion++. se trata de ++leer, complrender, analizar y practicar++ lo leido. ++NO++ me parece util copiar y pegar lo que hacen al pie de la letra en el video. por eso me parece genial las clases de ++Fredy y Diego++, de no entender, puedo remitirme al video para solucionarlo mejor.
Si agregamos la etiqueta de JavaScript al final del body, les parece que seria necesaria la linea que tenemos al final?
window.addEventListener('load', iniciarJuego)
Si respondiste SI, porque hay que dejarla?
Si respondiste NO, como la reemplazarías?
Yo la dejaría :eyes:
Nomás para que desde JavaScript se entienda un tris más fácil cuándo se empieza a ejecutar el juego. :D
yo probe el quitarla solo para saber si seguia funcionando, y... no jajaja directamente dejo de funcionar mi js.
se podría lograr declarando variables globales que luego pueda. ser utilizadas por los métodos y asi no hacer operaciones repetidas
