Cargando



Optimización de código en AngularJS

En este tutorial veremos algunas claves de la optimización de código en nuestras aplicaciones escritas con AngularJS.


ago 29 2014 04:10
Avanzado
ago 29 2014 13:43
Optimizar el código no solo significa hacer rutinas lo más eficiente posible, también debemos tener en cuenta el tamaño del archivo y el peso del mismo, con ello podremos garantizar que podamos transmitir los datos de forma veloz.

Esto en aplicaciones de lenguajes de servidor no tiene mucho peso, sin embargo en AngularJS sí, todo es debido a que el código se ejecuta en el cliente, por lo tanto el navegador del mismo debe recibir todo nuestro código antes de poder arrancar la aplicación. El tener un código optimizado y eficiente hará que nuestra aplicación inicie mucho más rápido y que el ancho de banda necesario sea menor.

Compilación


La compilación del código en el mundo Javascript significa básicamente hacer una minificación del mismo, es decir, llevar lo existente al mínimo posible para disminuir el peso del archivo, para ello podemos hacer uso de algunas herramientas como por ejemplo la Google Closure Library, que además de minificar, también ayuda haciendo algunas tareas de compilación.

El único problema que ocurre con las versiones minificadas es que perdemos la legibilidad que habíamos logrado al hacer nuestra aplicación y documentar la misma, es por ello que es importante mantener una copia sin compilar de lo que está actualmente en producción de forma que podamos introducir los cambios necesarios de una manera más sencilla.

Tipos de optimización en AngularJS


Existen algunas formas de optimizar el código en AngularJS que podemos implementar, cada una de estas tiene su complejidad y también su nivel de efectividad, naturalmente depende de nuestros objetivos y de nuestra aplicación el tipo que efectivamente apliquemos.

Optimización básica y simple


Este tipo de optimización consiste en minificar todas las variables que tenemos en nuestro código, lo único que mantendremos serán las propiedades, esto tal vez no reduzca en mucha medida el peso del archivo final, pero si reduce en manera importante el exceso de procesamiento u overhead.

Para aplicarlo basta con correr en el Google Closure lo siguiente:


Optimización avanzada


En este tipo de optimización se opta por renombrar prácticamente todas las funciones y métodos de nuestro archivo con el código fuente, evidentemente hay algunas cosas que no vamos a desear renombrar, para ello utilizaremos un archivo externo donde especificaremos cuales son las funciones que no se deben tocar.

¿Qué logramos?
Al hacer este tipo de compilación, reduciremos en un gran porcentaje el tamaño del archivo correspondiente, sin embargo esto es proporcional a la cantidad de trabajo que debemos realizar para lograr un estado óptimo. Debemos tener en mente también que en este aspecto debemos mantener la forma de inyección de dependencias para que nuestro código pueda seguir funcionando luego.


Un ejemplo de cómo sería este tipo de optimización lo podemos ver en la siguiente imagen:

angular_opt_codigo2.jpg


Con esto finalizamos este tutorial, como vemos lograr la optimización adecuada para nuestra aplicación requiere de un análisis a conciencia, ya que si optamos por un tipo u otro de los que explicamos aquí tendremos unas ventajas y desventajas que tal vez puedan afectar el ciclo de desarrollo de nuestra aplicación.

¿Te ayudó este Tutorial?


Sin comentarios, sé el primero!

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!

X