Serba-Serbi Jetpack Compose (Bagian 1) — Pengenalan

Assalamualaikum sobat semua. Dalam artikel, saya ingin membahas beberapa hal terkait teknologi yang masih bisa dibilang cukup baru dalam pemrograman Android, yaitu Jetpack Compose. Saya berencana untuk membagi artikel ini menjadi beberapa bagian dan ini adalah bagian pertama-nya yang merupakan bagian Pengenalan.

Apa itu Jetpack Compose ?

Singkatnya, Jetpack Compose adalah sebuah official tool yang dikembangan oleh tim developer Android untuk membangun sebuah tampilan/UI di aplikasi Android. Teknologi ini masih terbilang baru. Teknologi ini sempat disebarluaskan pada acara Google I/O 2019, dan setelah melewati versi alpha dan beta, akhirnya versi Jetpack Compose 1.0 itu rilis secara resmi pada pertengahan tahun lalu (2021).

Apa Perbedaannya ?

Bahasa & Struktur File

Saat ini kita sudah memiliki metode yang cukup jelas mengenai cara mengembangkan UI di aplikasi Android, yaitu dengan memanfaatkan class XML. Dengan metode ini, developer perlu mengatur 2 jenis file (kotlin/java & XML) dengan bahasa yang berbeda untuk memastikan tampilan aplikasi sesuai dengan yang diinginkan. Namun, hal ini akan berbeda saat developer menggunakan Jetpack Compose, dimana UI kita akan dibangun oleh program kotlin saja.

Paradigma

UI Toolkit yang sudah biasa kita gunakan merupakan contoh dari pendekatan Imperative UI. Berbeda dengan Jetpack Compose, program kita akan memiliki pendekatan Declarative UI. Salah satu ciri dari pendekatan Imperative UI adalah adanya domain spesifik yang akan di-render untuk menampilkan sebuah UI (seperti XML atau DOM), dan ada domain untuk mengendalikan/memanipulasi UI tersebut (seperti program Kotlin atau Javascript). Dengan struktur yang demikian, kita akan sering melihat implementation detail terkait step-by-step bagaimana sebuah tampilan dimanipulasi. Inilah kenapa orang menyebutnya sebagai pendekatan “How”. Berikut adalah contohnya,

myView.textView1.text = "Hello"
myView.layout1.setBackgroundColor(Red)
myView.editText1.isEnabled = true
if (myView.layout1.childCount > 0) {
    myView.layout1.removeViewAt(0)
}
myView.layout1.addView(ChildView1())

Sedangkan dalam declarative UI, biasanya program dibangun dengan memiliki satu domain saja yang bertanggung jawab untuk menampilkan apa yang akan ditampilkan di layar. Program dengan pendekaatan ini akan berfokus kepada “What” (apa yang ditampilkan) jika diberikan suatu data. Jika kode di atas dimodifikasi dengan pendekaat declarative maka fungsi MyView tersebut dapat digunakan seperti contoh dibawah

MyView(
    text = "Hello"
    backgroundColor = Red,
    isEditable = true,
    child = ChildView1()
)

Composition VS Inheritance

Mungkin sebagian besar dari kita sudah mengetahui terkait topik ini. Topik ini sudah cukup terkenal dan cukup banyak dibahas. UI Toolkit tradisional sekarang merupakan contoh dari penerapan inheritance, dimana kita memiliki sebuah class bernama View sedangkan widget-widget yang lain akan meng-inherit class tersebut. Class widget yang meng-inherit class View tersebut akan mempunyai implementasi mereka sendiri sesuai dengan tujuan dari masing-masing widget. Contoh sederhananya adalah TextView yang meng-inherit View dan EditText yang meng-inherit TextView. Bahkan, jika kita ingin membuat EditText yang memiliki tampilan atau fungsionalitas tertentu, kita bisa membuat class baru yang meng-inherit EditText.

Berbeda dengan UI Toolkit tradisional, Jetpack Compose dibangun dengan pendekatan composition. Namun, berbeda dengan composition antar class yang biasa kita ketahui, di Jetpack Compose semua akan dibangun di atas fungsi. Contoh sederhananya adalah sebagai berikut,

public class Button extends TextView {}

Diatas merupakan class Button yang biasa kita lihat dan gunakan. Class tersebut meng-inherit TextView untuk mendapatkan beberapa fungsionalitas yang dimiliki oleh TextView. Namun, berbeda dengan Button pada Jetpack Compose seperti yang terlihat dibawah ini,

@Composable
fun Button(
    onClick: () -> Unit,
    content: @Composable RowScope.() -> Unit
) {}

Tidak ada tanda-tanda kehadiran dari sang TextView :)

Jika kita ingin menampilkan sebuah text pada Button tersebut, kita hanya perlu passing parameter content dengan value Text(). Inilah konsep composition yang ada pada Jetpack Compose.