with Ragadhitya Janatantra Koeshutama

Sesama Android Developer mungkin sudah sering denger banget kalau Jetpack Compose itu lebih simpel kalau dibandingkan dengan XML. Tapi tau gak sih, dari riset yang kita lakukan, sebenarnya simpel itu salah satu dari beberapa kelebihan yang Jetpack Compose miliki.

Sebenarnya selain simpel apalagi sih kelebihan Jetpack Compose?

Security+ dengan Obfuscation

Kita mulai dari kelebihan yang mungkin temen-temen pernah denger. Karena membuat layout atau UI di Android itu dibikin pakai XML, struktur layout menggunakan XML itu relatif mudah untuk untuk dibaca dan kalau ada hacker yg iseng untuk nge-decompile APK kita. Mereka bisa mendapat blueprint layout kita dengan jelas.

Sedangkan, dengan Jetpack Compose, UI kita itu ya kode yang ada di file Kotlin sama kayak fungsi Kotlin biasa. Artinya, pas jalanin obfuscator R8 dan ProGuard, semua fungsi composable dan logic nya bakal ikut kena scramble.

(kiri) MainActivity dengan Jetpack Compose, (kanan) contoh layout XML dalam file AAB

Dengan begitu, struktur layout jadi nggak semudah itu dibaca oleh hacker. Ini kelebihan yg menguntungkan bukan dari segi keamanan untuk aplikasi kita? 😼

Deklaratif Mindset

Hal selanjutnya, mengenai perubahan mindset pas kita start writing code ke Compose. Seperti yang kita tahu, XML itu sifatnya imperatif, atau kita kasih perintah step by step, kita bilang ke Android framework: "Cari view ini, terus ubah warnanya, kemudian update teksnya" dan lain sebagainya.

Sedangkan, Compose itu deklaratif, yang artinya kita gak perlu lagi kasih tau sistem step by step nya, tapi cukup mendeskripsikan bagaimana tampilan UI atau layout yang kita inginkan pada state tertentu. Misalnya, "UI yang saya mau tampilkan seperti ini jika data nya adalah X, dan akan seperti itu ketika data nya adalah Y".

Dengan XML, kita menulisnya seperti ini:

val progressBar = findViewById<ProgressBar>(R.id.progress_bar)
val recyclerView = findViewById<RecyclerView>(R.id.recycler_view)

if (isLoading) {
  progressBar.visibility = View.VISIBLE
  recyclerView.visibility = View.GONE
} else {
  progressBar.visibility = View.GONE
  recyclerView.visibility = View.VISIBLE
}

sedangkan di Compose, kita menulisnya seperti:

if (isLoading) {
    CircularProgressIndicator()
} else {
    MyDataList(data)
}

UI akan langsung terintegrasi dengan state dari aplikasi. Perubahan ini membuat code kita lebih mudah untuk dimengerti.

Satu Bahasa untuk UI dan Logic

Dengan XML, kita perlu bolak balik antara layout di XML dan logic di Kotlin/Java terutama ketika harus ubah state layout ("duh tadi nama layout ID nya apa ya?😅"). Dengan Compose, semuanya sudah ditulis di Kotlin, UI maupun logic-nya dan bahkan animasi semuanya kita taruh di file Kotlin. Hal ini juga membantu kita untuk tetap fokus dan lebih produktif karena tidak perlu lagi bolak balik antara UI dan logic.

Instant @Preview

selain itu @Preview di Android Studio juga membuat produktivitas boost banget 🚀. Karena selain tidak perlu bolak balik layout dan logic, kita bisa langsung lihat komponen UI dan setiap perubahan state-nya dengan instan tanpa perlu rebuild dan run aplikasi di emulator/device. Kita juga bisa membuat beberapa preview untuk setiap satu komponen dengan data, theme (light/dark), atau ukuran layar yang berbeda.

Tool Instant Preview di Android Studio

Hal ini membuat siklus development jadi lebih cepet. Waktu yang sebelumnya kita pakai untuk menunggu Gradle (baca: bikin kopi ☕), sekarang bisa untuk iterasi dan menyempurnakan layout.

Lebih Sedikit Code yang Perlu Diketik

Terakhir, masih ingat gak kalau bikin UI di XML kayak gimana?

a. bikin layout di XML, jangan lupa untuk kasih layout ID

<TextView
        android:id="@+id/tv_label"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="12dp"
        android:textSize="22sp"/>

b. terus ke file Kotlin, panggil findViewById

val tvLabel = findViewById<TextView>(R.id.tv_label)

c. Terus baru deh bisa set teks yang kita inginkan

tvLabel.text = "Loading..." // hanya tampil ketika loading

Sedangkan, dengan Compose kita hanya perlu satu baris dalam fungsi Composable yaitu:

Text("Loading...")

Yup, that's it! tidak cuma lebih simpel tapi juga bisa menghilangkan banyak potensi bug (semisal yg paling sering kita temukan yaitu: NullPointerException dari method findViewById ) dan bikin code kita juga jadi lebih clean bukan?

Kesimpulan

Jetpack Compose menurut kita lebih dari sekedar cara baru untuk menulis UI, tapi juga mengubah cara kita developing aplikasi menjadi lebih clean dan cepat. Dan, kelebihan yg menurut kita gak kalah penting yaitu peningkatan keamanan di aplikasi kita. Dengan menggunakan Jetpack Compose, tidak hanya melakukan modernisasi tapi juga membangun pondasi yang lebih efisien, clean dan aman untuk masa depan aplikasi kita.

IntelliBroń Aman juga dibuat menggunakan Jetpack Compose, lho! 😉

IntelliBroń Aman - Apps on Google Play
Stay safe from malicious threats while surfing online!

Silahkan dicoba dan kabarin kita (email: support@intellibron.io) ya kalau menemukan sesuatu yg perlu kita tingkatin!

Share this post