Lessons learned when migrating my app to Jetpack Compose
Recently I decided to port my whole application, Alkaa, to Jetpack Compose. In the first moment it was very challenging, specially because I had no previous experience with declarative UI toolkits. But after some trial-error (and a lot of help from the community), the development started to be easier and more intuitive in my mind. The intent of this article is to share the lessons I’ve learned during the process, as well as some references that helped me a lot during the development.
Alkaa is my playground, a safe place to test and learn a lot of new tools without impacting my professional projects. If you want to learn more about the importance of creating personal apps, please take a look on this article.
Start in a sandbox
My first recommendation is to not implement Jetpack Compose in a production application right away. At the moment, the framework is in Beta and some critical bugs are been fixed before the stable release. As if that were not enough of an obstacle (or you are reading this article after the stable release), Jetpack Compose brings a paradigm change to the table: the declarative UI.
Some key concepts like State, Hoisting and Single Source of Truth differs from the traditional Android View and XML way. Consider creating a sandbox project or migrate one of your pet projects to Compose first. It will help you be more receptive to the new paradigm, learn the dos and don’ts, make a lot of mistakes and grow confidence during the process.
Another recommendation is that you don’t need to migrate the whole project to Jetpack Compose. Due to the great interoperability provided by Google, it is possible to migrate only one Activity or Fragment at a time. By doing so, it is possible to migrate just one flow, stabilize and test it before moving on.
Review your UI and business logic coupling
One thing that helped me a lot during the migration of Alkaa to Jetpack Compose was the separation of concerns that the application already had. Once all the business logic were well separated from the View, one of my first commits was to simply remove all the code from the UI modules.
All the Activities, Fragments, ViewModels and XMLs were removed but all the business logic remained intact and ready to be used in another user interface. In my case the ViewModels were removed because I wanted to use new tools (see next section) and wanted to remade them using TDD. Otherwise, I could have used it as was without any issue.
If you want to migrate an existing project, one tip is to review how your UI and business logic are coupled. Maybe it need some refactor to reduce this coupling, which will make the migration smoother.
Try new tools
Once we are diving into a new world, why does not give a shot for new tools and libraries? Sure, Compose supports LiveData but how about using Flow instead? If your project is using ReactiveX, maybe it is a good moment to start learning Coroutines.
There are no hard constraints with these newer tools due to Compose interoperability, but learning new tools (specially in your sandbox) is a great way to build a range of alternatives.
Learn testing
Unfortunately, I believe that testing is underestimated overall. It is very common to find articles about several ways of using a technology, but only a few on how to test it. Since we will start learning a new toolkit like Compose, which is a game changer in how to create UI, it is a great opportunity to learn from Day-0 how to test it as well.
If you are familiar with Espresso, you will find many similarities with Compose Test. However some differences like the Composable not having unique identifiers in comparison with Android View System (android:id) needs some attention on how to access the components.
Take into account that testing is a very important part of the development, and trying to learn it along with the development will make everything easier in the future.
We won’t master it at first
Remember when you first started developing in Android? All the unnecessary nested layouts, some context leaks, difficulties on deciding which code stays where? Probably you will face it again with Jetpack Compose. And that’s okay!
During the migration of my application, I’ve searched several times how to do very simple stuff like “how to center a text on a view” or “how to create a round button”. I really felt like I was learning how to develop in Android again, specially since it was my first time working with a declarative UI framework.
Sometimes I was “stuck” when developing a feature because I didn’t know how to create a better or more scalable solution. The rule that helped me a lot during these times were “just keep swimming”. Compose is such a recent framework that we still did not have the time to settle on the best practices. So, I just set the goal to “just make it work”, after that I could debug and analyze the performance and scalability. This also emphasizes the importance of developing in a sandbox: now it is time to make mistakes.
Another point of developing in Compose is that there are not much content about it at the moment, like any new technology. Probably you will have some difficulties searching for examples and definitions during the development. This article has a dedicated section in the ending with some great content and references that helped me a lot during the migration.
Also, a lot of best practices and libraries were created halfway for the Android View System and for Jetpack Compose this won’t be different: we already have great tool and a lot more is coming. The community is creating a great tool together!
Help the community
One key aspect of learning a new tool is sharing your new knowledge to the community. Especially with such a new tool, it is important to share your findings because there are not enough content available yet. Each obstacle that you faced and overcame for sure will help a lot other developers.
In my case, if it weren’t for the great community support I had specially on Slack, I probably would have spent much more time struggling with the challenges I faced. Consider writing about some challenges you faced, regardless of the complexity: Did you have a hard time with a BottomSheet? Found a better way to hoist your components? Created an extension that was useful for Composables? I’m sure that someone in the community will face a similar issue and your contribution will help a lot!
In the end of this article you will find a section with some useful resources I found during my studies. Please, feel free to suggest more material that helped you during your process as well.
Final thoughts
Learning a new technology is always challenging and can make us anxious, specially due to the frequency that new tools are released. It’s no different with Jetpack Compose, a new and shining tool that everyone is talking about. However, I believe that it will take some time until Compose become mainstream and be required for professional projects. So, before struggling with the challenges I faced on this, be kind with yourself: it is not a race, it’s a marathon. And making this task as collaborative as you can, will definitely make it smoother for you and your fellow developers.
All the Alkaa code is available on GitHub. Please, take a look and feel free to use it in your studies! 😊
Useful resources
New technologies have limited content during its earlier days. During the development, I found some very useful resources that I want to share with you:
- Getting started with Jetpack Compose — Official documentation with a lot of useful content, such as states, lifecycle, layout, animation interoperability, and much more.
- Compose Samples — Official repo with 8 projects in Compose addressing different components and scenarios. A great source that matches more real-world scenarios.
- Thinking in Compose — Awesome video by Leland Richardson with a great overview and key concepts of Jetpack Compose.
- Jetpack Compose: State — Amazing video by Florina Muntenescu showing key concepts such as State, Hoisting, Remember and else.
- Kotlinlang Slack #compose — Official Compose channel in Kotlin Slack. A lot of great discussions and possibly the best source of information out of the box at the moment.
- Jetpack Compose Playground — A community-driven collection of Jetpack Compose demos. It has a lot of great snippets to help your development.
- Google Codelabs — Official codelabs for Android development. It covers basic Compose principles, theming, layout and animations.
Thank you for reading my article and I also want to thank all the developers that helped me during the development. You all made my challenge smoother and fun all along! ❤️
