Cocinando un Out of memory con MasterPageDetail, CarouselView y unos cuantos gramos de imágenes

Capítulo I: Introducción

Hace unos meses que comenzamos un desarrollo en Xamarin Forms. El mismo contiene varias secciones, accesibles mediante un menú lateral oculto, o para los entendidos, MasterPageDetail. La aplicación en general tiene buena performance, salvo en una página… que tiene un Carousel. En un principio usábamos CarouselPage, pero luego de agregar el menú comenzamos a usar la componente de CarouselView (por esto y otros motivos que no cabe destacar ahora).

Capítulo II: El problema

Esto sucedía sólo en Android. Como la app en ese momento no era muy grande, no notábamos la baja performance, pero a medida que empezamos a compararla con los desarrollos nuevos… lo empezamos a notar. Cuando se accedía a la sección parecía que el mundo se detenía y luego de unos segundos se mostraba el contenido… y a veces directamente crasheaba mostrando un hermoso “out of memory”. Haciendo un análisis más detallado nos dimos cuenta que entrando una y otra vez a la misma sección la memoria usada por la app crecía y crecía… hasta colapsar.

Capítulo III: Comienza la batalla

Lo primero que intentamos fue que la MasterPageDetail utilice siempre la misma instancia de la NavigationPage, y que no genere una nueva. Esto nos sirvió como mejora para todas las otras NavigationPage. Pero el problema seguía.

Lo segundo fue que la información de la página se cargue asincrónicamente, y que mientras carga se muestre un bonito spinner girando… pero misteriosamente la app se trababa antes de mostrar el spinner.

Lo tercero que probamos fue cachear la información para que se accedan datos locales y no se acceda al servicio todo el tiempo… pero así y todo el delay seguía.

Todos estos conceptos nos ayudaban a mejorar la performance de la app… pero no nos liberaban del maldito out of memory.

Capítulo IV: La solución

Analizando componente por componente, y coincidiendo con algunos posts que encontramos colgados en la web, el problema eran las imágenes dentro del Carousel. Una opción era hacer lo mismo que con el menú e instanciar las imágenes como objetos para que no se creen una y otra vez… pero al tener Listviews y Bindings se tornaba un poco oscuro… asi que finalmente probamos instalando FFimageloading desde Nuget (la componente para Xamarin Forms -> https://github.com/luberda-molinet/FFImageLoading/wiki/Xamarin.Forms-API).

La instalación es bastante fácil, se baja desde el Nuget y luego hay que inicializarlo en las plataformas donde lo vayamos a usar (está explicado en la documentación). Luego, reemplazamos los Image del xaml, por CachedImage, y no cambiamos ningún atributo más… y no sólo dejó de crasehar, sino que el delay se redujo a casi nada.

Capítulo V: Resumen

  1. MasterPageDetail + CarouselView + Imagenes + Android = Problemas
  2. Instalar FFImageLoading desde Nuget
  3. Reemplazar Images por CachedImages

Si encontraron otras soluciones no duden en compartir !

Like what you read? Give Garudaslap a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.