Flutter – Mejorando el rendimiento de una aplicación móvil

1. Que es rendimiento?

Según la documentación de Flutter:

El rendimiento es un conjunto de propiedades cuantificables de un interprete

En este contexto, el desempeño no es la ejecución de una acción en si misma; es que tan bien se desempeña algo o alguien. La cantidad para definir el rendimiento a menudo se denomina métrica.

2. Por que es importante el rendimiento?

• El desempeño es importante y útil porque, en el alcance, el desempeño debe tener propiedades o métricas cuantificables.
• Un informe de rendimiento es fácil de consumir: Las métricas de rendimiento son números, leer un numero es mucho mas fácil que leer un párrafo.
• El rendimiento tiene poca ambigüedad, se refiere a que proporcionar el rendimiento con datos técnicos hace que no hayan confusiones al momento de recibir la información.
• El rendimiento es comparable y convertible. Los números de desempeño no solo tienen resultados inequívocos, sino que también tienen comparaciones inequívocas. Los números se pueden convertir mediante formulas y funciones.
• El desempeño es justo. Si los problemas se basan en palabras detalladas para ser descubiertas, entonces se les da una ventaja injusta a las personas que son mas detalladas.

3. Como hacer que el rendimiento sea útil?

• Hacer que las métricas de rendimiento sean fáciles de consumir. Solo notificar cuando los números cambien significativamente.
• Hacer que las métricas de rendimiento sean lo mas inequívocas posible. Define y describe con precisión como se mide el numero. Haga que el numero sea fácilmente reproducible.
• Facilite la comparación del rendimiento. Por ejemplo, proporcione una linea del tiempo para comparar la versión actual con la versión anterior. Proporcione formas y métricas para convertir una métrica en otra.
• Haga que las métricas de rendimiento controlen una población mas amplia posible, para que nadie se quede atrás.

Para mejorar el rendimiento lo primero que se necesitan son las métricas: algunas cifras mensurables para verificar los problemas y las mejoras.

Los problemas de desempeño se dividen en cuatro categorías. Velocidad, memoria, tamaño de la aplicación y energía.

4. Velocidad

Este es el tema de interés mas citado cuando se trata de medir el rendimiento. Gracias al motor de Skia de Flutter para crear y eliminar widgets rápidamente, por lo que solo se necesita evitar errores comunes para lograr un rendimiento excelente.

• Si las animaciones se ven “no fluidas”, ten en cuenta que debes correr tu aplicación en modo profile.
• Para hacer un track de los rebuild de cada widget sigue los siguientes pasos
  Nota: esto solo se puede hacer en Android Studio.

• Para ver las estadísticas sobre que widgets se están recontruyendo y con que frecuencia, haga clic en mostrar Track widget rebuilds en el panel rendimiento.
• Esta herramienta puede ayudarte a depurar al menos cuatro problemas de rendimiento comunes
  • Toda la pantalla (o partes grandes de ella) están construidas por un solo StatefulWidget, lo que genera una construcción innecesaria de la interfaz de usuario. Divide la interfaz de usuario en widgets más pequeños con funciones build () más pequeñas.
  • Se están reconstruyendo los widgets fuera de la pantalla. Esto puede suceder, por ejemplo, cuando un ListView está anidado en una columna alta que se extiende fuera de la pantalla. O cuando RepaintBoundary no está configurado para una lista que se extiende fuera de la pantalla, lo que hace que se vuelva a dibujar toda la lista.
  • La función build () para un AnimatedBuilder dibuja un subárbol que no necesita ser animado, provocando reconstrucciones innecesarias de objetos estáticos.
  • Un widget de Opacidad se coloca innecesariamente alto en el árbol de widgets. O bien, se crea una animación de opacidad manipulando directamente la propiedad de opacidad del widget de opacidad, lo que hace que el propio widget y su subárbol se reconstruyan.

Para un mejor entendimiento del performance se recomienda ver los siguientes documentos.

1. Performance best practices
2. Flutter performance profiling

Para aprender a usar el performance view de Developer tools de Flutter, lee el siguiente documento:

