Forem: Musyoka Muasya

Jetpack Compose Hands-on Practice: My Journey Part 2

Musyoka Muasya — Fri, 17 Feb 2023 09:07:40 +0000

In this article, I will explain my first hands-on experience with Jetpack Compose. It builds on my previous article where I explored the theory behind Compose.

The hands-on practice has three parts

GitHub
Code labs
Project

GitHub

I read through tons of code to see whether I understood and could pick the patterns. I have been building on Android with Kotlin, and I could understand most parts, though I could not replicate them. Reading code samples helps me see how other developers implement features, and I also understand the common patterns I need to focus on.

Google learn Github has code samples where you learn the recommended way of building apps. https://github.com/android/compose-samples

Codelabs

Codelabs are short guided tutorials on implementing a feature, library, or concept. They have a step-by-step, hands-on guide coding experience where you are guided to implement the feature. I have been using codelabs for foundational knowledge of new features.

Below are the codelabs I used to gain practical hands-on experience with Compose.

Jetpack Compose basics

In this codelab, I had my first real hands-on experience with Compose. I also had a broader overview of Compose. It has basic concepts such as

Setting up a Compose application - here, you start a new compose application, set up the dependencies and build your application. I recommend using Bill of Materials since it makes dependencies easily manageable. Also, do not download the solution code yet. It is better to follow the step-by-step guide. When you encounter a blocker, check the cause and find a solution online.
Declaring and calling composable functions
Using the default app theme and creating a design preview.
Hands-on with basic building blogs like text, images, row, column, box, list and modifier.
Grasp of state, state hoisting and persistence.
Animations and theme - In this section, you change the default theme to your desired theme.

There is no catch in this codelab. It was my first hands-on, and I enjoyed seeing the design come to life.

Basic layouts in Compose

In this codelab, I learned more about designing UI elements. A deep understanding of layouts is critical in Compose. They help you replicate UI designs, foundational to a great user experience. You also learn how to follow the material design recommendations in Compose.

In this article, I learned the designing process using Compose. I took time to work with the common UI elements. One way to gain from this codelab is to take time and explore how to design other components. I use dribbble.com and behance.net for design inspirations.

Some of the components I learned through the codelab are

TextField and associated TextFieldDefaults.
Designing normal text.
Importing and using Icons.
Aligning content in row, column and box.
Handling collections and scrolling through them.
Slot API - handles different sections with a similar pattern.

State in Jetpack Compose

In this codelab, I learned how to handle dynamic data and behavior in Compose. Compose uses state and events extensively to display elements on the screen. In this codelab, I learned

How to think about state and events.
The practical difference between stateless and stateful composables.
How to hoist state and the recommended practice in hoisting
Persisting state using remember and rememberSaveable
Using ViewModel as state holder for Compose

I had to refresh on some concepts of state, lifecycle, and state hoisting theory. State is another important concept in Compose. You need to spend time and ensure you understand how to handle state and events as other concepts in android build on them.

Advanced State and Side Effects in Jetpack Compose

After the first state codelab, I found this codelab useful. It builds upon knowledge from the first state codelab. In this codelab, you will learn advanced concepts in handling state in Compose.

Some of the concepts I learned in this codelab are

Create state holders beyond ViewModels.
Streaming data from state holders like ViewModel using Livedata, RxJava2, and Flow
Side effects using rememberUpdatedState, productState, LaunchedEffect and DisposableEffect
Using Coroutines in Compose.

The concepts in this codelab are quite advanced. I was frequently searching for how to implement most parts. I prefer reading over watching, so I read several articles, especially at https://proandroiddev.com/ and https://www.kodeco.com/. Like many concepts in programming, it gets better with practice.

Jetpack Compose Navigation

Navigation was my next challenge after state.

The key concepts I learned from the codelab are

Creating routes for navigation destinations
Creating a navigation graph and connecting it with NavHost
Enabling common navigation host
Building, triggering, and verifying deep links
Navigation with arguments.

Testing in Jetpack Compose

In this codelab, I learned how to test UIs created using Compose. I combined this codelab with the last part of Compose Navigation which tests navigation. I learned

Unit testing UI elements
Using Test Driven Development in Compose
Using semantics tree in Compose tests
Merging semantics trees
Synchronizing tests and subjects under test
Testing Navigation components

The codelab is not exhaustive on all tests you can perform in compose. However, it offers solid foundation on testing in Compose. To learn more on Compose test, kindly check Compose cheat sheet https://developer.android.com/jetpack/compose/testing-cheatsheet

Project

The end goal of learning Compose was to build projects. With practical knowledge in layouts, state, navigation, and testing, I had a foundation to build a project with Compose. I could learn other concepts like animations, theming, and accessibility as I built the project.

I chose to rebuild one of my side projects in Compose. You can get design inspirations at behance.net and dribbble.com.

Conclusion

Learning a new technology can be boring and time intensive. Learning Compose is an iterative process and some concepts like state management may not come easy. However, concepts will become clearer and you will be building faster.

Getting Started with Jetpack Compose: My Journey

Musyoka Muasya — Tue, 14 Feb 2023 09:30:20 +0000

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 for a new technology or framework. As I read through the 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, so I 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 Effectsthe 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 - Here, 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.