Mercari reduce 355 000 líneas de código, una diferencia del 69 %, mediante la reconstrucción con Jetpack Compose

Publicado por el equipo de Android

En 2020, el equipo de Mercari tomó una gran iniciativa para actualizar la infraestructura técnica de su aplicación. En este punto, el código base tenía siete años y no había recibido ninguna actualización arquitectónica importante. Esto obstaculizó la capacidad del equipo para desarrollar nuevas funciones y lanzar actualizaciones de aplicaciones oportunas. Para resolver esta deuda técnica, Mercari lanzó la llamada iniciativa GroundUP, una reescritura completa de su aplicación para todas las plataformas, incluido Android.

El objetivo era crear una aplicación completamente modernizada con un diseño escalable. Durante la renovación de la aplicación, los desarrolladores de Mercari recurrieron a Jetpack Compose, el moderno conjunto de herramientas declarativas de Android para crear interfaces de usuario nativas. Durante la evaluación, el equipo aprendió que reescribirlo en Jetpack Compose ayudaría a limpiar su base de código y tener más control sobre la apariencia de la aplicación.

Una reescritura con menos código

El equipo de Mercari ha reescrito por completo la arquitectura y la tecnología de su aplicación de Android mediante Jetpack Compose. Los desarrolladores de Mercari crearon un nuevo sistema de diseño y lo integraron completamente usando Compose, lo que les permitió probar e implementar fácilmente nuevas funciones. Con este nuevo sistema temático, el equipo de Mercari ha reescrito más de 130 pantallas de interfaz de usuario para su mercado y ha modernizado la apariencia de muchos de sus componentes.

Usando las bibliotecas de Jetpack, el equipo de Mercari eliminó todo el código heredado durante la reescritura, reduciendo drásticamente la base del código y haciéndolo más fácil de mantener para los desarrolladores. "Es básicamente la misma aplicación con mucho menos código", dice Allan Conda, líder de tecnología de Android en Mercari. "La aplicación reescrita tiene unas 355.000 líneas de código menos, lo que representa un 69% menos que antes".

Interoperabilidad con Views como uno de los primeros en adoptar

Cuando el equipo de Mercari lanzó por primera vez su iniciativa GroundUP, Jetpack Compose solo estaba disponible en la versión preliminar para desarrolladores. Querían que la aplicación se escribiera completamente en Jetpack Compose debido a su nuevo enfoque declarativo para la creación de IU. Sin embargo, dado que era tan nuevo, tuvieron que buscar casos extremos únicos con ambos conjuntos de herramientas.

Por ejemplo, las pantallas del formulario de listado de Mercari solicitan a los usuarios que ingresen detalles sobre los productos que desean listar. Los usuarios deberían poder seleccionar fotos de la galería de su dispositivo y reorganizarlas en esta pantalla con un gesto de arrastrar. Las API de gestos no estaban disponibles en Jetpack Compose en ese momento, por lo que el equipo usó AndroidView de Compose para integrar a la perfección las vistas que manejaban los gestos en la pantalla del formulario de lista. Esto proporcionó una solución estable pero temporal para implementar gestos de arrastre hasta que la función estuvo disponible con Jetpack Compose.

El equipo de Mercari quedó impresionado con lo fácil que fue cambiar entre los dos conjuntos de herramientas, y la opción de usar vistas junto con Compose les dio un mejor control sobre casos extremos como este. Compose ahora es compatible con las API de gestos y, desde entonces, los desarrolladores de Mercari han escrito e integrado el componente de gestos de arrastre exclusivamente con Compose.

Jetpack Compose ha madurado mucho desde el inicio de Mercari, y la mayoría de los desarrolladores de Android ya no necesitan preocuparse por interactuar con ninguno de los conjuntos de herramientas porque las aplicaciones de Android ahora se pueden escribir completamente en Compose.

Mejorar y monitorear el rendimiento con Compose

Con Compose, el equipo de Mercari automatizó la generación de perfiles de referencia para cada versión estable de la aplicación y lo encontró muy útil. La pantalla de inicio representa fotogramas hasta 2 veces más rápido con el perfil de línea de base predeterminado de Componer que sin un perfil de línea de base. Al proporcionar un perfil personalizado, hay una mejora adicional de hasta un 20 % más rápido cuando los usuarios de Mercari se desplazan en comparación con solo el perfil de referencia predeterminado.

El equipo también escribió pruebas de rendimiento automatizadas basadas en los escenarios centrales de la aplicación utilizando Android Macrobenchmark. "Android Macrobenchmark nos permite probar automáticamente los tiempos de inicio, desplazamiento y carga de pantalla", dijo Allan. "Actualmente, tenemos seis escenarios centrales que están cubiertos por estas pruebas, como resultados de búsqueda y elementos de navegación".

Además, los desarrolladores de Mercari integraron Firebase Performance Monitoring, una herramienta de monitoreo de rendimiento de aplicaciones en tiempo real, con código personalizado para calcular el rendimiento de desplazamiento en las pantallas de redacción. Mediante Firebase Performance Monitoring, el equipo de Mercari encontró un problema de rendimiento en su pantalla de resultados de búsqueda. Al usar Android Profiler para identificar el problema, los desarrolladores de Mercari encontraron velocidades de cuadro bajas al desplazarse por los resultados de la búsqueda. Esto dio como resultado que las instancias de renderizado lento se redujeran en aproximadamente un 23,6 %.

El equipo de Mercari resolvió este problema de velocidad de fotogramas utilizando las prácticas recomendadas de Google para el rendimiento y la estabilidad de Compose. Los desarrolladores de Mercari hicieron que la aplicación omitiera sus componibles y mostrara los estados no utilizados en la pantalla de resultados de búsqueda, lo que mejoró en gran medida la velocidad de fotogramas.

Más posibilidades con Jetpack Compose

Con menos código para mantener, es mucho más fácil para los desarrolladores de Mercari probar e implementar funciones. “Tenemos muchos experimentos que finalmente podemos hacer con nuestras plataformas actualizadas. Nuestros usuarios pueden esperar que las nuevas funciones lleguen a la aplicación de Mercari más rápido”, dijo Allan.

Los desarrolladores de Mercari esperan seguir desarrollando la aplicación utilizando las API de animación. Compose hace que sea mucho más fácil animar componentes, lo que puede conducir a grandes mejoras para Android UX.

Empezando

Optimice el desarrollo de su interfaz de usuario con Jetpack Compose.