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 Mercari El equipo ha tomado una gran iniciativa para actualizar la infraestructura técnica de su aplicación. En ese momento, su base de código tenía siete años y no había sufrido ninguna actualización de arquitectura importante. Esto afectó la capacidad del equipo para desarrollar nuevas funciones y lanzar actualizaciones de aplicaciones oportunas. Para resolver esta deuda técnica, Mercari lanzó lo que llamó la iniciativa GroundUP, una reescritura completa de su aplicación en todas las plataformas, incluido Android.

El objetivo era crear una aplicación totalmente modernizada con un diseño escalable. Durante la reorganización de la aplicación, los desarrolladores de Mercari recurrieron a Esfera de mochila propulsora, el moderno conjunto de herramientas declarativas de Android para crear una interfaz de usuario nativa. Durante la evaluación, el equipo aprendió que volver a escribir en Jetpack Compose ayudaría a limpiar la base del código y les daría más control sobre la apariencia de la aplicación.

Una reescritura con menos código

El equipo de Mercari reescribió 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. Usando este nuevo sistema de diseño, el equipo de Mercari reescribió más de 130 pantallas de interfaz de usuario para su mercado y modernizó la apariencia de muchos de sus componentes.

Con la ayuda del Bibliotecas Jetpack, el equipo de Mercari eliminó todo el código heredado durante la reescritura, reduciendo drásticamente su código base y haciéndolo más fácil de mantener para los desarrolladores. “Básicamente es la misma aplicación con mucho menos código”, dijo Allan Conda, jefe de tecnología de Android en Mercari. “La aplicación reescrita tiene unas 355.000 líneas de código menos, o un 69% menos que antes”.

Imagen en movimiento que muestra líneas de código que aparecen y desaparecen en el panel más a la izquierda de la pantalla.  El espacio entre los cuadros en el panel central cambia y la vista general de la aplicación refleja estos cambios en el panel más a la derecha.

Interoperabilidad con Views como usuario inicial

Cuando el equipo de Mercari comenzó 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 crear la interfaz de usuario. Sin embargo, debido a que todavía era tan nuevo, se vieron obligados a resolver casos extremos únicos utilizando ambos conjuntos de herramientas.

Por ejemplo, en las pantallas del formulario de cotización de Mercari, se solicita a los usuarios que ingresen detalles sobre el producto que desean ingresar. Luego, los usuarios debían poder seleccionar fotos de la galería de su dispositivo y reorganizarlas en esta pantalla con un gesto de arrastrar y soltar. La API Gesture no estaba disponible en Jetpack Compose en ese momento, por lo que el equipo aprovechó AndroidView de Compose para integrar sin problemas las vistas que manejaban 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 era cambiar entre conjuntos de herramientas, y la capacidad de usar Views junto con Compose les dio un mejor control de casos extremos como este. Compose ahora es compatible con las API de gestos y, desde entonces, los desarrolladores de Mercari han escrito e integrado completamente el componente de gestos de arrastre usando Compose exclusivamente.

Jetpack Compose ha madurado mucho desde la adopción inicial de Mercari, y la mayoría de los desarrolladores de Android ya no necesitan preocuparse por interactuar con ambos conjuntos de herramientas, ya que 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ó perfil basico generación para cada versión estable de la aplicación y la encontré realmente ú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 el perfil básico predeterminado.

El equipo también escribió pruebas de rendimiento automatizadas basadas en escenarios clave de la aplicación con Puntos de referencia de macros de Android. “Usando Android Macrobenchmark, podemos probar automáticamente el rendimiento de los tiempos de inicio, desplazamiento y carga de la pantalla”, dijo Allan. “Actualmente, tenemos seis escenarios principales cubiertos por estas pruebas, como resultados de búsqueda y elementos de navegación”.

Además, los desarrolladores de Mercari han integrado Monitor de rendimiento de base de fuego, una herramienta de supervisión del rendimiento de la aplicación en tiempo real, con código personalizado para calcular el rendimiento de desplazamiento en las pantallas de Redactar. Mediante Firebase Performance Monitoring, el equipo de Mercari descubrió un problema de rendimiento en la pantalla de resultados de búsqueda. Utilizando el perfil de Android Para identificar el problema, los desarrolladores de Mercari descubrieron que había velocidades de fotogramas bajas al desplazarse por los resultados de búsqueda. Esto dio como resultado una reducción de las instancias de renderizado lento en aproximadamente un 23,6 %.

El equipo de Mercari solucionó este problema de velocidad de fotogramas con la orientación de Google Componer las mejores prácticas para el rendimiento Y Estabilidad del dial. Los desarrolladores de Mercari hicieron estallar la aplicación Modular Y levantar estados no utilizados en la pantalla de resultados de búsqueda, mejorando significativamente la velocidad de fotogramas.

Foto de cabeza de Allan Conda, Android Tech Lead de Mercari, similar, con una cita que lee

Más oportunidades 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 un montón de experimentos que finalmente podemos ejecutar usando nuestras plataformas actualizadas. Nuestros usuarios pueden esperar nuevas funciones en la aplicación de Mercari a un ritmo más rápido”, dijo Allan.

Los desarrolladores de Mercari están emocionados de seguir desarrollando la aplicación usando API de animación. Con Compose, es mucho más fácil animar componentes, lo que puede conducir a grandes mejoras para Android UX.

Comenzar

Optimice el desarrollo de la interfaz de usuario con Esfera de mochila propulsora.

Compruebe también

La primera vista previa para desarrolladores de Android 15

Publicado por David BurkeVicepresidente de Ingeniería Hoy lanzamos la primera vista previa para desarrolladores de …

Deja una respuesta

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