[Bagian 1] Jetpack Compose — Pengenalan

Ada 4 bagian dalam seri artikel ini untuk melakukan proses migrasi ke compose.
Bagian 1: Jetpack Compose — Pengenalan
Bagian 2: Jetpack Compose — Persiapan Migrasi Existing Layout to Compose
Bagian 3: Jetpack Compose — Migrasi Komponen View (Input Text) pada Existing Layout
Bagian 4: Jetpack Compose — Mengimplementasi Compose View dalam ViewGroup

Sejak pertama kali Android diperkenalkan ditahun 2013 hingga saat ini, satu — satunya metode pengembangan UI pada aplikasi android yang digunakan adalah XML format. Walaupun ditahun 2018 Anko layout sempat populer dikalangan developer android, namun hal itu belum mampu merevolusi metode pengembangan layout yang sudah dikenal sejak lama. Namun saat google memperkenalkan Jetpack Compose, banyak developer berbondong — bondong mengeksplor, dan tepat ditahun ini jetpack compose sudah mencapai pada stable version. Hal ini membawa trend tersendiri bagi para developer untuk melakukan migrasi UI pada existing apps, maupun mengimplementasikan jetpack compose pada UI aplikasi yang akan dikembangkan, maupun mengembangkan UI fitur baru pada existing apps dengan menggunakan jetpack compose. Hal ini dengan mudah dilakukan karena Jetpack Compose memiliki kemampuan dalam berdampingan dengan XML (interoperability).

Terdapat beberapa hal yang dapat dijadikan sebagai pertimbangan untuk mulai mengimplementasikan Jetpack Compose dalam membangun sebuah UI pada aplikasi android.

Less code, mengembangkan sebuah layout aplikasi dengan Jetpack Compose tidak memerlukan lagi komponen UI yang dibangun pada xml file dan dipanggil pada kelas activity dengan menginisialisasikan id komponennya menggunakan kelas View. Seperti yang kita tahu cara sebelumnya untuk membangun sebuah layout sangat bergantung pada kelas View hingga developer sering menyebutnya “God of Class”. Karena kebutuhan apapun terkait komponen UI, semuanya melibatkan kelas View.

Intuitive, jika membahas Jetpack Compose maka erat hubungannya dengan konsep Deklaratif, berbeda dengan metode lama (xml) yang masih menggunakan konsep imperatif. Untuk memudahkan gambaran mengenai perbedaan antara konsep imperatif dan deklaratif. Bayangkan saja kita sedang memesan nasi goreng disebuah restaurant maka yang akan kita katakan pada pelayan ada dua opsi yaitu dengan pendekatan,

Imperatif : Saya pesan nasi putih yang sudah matang, lalu ditaruh di pan di campur dengan kecap manis, kecap asin, sayur, garam, telur diaduk hingga matang dan disajikan diatas sebuah piring. Sedangkan jika menggunakan pendekatan

Deklaratif maka : Saya memesan nasi goreng tidak pedas.

Dari sini terlihat perbedaannya bahwa ketika menggunakan konsep imperatif seluruh perintah disebutkan dengan detail hingga tercapai sebuah tujuan yaitu sebuah nasi goreng. Sedangkan ketika menggunakan konsep deklaratif detail perintah tidak perlu disebutkan cukup fokus pada tujuan yang diinginkan yaitu sebuah nasi goreng. Untuk urutan perintah untuk menghasilkan sebuah nasi goreng, dieksekusi tanpa menunggu perintah dari pemesan, sehingga proses lebih cepat. Hal ini pun berlaku pada Layout yang dibangun dengan konsep deklaratif tentu akan memiliki build time yang relatif lebih cepat, dan developer tidak perlu menyebutkan secara mendetail komponen yang dibutuhkan.

Accelerates Development, jika memiliki existing app yang sudah memiliki legacy code dengan menggunakan xml untuk melakukan migrasi ke compose bukanlah sesuatu yang sulit untuk dilakukan. Compose memiliki kemampuan interoperabilitas dengan View. Sehingga compose dapat digunakan bersamaan dalam satu projek. Bahkan bisa juga dalam satu page terdiri dari xml dan compose. Terdapat dua cara untuk melakukan migrasi layout dari xml ke jetpack compose.

Yang pertama, ketika memiliki sebuah halaman yang disusun dari XML ingin wrapping dengan compose, dapat dilakukan dengan cara berikut ini.

Kelas fragment yang sebelumnya masih menginisialisasi sebuah komponen xml melalui kelas view dengan viewBinding seperti dibawah ini.

Sedangkan setelah dilakukan migrating dengan memanfaatkan ComposeView sebagai berikut.

Dapat dilihat bahwa function onCreateView sebelumnya me-return pada FragmentBinding saat ini me-return pada ComposeView. Sehingga dapat dilakukan customize content pada composeView yang nantinya dieksekusi sebagai bagian dari compose.

Lalu jika skenario migrasi diubah maka komponen View yang akan memuat widget dari compose, dapat dijadikan sebagai opsi kedua. Untuk menggunakan cara kedua dapat dilakukan pada file XML. Sebagai berikut adalah sebuah file XML sebagai View.

Selanjutnya saat sudah dilakukan migrasi maka salah satu view yang ingin dijadikan sebagai compose widget dapat diganti dengan ComposeView, dan dapat dilakukan customize pada kelas widget itu sesuai dengan keiinginan. Dan hal ini tidak terbatas pada sebuah komponen karena widget ini dikembangkan pada sebuah function sehingga bisa dengan leluasa melakukan customize.

Selain itu Android Studio sudah melakukan dukungan penuh terhadap jetpack compose dengan berbagai fitur yang disediakan.

1. Interactive Mode, fitur ini memungkinkan developer untuk menampilkan preview hingga membuatnya menjadi interaktif. Dengan begitu, bisa melihat bagaimana efek jika suatu tombol ditekan, animasi apa yang muncul, maupun perubahan state yang terjadi. Tentu hal ini sangat membantu jika developer mengembangkan aplikasi android dengan menggunakan device low spesifikasi, sehingga developer tidak perlu membuat emulator atau repot melakukan debug dengan device.
2. Live Edit, fitur ini memungkinkan developer memperbarui data secara real-time untuk nilai konstan yang tampil di preview maupun device. Tipe yang didukung adalah Int, String, Color, Dp, dan Boolean. Selain itu pada fitur preview dapat melakukan multiple preview hingga membuat dua varian preview yang itu light mode dan dark mode.
3. Animation Preview, pada fitur ini jika terdapat animasi yang dibuat dengan composable function, developer dapan menggunakan animation preview untuk memeriksa setiap nilai ketika perubahan animasi. Developer bisa menjalankan, menghentikan, mempercepat, dan memperlambat animasi menggunakan fitur ini pada keyframe tertentu.
4. Preview Parameter, fitur ini memungkinkan untuk membuat multiple input untuk mengetahui desain dengan berbagai panjang karakter yang berbeda dengan preview parameter. Hal yang perlu disiapkan hanya membuat data class dan gunakan PreviewParameterProvider untuk membuat preview dari mocking data untuk parameter yang ingin ditampilkan.

Powerful, saat menggunakan jetpack compose kita bisa memiliki akses langsung ke Android Platform API, dimana sudah built-in animasi, dark theme, material design. Selain itu juga sistem bekerjan pada function, hal ini membuat kita memiliki kebebasan untuk melakukan customize pada komponen yang kita pakai. Lalu jangan khawatir jika teman — teman menggunakan library jetpack lain seperti paging, navigation, dll ini mampu terintegrasi dengan baik.

Yang terakhir seluruh fitur dari jetpack compose tidak akan dapat dieksekusi jika tidak menggunakan @Composable. Ini merupakan sebuah annotation yang memiliki kemampuan untuk mendeklarasikan sebuah fungsi, lambda hingga type data. Penggunaan annotation di sini lebih mirip seperti keyword. Analogi yang mirip, yaitu keyword suspend. Jadi @ disini bukan annotation processor. Karena compose berjalan pada kotlin pluggin.

Berbagai informasi terkait jetpack compose yang saya ketahui sudah saya bagikan. Sampai jumpa di artikel selanjutnya. :)