In this article, I will explain how I got started with Compose.

I was interviewing with a company I admire, and I missed the opportunity because they wanted someone proficient with Compose as they are migrating their tech stack from View-based UI to Compose.

If you are looking for opportunities, learning Compose may make you stand out because several companies are migrating their tech stack to Compose.

So, at the start of the year, I challenged myself to learn Compose. I will document my learning process below.

I started by reading the official documentation. That is where I start with a new technology or framework. As I read through it, I understand the philosophy behind the technology or framework. I may take notes on important concepts or the whole framework.

In Compose, I skimmed through the whole documentation. I took notes on key areas.

After going through the primary documentation, I focused on key foundational areas. I started with the first article, ‘Thinking in compose.’ I recommend starting with this article. It gives you a mental overview of how the Compose works.

Later, I separated the remaining concepts into three classes

• Working with static data

• Working with dynamic data

• Testing

Working with static data

This section focuses on how to make the composables. I wanted to learn how to make the composables and style them to make beautiful UI. The two articles I read are

• Components — components are the building blocks in Compose, such as text, lists, and graphics. Components are the first place I started learning about Compose. Articles on components are in the design section. I learned how to handle text, graphics, and lists. I learned how to place items in Column, Row, and Box.

• Modifiers — modifiers help style components. They describe how the component looks, such as padding. They also describe how components behave, such as making components clickable. I learned modifiers to make components look and behave as I desired.

Working with Dynamic Data

In this section, I wanted to learn how to work with the state. The general definition of the state is any value that changes with time.

• Managing state — One of the main differences between composables and view-based UI how they handle dynamic data. When values in the Compose change, the composable whose values have changed is redrawn with new values. Some key concepts I learned are a deeper explanation of state, working with immutable data, stateful and stateless composables, state hoisting, and state holders. State in UI is a new concept in Android. The concepts were not straightforward, soI am still learning.

• Lifecycle and Phases in Compose — lifecycle in Android is how components in Android behave under certain circumstances. Lifecycle in Compose explains how composables behave before, during, and after recomposition. The phases helped me understand how composition happens. The three phases are composition, layout, and drawing.

• Side Effects — the article on side effects explains how a change in a composable may affect other components outside the composable scope. Typically, composables should be free of side effects. However, in some scenarios, side effects are necessary. I learned how to decide when to have side effects and how to avoid side effects when they are harmful.

Testing

Jetpack Compose ships with tools for testing UI components. Testing composables is different from testing views. The main difference is in view-based U you describe the UI element but Compose emits UI elements. I focused on compose specific testing libraries like

• Semantics

• ComposeTestRule

• Finders

• Assertions

• Actions

• Synchronization

Additional Readings

Additional readings are materials I used for reference when learning foundational concepts in Compose.

• Kotlin for Jetpack Compose — I learned some Kotlin language semantics, making it easy to write composables. I refreshed on higher-order functions, default arguments, lambda expressions, trailing lambdas, destructuring, and coroutines.

• Performance — learn how to optimize the application.

• Architecture — learned the unidirectional data flow, where composables accept state and expose events.

The next article I will write on the hands-on learning.