Inovasi teknologi Jetpack Compose untuk Mobile UI Masa Depan

Inovasi teknologi Jetpack Compose

Inovasi teknologi Jetpack Compose merupakan pengembangan aplikasi mobile bergerak dengan sangat cepat. Beberapa tahun terakhir ini, declarative UI dan reactive programming menjadi tren yang cukup menguasai berita dunia mobile. Dalam pembuatan aplikasi Android, tentu saja UI merupakan salah satu bagian penting yang bahkan bisa menentukan betah atau tidaknya user saat menggunakan aplikasi. Di Android sendiri, secara native menggunakan XML untuk pembuatan UI. Hal ini dianggap cukup merepotkan terutama saat diharuskan menangani desain yang kompleks. Tim Android di Google pun mengetahui hal tersebut dan akhirnya memberikan solusi berupa Jetpack Compose.

Artikel Seputar Teknik dan Ilmu Komputer

Baca Juga : Artikel Lainnya

Jetpack Compose dalam Pendekatan Deklaratif

Jetpack Compose menggunakan pendekatan deklaratif yang tidak sama dengan pendekatan imperatif seperti pembuatan UI dengan XML. Konsep sistem UI pada Jetpack Compose adalah composable atau komposisi, artinya setiap komponen UI dapat ditumpuk menjadi parent dan child di dalamnya. Lebih lanjut, Jetpack Compose adalah toolkit modern Android untuk membuat UI native. Jetpack Compose menyederhanakan dan mempercepat pengembangan UI di Android dengan kode yang lebih sedikit, alat yang canggih, dan API Kotlin yang intuitif. Jetpack Compose di-build berdasarkan fungsi yang dapat dikomposisi. Fungsi ini memungkinkan untuk menentukan UI aplikasi secara terprogram dengan menjelaskan tampilan dan penyediaan dependensi data, bukan berfokus pada proses konstruksi UI (memulai elemen, melampirkannya ke induk, dll.). Untuk mem-build fungsi yang dapat dikomposisi, cukup tambahkan anotasi @Composable ke nama fungsi. Menurut Google, empat keunggulan sekaligus keuntungan utama saat menggunakan Jetpack Compose yaitu:

  1. Less Code, umumnya kode yang dituliskan lebih sedikit ketimbang menggunakan Views dan XML terutama saat membuat Custom View. Sehingga kode akan lebih mudah dibaca dan dipelihara.
  2. Intuitive, kita hanya perlu mendeskripsikan tampilan UI dan sisanya akan ditangani oleh Compose. Ketika ada perubahan state, Compose akan secara otomatis memperbarui UI yang telah dideskripsikan.
  3. Accelerate Development, Jetpack Compose memiliki kompatibilitas yang baik dengan library Jetpack lainnya yang telah lebih dulu hadir. Hal ini membuat Jetpack Compose dapat diadopsi secara bertahap tanpa perlu melakukan rewrite terhadap seluruh codebase sehingga tidak mengganggu aplikasi yang sudah ada. Dukungan penuh dari IDE Android Studio juga akan menyempurnakan implementasinya.
  4. Powerful, walaupun termasuk anggota baru dari keluarga Jetpack, Jetpack Compose termasuk powerful dengan akses langsung ke API dari platform Android. Jetpack Compose juga membawa dukungan untuk Material Design, Dark theme, animasi, dan lain-lain.

Program Studi Teknik Komputer Fakultas Teknik dan Ilmu Komputer – Universitas Teknokrat Indonesia

Informasi Program Studi Teknik Komputer Selengkapnya Disini

Pemanfaatan Jetpack Compose dalam Aplikasi

Aplikasi yang menggunakan Jetpack Compose terbuat dari fungsi yang disebut Composable Function. Strukturnya sendiri seperti fungsi dengan bahasa Kotlin pada umumnya, hanya saja ditandai dengan anotasi @Composable, yang juga bisa memanggil composable function lainnya. Anotasi tersebut akan memberitahu Compose agar memberikan dukungan khusus terhadap fungsi tersebut, seperti untuk memperbarui UI ketika terjadi perubahan state. Composable function biasa disebut “composable” saja agar lebih singkat. Secara umum, UI pada aplikasi terdiri dari berbagai composable, sebagaimana UI pada aplikasi terdiri dari berbagai Widget pada Flutter. Untuk lebih jelasnya mengenai konsep composable dapat melihat gambar di bawah.

Pada gambar di atas dapat dilihat bawah Komponen UI dapat di tumpuk satu sama lainnya. Composable di atas merepresentasikan setiap function yang memiliki anotasi @Composable, kemudian dalam function tersebut dapat memanggil function @Composable lain di dalamnya.

Translate »