Build server-driven personalized UI using Jetpack Compose
This is my second attempt to learn and explore Jetpack Compose. I tried exploring it once it was just released. At that time Android Studio supporting it was not very reliable. But today, even I am using the canary build it is very mature and worth triable. If you have a keen interest in how Android development is changing day by day then I would recommend this blog to you.
Thanks to my colleague, Akshay Sethi, who motivated me to write a sample app and blogpost on this. This blog will give you a head start if you want to explore it.
Here is a comment from Romain Guy (Android Toolkit team lead at Google) where he explains the ease of creating custom UI components using kotlin APIs. Jetpack Compose aims for Less Code, Intuitive-ness, Accelerating Development and Powerful framework APIs.
If we summarise all about Jetpack Compose then it is the Android’s modern toolkit for building native UI. ✔️
To answer why Jetpack Compose came into existence and others why and how then we need to understand some questions. ❓
What is Backend/Server driven/controlled UI/UX?
Before understanding what is Jetpack Compose, we need to understand what is backend-driven UI.
Many of us have heard about epoxy, litho or some other library or framework to enable server-driven UI, especially for home page personalization to enhance user experience based on user’s activity. There might be many other use-cases of our server-driven UI but let’s stick to this for clarity.
Frameworks from Win32 to the web to Android and iOS typically use an imperative style of UI programming. This might be the style we all are most familiar with — where we manually construct a full-functioned UI entity, such as a View or equivalent, and later mutate it using methods and setters when the UI changes.
Inverse to this, Jetpack compose introduced the declarative style of UI programming. In recent years, technologies like, react, flutter, iOS (SwitftUI) are moving toward the declarative style of UI programming.
What is Declarative UI?
Declarative UI means you describe in some kind of language what elements you need in your UI, and to some degree how they should look like, but you can leave out details like the exact position and visual style of the elements.
We are aware that the Android platform is a grown man 👨 now and in terms of creating UI, the approach has been the same from the beginning 👦. If you look at the View class, it has ~30KLOC, 29843 LOC to be exact. This leads to some serious technical debt 😞 directly or indirectly whenever we create any view as all the UI component extends this class.
Introducing Jetpack Compose has solved this problem along with many others. 😄
To keep us updated about this sudden change in UI creation pattern, we have created a sample demo depicting one of the popular travel apps. 🏃 🚋
Introducing our travel application 🚆
To figure out how Jetpack Compose works and how capable it is. We have created a sample application depicting one of the popular travel application’s design. We break most of the screen into the component that is we break the home page into drawer and body content. Subsequently, Drawer into drawer button and body into the toolbar, component1, component2, bottom navigation, etc.
We can break the component to the granular levels so that we can use them as a single customizable UI component. This is because of powerful APIs provided by Jetpack Compose over the kotlin framework. Since we are reusing most of the components independent of where it is placed, we simply write less code to achieve our custom UI in a faster time which accelerates our development process.
Have a look at our Sample: 💻 https://github.com/mwshubham/JetpackCompose
Feel free to drop your queries, I will try to answer with the best of my knowledge. Give a star if you like the sample work on GitHub. 🌟
Where is jetpack today (April 13' 2020)?
No doubt there was a need to change Android’s UI toolkit and Jetpack Compose is the way it should have evolved rather than being an alternative.
However, there is still some time for Jetpack Compose to get more mature and fit into our modern architecture. I am pretty sure Jetpack compose might be a good thing to showcase in Google IO 2020 if it wasn’t canceled due to the epidemic. 😥
Even though everything is almost right, There is a performance issue when it comes to rendering a large list of UI components. Even though it is claimed to work like a RecyclerView.
On several occasions, we find some scrolling and touch issues. e.g. scrolling the body component something hampering with the application drawer’s opening and closing. Something similar happens when we set the android:windowSoftInputMode to adjustPan.
Conclusion
If you are keen on the latest mobile application development pattern. I would recommend you to try-it-out once. Android Studio will soon release beta and stable versions to support Jetpack Compose but for now, we are good to explore it in the canary versions as well.
I just want to inform you that, their development APIs are changing drastically, even from migrating from dev-07 api to dev-08 api version, it requires a significant amount of work. So better be prepared for this.
IMO, It is not production-ready but it might change how native android development UI creation works in the upcoming year.
I am also adding a few important references that will help you throughout the journey of exploring Jetpack Compose.
Important Reference:
Stay tuned !! Claps if you like it. We are starving for it.
#Peace
You can connect with me for more content and motivate me to write more.
Connect with me:
