Migrar de angularjs 1.2 a 1.3 y tunear

Desde hace más de un año estamos colaborando con un equipo que está haciendo una herramienta de DNA Annotation.

Nuestra colaboración está en el desarrollo del front end, hecho en angularjs y que recientemente migramos de la version 1.2 a la 1.3.

Migrar

El primer paso que hicimos fue revisar, a vuelo de pájaro, si encontramos alguna incompatibilidad.

En principio no, así que nos animamos al siguiente, que fue crear un nuevo branch y actualizar la versión de angular en bower.json y hacer $ bower update. Eso nos llevó a actualizar también otras librerías que estábamos usando.

Luego hicimos un smoke test y encontramos que no funcionaba el upload de archivos, ya que la última versión de la librería de file upload que usamos tiene cambios en su api.

Esto nos permitió ver que migrar a angular 1.3 era más fácil de lo que suponíamos.

Tunear

Esta fue la parte más interesante. Uno de los features de angular 1.3 es one time binding, que permite obtener mejoras significativas de performance.

Rememorando al viejo Donald Knuth, quien dijo alguna vez:

La optimización prematura es la causa de todos los males

Antes de empezar a meter {{…}} por todos lados y para evitar el riesgo de: hacer algo que no tiene beneficio o hacer algo tiene maleficio (como introducir algún bug) es útil encontrar donde apuntar la mira. Para eso tuvimos en cuenta 2 criterios:

  • La cantidad de $watch. Para medirlos usamos este post.
  • La cantidad de veces que un usuario usa una vista o porción de ella.

Voy a citar 2 ejemplos:

Una de las vistas más usadas tenía 1704  watchers y pudimos reducirlos a 267. Usando el profiler de chrome observamos que se redujo el ciclo de $digest de 329 ms a 236ms.

Otra vista, no tan usada como la primera, tenia 7358 watches y los redujimos a 397 usando ng-if en lugar de ng-show. Luego observamos que el ciclo de $digest se redujo de 938 ms a 249 ms. Lo que me gusta remarcar de este ejemplo es que fue mucho más simple y beneficioso hacer esto que inundar la vista de {{…}}.

Moraleja: afinar la puntería y elegir la forma más simple de tunear.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>