Jetpack Compose and why it will revolutionize Android development

#android #mobile #jetpackcompose #kotlin

Introduction

For the past 10 years android development has not been the best nor it was the easiest. It was plagued with too much boilerplate code. Making a view that shows text (textview), connecting it to an activity, and changing its text would require you to do multiple steps. Now imagine if you have a very complex application that requires you to work with different views. It was simply nerve-racking. A few months ago, however, Jetpack Compose beta version was released and it completely changed this process by going back to the roots.

In February of this year, the beta version of Jetpack Compose has been finally released which means we can finally test it fully knowing that the full features are there and that only bugs will be worked on. I was one of the many people who did and my experience was nothing short of awe-inspiring. I was shocked of how easy it was to the degree that it almost made my eyes teary of how bad I felt about poor-oh-me who used to code in Java and XML.

In this post I'm hoping to present a point that fits both the experienced and aspiring android developers perspective so they can make an educated decision about where they stand from Jetpack Compose.

Btw, Moving forward I will call it JC to save myself the trouble of tapping a few keystrokes. 😁

The process before Jetpack Compose
Jetpack Compose to the rescue
- What is Jetpack Compose?
- Examples of Jetpack Compose
Where to go to learn Jetpack Compose?
Potential FAQs
Conclusion

The process before Jetpack Compose

To understand why JC is such a big deal one must understand how we, android developers, used to suffer in order to do a minimal task.

One of the things that should not be that problematic is to show text on screen. I will list the steps from a Java point to put an emphasis on how demanding this process was in the following steps:

Have two files, a .java and a .XML file. The java file will control the behaviour while the XML file will have the UI view in it.
Use the following code in the XML file to make the textview that will be used to show the text. Notice all the weird properties.

    <TextView
        android:id="@+id/text_view_id"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:text="Unchanged text" />

In the java file, we first need to "find" the view. Since the standard method was a tree hierarchy, we first need to get the parent so that we can find the child. To do that, we prepare a variable for this view, use the findViewById method to get the view using the code below.

    TextView textView = findViewById(R.id.text_view_id);

After we successfully get the view we then change it using the setText method.

    textView.setText("The text has changed");

If you think this is complicated, wait until you see how recyclerviews are (recyclerviews are what makes scrollable lists in android). There's so much boilerplate code involved in it (3 java classes and a custom XML layout) that developers had to make libraries just to reduce the time needed to make them. Obviously, the bigger your app is and as it grows, your code just grows uncontrollably with it.

Jetpack Compose to the rescue

JC came and completely flipped this scenario upside-down. For starters, XML files are not used anymore! All the views are now functions that are simply called in other functions. If this sounds similar to React, then you are right. The process, albeit syntactically different, is very similar in concept.

What is Jetpack Compose?

Jetpack Compose is Android’s modern toolkit for building native UI. It simplifies and accelerates UI development on Android. Quickly bring your app to life with less code, powerful tools, and intuitive Kotlin APIs. - Source

If you've dealt with React then you can be sure that JC will be easy for you since the concept is very similar. You create composable functions that get called in other composable functions. If the state changes in one of these composables then it gets re-rendered again without affecting other components.

Examples of Jetpack Compose uses

So let's take the example above and try to do it in JC by following these steps.

First create the function that will be used to show the result we need

    @Composable
    fun TextExample(passedText: String){
        Text(text = passedText)
    }

Call it in another component while changing the text

    TextExample("This is my text")

This was very simple. No ids or no views needed.

I can see your intrigued face thinking about how different are Recyclerviews going to be. Look at the following example:

    @Composable
    fun MessageList(messages: List<Message>) {
        LazyColumn {
            items(messages) { message ->
                Text(message)
            }
        }
    }

That's literally it. I think now you can see why this blew up my mind. What used to take me a long time to implement now takes me minutes if not less. Also, they're lazy columns now, not recycle views.😎

Resources to learn Jetpack Compose

If you've reached this part then you might want to find some resources to teach yourself Jetpack Compose. As it stands I wouldn't recommend watching videos online since they might be old and using deprecated or different methods. Instead use their own curated pathway course. It's free, gets straight to the point, and easy.

Potential FAQs

You mentioned Jetpack compose's resemblance to React. Does that mean that I, as a web developer, can work normally on android now?

Hold your horses. As I stand by my claim that JC resembles React, Vue.JS, etc. it's still only a UI toolkit. There's more to Android development than this. There are lifecycles, gradle, fragments, background services, gradle, liveData, Room, RxJava, gradle and more things that constitutes Android development. However, I believe that learning Android development is gonna be easier after this great addition. If this intrigues you then give it a try though, hopefully you're gonna have a more joyful time than I did back when I started with android.🙄

I'm new to Android, should I go with Jetpack Compose or learn the old ways?

From what I see, JC is definitely here to stay. It's the first change in the core UI practices of android since android was a thing. It's obvious that a lot of time, money, and research has went into this and that proves that it can be a good pointer for what Google is planning and what the market would be heading towards.

I already have an app. Should I and Can I incorporate Jetpack Compose to it?

From what I learned and understand, yes, you can use JC in your app. Of course your app needs to use kotlin for this to happen. Should you change it though? As JC stands it's currently in beta and Google has announced that it will make a full release in July 2021 so making changes based on that claim would be irresponsible and suicidal. However, if you're feeling that strongly about JC then I would say that it depends on how big your app is. If your app is big and already working with a decent/huge user base, I would start parallel development for a new redesigned version of the app and gradually move the changes there. The backend of the app will pretty much remain unchanged since the changes will mainly happen in the frontend.

Of course, do your own research and don't rely on my advice. At the end you know your circumstances better than anyone else. 🙂

Conclusion

In this post I tried to kind of condense my thoughts about JC and to make it easy for developers to read and understand why JC is such a big deal. Hopefully you got what you came for by reading this post.

I'm really looking forward to how different JC is going to make Android development. Google has risen to the challenge and, so far, I'm very satisfied. Android development future seems to be very promising.