¿Alguna vez te preguntaste qué es esa dependencia llamada zonejs que está en todos los proyectos Angular? ¿Te preguntaste por qué es tan importante? ¿Sabías que si borramos esa dependencia una buena parte de nuestra aplicación dejaría de funcionar? ¿Y sabés cómo se mejoró la performance en Angular gracias a esta librería? Por último, ¿sabés por qué se muestra el stack trace facilitando el desarrollo en nuestras aplicaciones? Si en algún momento te hiciste alguna de esas preguntas, no te pierdas este post porque te vamos a explicar todo eso… ¡y mucho mas!
Voy a ser claro, Angular no sería lo que es si no fuera, entre otras cosas, por la incorporación de zone.js. Listo lo dije, oka entonces basta de misterios.
¿Que es zonejs?
Muy resumido es un «contexto de ejecución». Okaa entonces… ¿qué es zonejs :P? Bueno bueno, para explicarlo mejor tenemos que volver un poco atrás en el tiempo y explicar como se hacían las cosas en JavaScript. En JavaScript tenemos operaciones asincrónicas, como la función setTimeout(). Y ¿qué hacían estas operaciones?, se ejecutaban «más adelante», en el ejemplo de setTimeout() le pasamos como primer parámetro una función y como segundo parámetro un tiempo en milisegundos indicando el tiempo que tenía que pasar para ejecutar esa función:
setTimeout(function() {
console.log('estoy dentro de setTimeout()!!!');
}, 1000);
Ahora bien, la forma en que JavaScript ejecuta nuestro código es secuencial, primero una línea, luego la siguiente, y así. En los casos que JavaScript encontraba una operación asincrónica lo que hace es mandarlo a una «cola de ejecución» aparte, y seguir ejecutando el resto de las operaciones.
Por ejemplo en este código
Como ven en el gráfico, lo que se termina de ejecutar en pantalla es 1, 3, 2. Es más, si prestan atención verán que «console.log(‘3’) se ejecuta después de que el programa finalizó.
¿Qué pasaría si queremos tomar el tiempo que tardan en ejecutarse las 3 lineas de código?, lo que pasaría es que en la línea de setTiemout, no se podría tomar el tiempo.
Podemos ver en el código que para las tareas asincrónicas hay dos momentos, uno cuando se registran y el otro cuando se ejecutan. Para mas detalles mirá mi post sobre el ciclo de ejecución de JavaScript
Cuando se registran, es cuando en nuestro ejemplo escribimos:
setTimeout(function() {
console.log('2');
}, 1000);
y cuando se ejecuta es cuando REALMENTE se ejecuta la línea console.log(‘2’). Otros ejemplos de registro de tareas asincrónicas pueden ser addEventLitener, onclick, etc.
Ahora bien, no estaría copadooo, que tanto nuestras tareas sincrónicas como las asincrónicas se ejecutaran en el mismo lugar… en la misma «Zona» ;).
El código de zonejs se vería más o menos así:
En este punto te podés estar preguntando ¿pero eso es para qué me sirve?, ¿para qué me sirve que las tareas sincrónicas y asincrónicas se ejecuten en la misma Zona? ¿y para qué me sirve saber cuando una tarea entra y sale de la «zona«? ¿no me da lo mismo en el orden que se ejecutan, mientras se ejecuten?
Bueno, si te fijás bien, vos tenés un «mecanismo» que se ejecuta justo antes y después de que cualquier código (sincrónico o asincrónico se ejecute) y esto es muy potente. De hecho Angular se aprovecha de esa característica, y te lo voy a explicar mas adelante.
Okaaaaa, ahora que sabemos qué es zone.js y sus propiedades, vamos a ver cómo podemos sacarle el máximo provecho (sobretodo en Angular).
Debugging
Como sabrás, debuger es analizar línea a línea nuestro código, generalmente para encontrar errores. Si alguna vez se te explotó un código JavaScript y querés ver en la consola de desarrollo del browser que cazzo pasó, verás que te dice poco y nada de lo que explotó, ¡hay que buscar todo a mano!
Pero ahora, gracias a Zone, ¡¡¡tenemos un Straktrace muy detallado!!! sííí esa maravillosa explicación de qué fue lo que explotó, y por todos los lugares en los que saltó el código hasta que explotó (incluyendo la línea del código) a nuestra disposición. No mas adivinar dónde explotó el código, no mas poner console.log(‘paso por acá’), no mas debugear para saber dónde exploto el código. Ahora tenemos el archivo y la línea de código y voiila! No se qué opinan ustedes, pero yo creo que sólo por esto se justifica el uso de esta librería, ¡y esto no es todo!
Es más, si nos volvemos muy locos podemos logear en un servidor cuando nuestra aplicación explota y con esa data (el stacktrace) podemos crear nuestros propios tests simulando los pasos que un usuario x hizo y mejorar enormemente nuestra aplicación. Está bien, todo esto es un costo extra ¡pero vale la pena!
Profiling
Profiling es el análisis de la performance o el rendimiento de tu software. Cuando tenés grandes cantidades de datos a procesar, el rendimiento de tu software se vuelve muy importante, ya que el rendimiento termina afectando al usuario. Mirálo de esta forma, si tu software es lento, tu usuario no lo va a usar, y si no lo usa ¿para qué lo hiciste en primer lugar? ;). El rendimiento muchas veces se deja para lo último (en el mejor de los casos) pero en realidad se debe tener en cuenta en todo momento y medirlo (usando profile por ejemplo) es una buena forma de asegurarse un código de mejor calidad.
Bueno, como vimos antes, con zone.js podemos medir el tiempo de ejecución de TODAS las tareas (sincrónicas y asincrónicas) sin miedo de que las tareas asincrónicas nos queden fuera del tintero (como ya lo vimos). Lo único que hacemos es iniciar el cronómetro cada vez que una tarea entra en la «zona» y detenerlo cuando la tarea sale de la «zona», sumamos todo ¡y todo listo!
Actualizando la Vista (esto tiene mucho que ver con Angular ;) )
¿Que pasaría si por ejemplo tuviéramos un Framework Frontend (Angular por ejemplo) y quisiéramos actualizar datos de un componente a la vista (Angular), y también un mecanismo que nos avisara cuándo actualizar la vista (zone.js) sin tener que estar preguntando todo el tiempo: ¿cambió algo? ¿cambió algo? ¿cambió algo?
¿Adivinaste de qué Framework estamos hablando y qué mecanismo usa?
¡Sí! adivinaste, Angular usa zone.js para manejar todo su sistema de actualización de la vista (sus Templates). De hecho Angular tiene su propia implementación de zone.js para hacer eso. Tomo la idea de zone.js y modifico un par de cositas para ajustarlo al Framework y mejorar la performance.
Conclusiones
Ahora que el misterio de zona.js esta revelado, cuando veas por todos lados zone.js en el stacktrace que se muestra en la consola de tu browser ya no te vas a asustar y vas a saber de qué se trata ;). Si queres saber mas del mundo de angular seguinos en Facebook, Twitter o déjanos un comentario!
Suscribíte a la Newsletter!
Si te suscribís, nunca te vas a perder un post Y vas a tener acceso a mi contenido exclusivo de forma totalmente gratuita. ¡Suscribite!
gustavodohara.com te informa que los datos de carácter personal que me proporciones rellenando el presente formulario serán tratados por Gustavo Dohara como responsable de esta web.
Finalidad de la recolección y tratamiento de los datos personales: gestionar el alta a esta suscripción y remitir boletines periódicos con información y oferta prospectiva de productos o servicios propios y de terceros afiliados.
Legitimación: Consentimiento del interesado. Destinatarios: Mailchimp. Puedes consultar aquí su política de privacidad. Derechos: Podrás ejercer tus derechos de acceso, rectificación, limitación y suprimir los datos en gustavo@gustavodohara.com así como el derecho a presentar una reclamación ante una autoridad de control. Puedes consultar la información adicional y detallada sobre Protección de Datos en mi política de privacidad