Introducción
La evolución de Xamarin.Forms continua centrada en varios puntos donde destaca con fuerza la búsqueda de rendimiento. Con Xamarin.Forms 2.4.0 se introducía (en Android) los Fast Renderers. El concepto de los Fast Renderers es sencillo, simplificar al máximo los costes de renderizado de cada elemento visual.
Ahora, con la Preview de la versión 2.5.0 recibimos también Layout Compression.
¿Qué es Layout Compression?, ¿cómo afecta en nuestras aplicaciones?.
Layout Compression
Para conocer el concepto de Layout Compression junto con su aporte vamos a utilizar una ejemplo lo más «real» posible. Recientemente preparamos un ejemplo donde realizábamos la interfaz de Netflix con Xamarin.Forms. Este será nuestro ejemplo.
Al realizar un diseño cuidado de una aplicación móvil utilizamos una serie de elementos visuales. Estos elementos visuales, a su vez, en cada platataforma en determinadas ocasiones serán envueltos en paneles y otros elementos visuales para facilitar su uso y gestión. A la hora de renderizar cada vista, se realizan una serie de cálculos de tamaño y posicionamiento de cada elemento. Al contar con mayor complejidad, contaremos con mayor anidación de elementos, mayor número de iteraciones serán necesarias para calcular todo.
Layout Compression permite indicar elementos con anidamiento innecesario y optar a no crear layout. Con esta opción habilitada los layouts se optimizarán en tiempo de compilación permitiendo obtener un mejor rendimiento en tiempo de ejecución.
Con Xamarin Inspector podemos tener una listado completo de la jerarquía que compone la interfaz de usuario. Vamos a aplicar Fast Renderers junto con Layout Compression para hacer una comparativa directa cada vista de la aplicación Xamarin.Forms replicando la interfaz de Netflix.
Vamos a comenzar activando Fast Renderers. Para ello, en el proyecto Android, en su actividad principal:
global::Xamarin.Forms.Forms.SetFlags("FastRenderers_Experimental");
Posteriormente es el momento de analizar la aplicación, identificar Layouts (Grid, StackLayout, AbsoluteLayout, RelativeLayout) para comprimir:
<Grid
CompressedLayout.IsHeadless="true">
</Grid>
¿Resultados?
Vista de elección de perfil
Partimos en la vista de selección de perfil. Con Xamarin Inspector realizamos un recuento del número total de Renderers necesarios en esta vista llegando a un total de 71 Renderers.
Tras activar Fast Renderers y utilizar Layout Compression reducimos el número hasta los 51.
- Default: 71 Renderers.
- Layout Compression: 51 Renderers.
Vista principal
Continuamos realizando el mismo proceso con la vista principal de la aplicación. Estamos ante una vista de mayor complejidad. El número total de Renderers sube hasta los 223.
Y utilizando Xamarin.Forms 2.5.0 Pre-Release bajamos a las 169.
- Default: 223 Renderers.
- Layout Compression: 169 Renderers.
Vista de detalles
Llegamos a la vista más compleja con 296 Renderers.
Que reducimos hasta 229 utilizando Layout Compression.
- Default: 296 Renderers.
- Layout Compression: 229 Renderers.
A tener en cuenta
La compresión de un Layout hace que se no cree su Renderer por lo tanto, no funcionarían aspectos relacionados con el Layout como:
- Color de fondo.
- Gestos.
- Transformaciones.
- Etc.
Revisa con cuidado si haces uso de TapGestureRecognizer u otra característica para decidir si puedes comprimir o no el Layout.
Conclusiones
En este ejemplos concreto (hemos intentado utilizar un ejemplo con cierta complejidad a nivel visual) la media de reducción de Renderers es de un 24%. Se exactamente que te estas preguntando, ¿como impactará en mi aplicación?, ¿será más rápida?. La respuesta es si. Antes que nada ten en cuenta que afecta a Android e iOS. En nuestro ejemplo, la aplicación si se nota más fluida aunque todo dependerá de diversos factores como el dispositivo, versión del sistema operativo, etc. En un Oneplus 3 (Snapdragon 820, 6GB de RAM) apenas se notan diferencias mientras que con un Nexus 5 (Snapdragon 800, 2 GB de RAM) si se nota mejora al cargar las páginas.
¿Y a ti que te parece?, ¿has realizado pruebas?. Te animo a compartir tus resultados en los comentarios de la entrada!
Más información
- Xamarin Blog: 3 Big Things To Explore in the Xamarin.Forms 2.5.0 Pre-Release
- Xamarin Help: Xamarin Forms FastRenderers for Android