CursosEmpresasBlogLiveConfPrecios

Optimización de Código JavaScript con Clases y Objetos

Clase 44 de 84 • Curso Gratis de Programación Básica

Clase anteriorSiguiente clase
Resumen

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.

<head>
    ...
    <script src="./js/mokepon.js"></script>
</head>

Lo ideal es que el mismo siempre se encuentre justo antes del cierre de la etiqueta Body.

    ...
    <script src="./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.

<input type="radio" name="mascota" id="hipodoge" />
<label class="tarjeta-de-mokepon" for="hipodoge">
    <p>Hipodoge</p>
    <img src="./assets/mokepons_mokepon_hipodoge_attack.png" alt="Hipodoge">
</label>

Si tuvieras que repetir este código 1000 veces, sería completamente poco óptima la calidad y escalabilidad del proyecto.

Ocurre lo mismo con los ataques de los Mokepones.

<div class="tarjetas-ataques">
    <button id="boton-fuego" class="boton-de-ataque">Fuego 🔥</button>
    <button id="boton-agua" class="boton-de-ataque">Agua 💧</button>
    <button id="boton-tierra" class="boton-de-ataque">Tierra 🌱</button>
</div>

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 por Ernesto Herrera y Kevin Fiorentino (Platzi Contributors)