1. Performance FAQ
2. Using the Performance view

5. Usar la memoria sabiamente

Casi todo en Flutter esta optimizado y mejorado de forma predeterminada, pero hay puntos donde debemos cuidar nuestra manera de realizar una tarea, como escribir una pieza de código adecuada que ocupe la memoria un poco mas cuidadosa y eficientemente.

Aquí se muestra un ejemplo a tener en cuenta:

Cargar imágenes con mucha calidad en un ListView: Esto consume mucha RAM y eventualmente puede crashear la aplicación, esto debido a que ListView mantiene a sus hijos vivos para el proceso entero de realizar el scrolling, los hijos no se repintan, sino se mantienen. Por defecto Listview mantiene a sus hijos en dos cosas:

• Primero, mantienen los estados de los hijos vivos, así que no se pierden cuando el usuario realizar el scrolling de regreso.
• Segundo, el hijo no se repinta de nuevo, incluso si el usuario realizar el scrolling de regreso.
  Para solucionarlo existen dos propiedades que cancelan este comportamiento

addAutomaticKeepAlives (true by default)
addRepaintBoundaries (true by default)

6. Medir el tamaño de tu aplicación

Muchos desarrolladores están preocupados por el tamaño de su aplicación compilada. Cuanto mas grande la aplicación, mas tiempo se tarda en descargar. Flutter genera una APK al momento de depurar el código, pero esta no es representativa, ya que pesa un poco mas por sobrecarga de depuración para la recarga en caliente y la depuración en fuente de código.

Las versiones que se generan con los comandos flutter build apk o flutter build iOS, tampoco se pueden tomar de referencia, ya que el paquete se ensambla convenientemente para su carga en los Stores.

Para obtener el tamaño mas cercado de cada plataforma usaremos la siguientes instrucciones. Play Store y App Store te dan herramientas para que puedas ver el tamaño real de tu aplicación una vez instalada. Ahora usaremos los comandos de Flutter y Dart Devtools para analizar el tamaño de nuestra aplicación.

flutter build apk --analyze-size
flutter build appbundle --analyze-size
flutter build ios --analyze-size
flutter build linux --analyze-size
flutter build macos --analyze-size
flutter build windows --analyze-size

El comando compila Dart de una manera que graba el tamaño del código usado por los paquetes.
El comando muestra un resumen de alto nivel de el tamaño en la parte baja del terminal, y deja un archivo json para un análisis mas detallado y comparaciones de versiones en el Dart Devtools.
Mayor profundidad en DevTools: Para ver DevTools, ejecuta el siguiente comando en tu terminal:

• Flutter pub global run devtools. Selecciona “open app size tool” y sube el archivo json generado en el paso anterior, .
  • Cuando cree una versión de lanzamiento de su aplicación, considere usar la etiqueta --split-debug-info. Esta etiqueta puede reducir drásticamente el tamaño del código. Tambien considere ofuscar el código visitando el siguiente enlace.

Obfuscating Dart code

flutter build apk --obfuscate --split-debug-info=/<project-name>/<directory>

Algunas otras cosas que puede hacer para hacer que su aplicación sea más pequeña son:

• Eliminar recursos no utilizados.
• Minimizar los recursos importados de las bibliotecas.
• Comprimir archivos PNG y JPEG.

Una herramienta mucho mas completa para verificar casi todos los componentes de la aplicación es Dart Devtools, en cual tiene una curva de aprendizaje mediana.

DevTools

Que se puede hacer con DevTools:

• Inspecciona el diseño de la interfaz de usuario y el estado de una aplicación Flutter.
• Diagnostica problemas de rendimiento de la interfaz de usuario en una aplicación Flutter.
• Perfiles de CPU para una aplicación Flutter o Dart.
• Perfiles de red para una aplicación Flutter.
• Depuración a nivel de fuente de una aplicación Flutter o Dart.
• Depura problemas de memoria en una aplicación de línea de comandos Flutter o Dart.
• Ver el registro general y la información de diagnóstico sobre una aplicación de línea de comandos Flutter o Dart en ejecución.
• Analizar el código y el tamaño de la aplicación