Clue’s growth velocity improves 3X after rebuilding the app with Jetpack Compose


Posted by the Android staff

Clue is a freemium menstrual well being software based in 2012 and was among the many earliest builders in femtech. The app helps girls and individuals who menstruate monitor their cycles and serves 11 million month-to-month energetic customers in over 190 international locations. Further options, together with instruments for monitoring prenatal and postpartum well being, can be found by the app’s subscription tier, Clue Plus.

Getting access to streamlined and simply digestible menstrual well being information might be a useful useful resource for individuals who menstruate, and Clue has supported these insights for Android customers for over a decade. As with every codebase, nevertheless, the Clue app inherited technical debt. This restricted the staff’s capability to push adjustments and options shortly, scale developer efforts, and supply a contemporary UI to its customers.

Clue beforehand relied closely on customized views that made extending the present codebase tough and required time-consuming testing strategies that slowed the event course of. Clue’s codebase had moreover amassed UI inconsistencies from hard-coded theme values similar to colours and sizes, and in 2022 Clue’s engineers acknowledged that they wanted a extra environment friendly and versatile resolution. They finally landed on migrating to Jetpack Compose, Android’s trendy toolkit for constructing native UI.

“We determined {that a} full rewrite of the applying, with a selected emphasis on the UI layer, could be the most effective plan of action,” stated Moctezuma Rojas, an Android developer at Clue. “This choice was primarily based on the truth that it might allow us to have a extra environment friendly and quicker growth cycle, shortly implement options that might have taken for much longer to develop utilizing views, and make our code extra testable.”

Constructing a quicker and extra environment friendly codebase with Compose

The Clue staff noticed rapid advantages by rewriting its app with Compose. For one, a quicker, extra environment friendly testing and growth cycle considerably diminished the effort and time vital to enhance the codebase whereas lowering bugs and errors. Compose additionally enabled Clue’s engineers to implement options quicker than they might with Views.

Migrating the app to Compose resulted in improved testability for screens, quicker growth from ideation to launch, and higher standardization processes that aligned with the most effective practices beneficial by Android developer resources. Compose additionally helped the Clue staff double—and in some instances, triple—their growth velocity when in comparison with the outdated codebase.

“With the standard view system, including new options, visible representations, or consumer interactions was tough because of the want for customized view creation and upkeep. Nonetheless, by using Jetpack Compose, we have been capable of effortlessly develop and develop the Cycle View function with none limitations in including components,” stated Moctezuma.

Photo of Moctezuma Rojas, Android developer at Clue,smiling while snuggling a cat, with quote text which reads, '...By utilizing Jetpack Compose, we've been able to effortlessly develop and expand the Cycle View feature without any limitations in adding elements.'

Compose additionally helped Clue’s builders shortly overhaul a number of different vital options inside the software, together with Calendar View, Evaluation View, and the account administration and settings screens.

Extra creativity made doable with Compose

Compose enabled builders to make Clue screens extra intuitive, enhance scrolling, and deploy a customized colour system and part library that aligned with the model—an enormous win for the staff. Beforehand, including new options, visible representations, or consumer interactions was sophisticated as a result of they required making a customized view and ongoing upkeep.

Compose APIs made it a lot simpler to check UI so Clue builders felt extra assured about what they have been transport to customers. As an additional benefit, Clue builders now have more room for exploring UX innovation.

“The customized dynamic theming permits designers to freely discover their creativity with out being restricted by technological constraints,” stated Moctezuma. “It offers a versatile and scalable method to styling that may be simply tailored as our app evolves and grows, leading to a visually interesting and cohesive consumer expertise.”

All of those adjustments vastly improved the consumer expertise for Clue subscribers, leading to fewer error messages and bug experiences. The Clue staff additionally says that utilizing Compose has enabled them to determine areas of enchancment within the app’s code that might have doubtlessly impacted its customers.

“Compose will increase developer velocity by eliminating boilerplate code, works seamlessly with the present code base due to its Interoperability APIs, and improves UI testing—which has at all times been painful in Android growth,” stated Tilbe Saltan, a senior Android developer at Clue.

Continued success with Jetpack Compose

Compose has improved every subsequent app launch and made preview and reside enhancing options extra dependable for Clue engineers, permitting for a extra versatile growth expertise from begin to end. Since implementing Compose, the Clue staff has additionally seen pleasure from potential candidates enthusiastic about engaged on the app to allow them to work with extra trendy growth applied sciences.

“The way forward for Compose holds many potential growth areas that might profit builders and corporations. As Compose continues to evolve, we are able to count on to see extra enhancements in efficiency, stability, tooling, and cross-platform help, which is able to make it an much more compelling selection for constructing high-quality UIs,” stated Tilbe.

Get began


Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button