JINACS: Volume 06 Nomor 02, 2024

(Journal of Informatics and Computer Science) ISSN : 2686-2220

Perbandingan Jetpack Compose dan Flutter dalam

Pengembangan dan Penggunaan Resource pada Aplikasi
Link D Law
Rasid1, I Made Suartana2
1,2
Program Studi S1 Teknik Informatika, Universitas Negeri Surabaya
1
rasid.20085@[Link]
2
madesuartana@[Link]

Abstrak— Penelitian ini bertujuan untuk membandingkan pengguna, pemilihan framework dan toolkit berperan penting
kinerja framework Flutter dan Jetpack Compose dalam dalam menunjang kinerja aplikasi[2].
pengembangan aplikasi Link D Law, dengan fokus pada
kecepatan pengembangan, kemudahan pembelajaran, efisiensi Proses pengembangan aplikasi mobile menjadi sangat
dan kemudahan perawatan kode, serta kinerja aplikasi terkait penting dengan meningkatnya penggunaan perangkat
penggunaan memori, CPU, dan framerate. Hasil pengujian mobile[3]. Sistem operasi Android dan IOS, yang merupakan
menunjukkan bahwa Jetpack Compose unggul dalam efisiensi sistem operasi mobile yang paling banyak dipilih, memiliki
pengembangan dan penggunaan memori. Pengembangan dengan alat pengembangan dan bahasa pemrograman yang berbeda.
Jetpack Compose rata-rata 12,23% lebih cepat dibandingkan Dalam ekosistem pengembangan aplikasi PlayStore, Kotlin
dengan Flutter, terutama karena fleksibilitas dalam penyesuaian
sebagai bahasa pemrograman android native menempati
UI dan struktur kode yang lebih terorganisir. Meskipun
demikian, Flutter lebih mudah dipelajari berkat dokumentasi peringkat 1 dengan persentase 71%, diikuti oleh Flutter
yang lebih lengkap dan dukungan komunitas yang kuat. Dalam menempati peringkat 2 dengan persentase 17% dan React
aspek penggunaan memori, Jetpack Compose menunjukkan Native menempati peringkat 3 dengan persentase 16% yang
efisiensi yang lebih tinggi dengan rata-rata penghematan sebesar memiliki kemampuan pengembangan lintas platform. Jetpack
43,36% dibandingkan Flutter. Penggunaan CPU bervariasi Compose, meskipun baru telah menempati peringkat 6 dengan
tergantung pada fitur yang diuji, di mana Jetpack Compose persentase 9%[4].
lebih efisien pada fitur yang kompleks, sementara Flutter lebih
unggul pada fitur yang lebih sederhana. Dalam aspek framerate, Flutter, dirilis oleh Google pada tahun 2018, adalah sebuah
kedua framework menunjukkan hasil yang sebanding, meskipun open-source user interface (UI) software development kit
Flutter sedikit lebih baik pada fitur dengan interaksi UI (SDK) yang memungkinkan pengembang untuk membangun
sederhana, sedangkan Jetpack Compose unggul pada fitur aplikasi mobile cross-platform yang indah dan berkinerja
dengan tampilan yang lebih kompleks. tinggi dari satu basis kode[5]. Dengan menggunakan bahasa
pemrograman Dart, Flutter menawarkan pendekatan yang
Kata Kunci— Flutter, Jetpack Compose, Perbandingan unik dalam pengembangan aplikasi dengan fitur hot reload
Framework, Pengembangan Aplikasi Mobile, Android. yang memungkinkan pengembang untuk melihat perubahan
langsung dalam aplikasi tanpa perlu memulai ulang seluruh
I. PENDAHULUAN
aplikasi[6]. Ini membantu mempercepat proses pengembangan
Dalam era digital saat ini, pengembangan aplikasi mobile dan memungkinkan pengembang untuk bereksperimen dengan
telah menjadi salah satu bidang yang paling dinamis dan UI dan fitur aplikasi secara real-time.
inovatif dalam teknologi informasi, didorong oleh kebutuhan
Sedangkan Jetpack Compose, diperkenalkan pada tahun
untuk memenuhi ekspektasi pengguna yang terus berkembang
2019 dan mulai digunakan pada tahun 2021. Merupakan
untuk aplikasi yang efisien, responsif, dan mudah digunakan.
bagian dari keluarga Jetpack , sebuah kumpulan library yang
Perangkat mobile telah menjadi kebutuhan utama dalam
dirancang untuk mempermudah pengembangan aplikasi
rutinitas harian miliaran orang di seluruh penjuru dunia[1].
Android. Sebagai toolkit modern untuk membangun UI native
Dengan skala penggunaan yang demikian luas, peningkatan
android, Jetpack Compose mengusung pendekatan deklaratif
efisiensi yang minimal pada aplikasi yang digunakan secara
dalam mendefinisikan UI, memungkinkan kode yang lebih
rutin dapat mengakumulasikan penghematan waktu yang
bersih dan lebih intuitif dibandingkan dengan pendekatan
signifikan bagi keseluruhan pengguna. Pembaruan kecil pada
imperatif tradisional yang menggunakan XML[7]. Dengan
aplikasi dapat mengalihkan pengalaman pengguna dari kesan
Jetpack Compose, pengembang dapat membangun antarmuka
yang kurang responsif dan penuh gangguan menjadi interaksi
pengguna dengan kode Kotlin yang lebih ringkas,
yang lancar dan memuaskan. Dalam upaya meningkatkan
meningkatkan produktivitas pengembangan dan
performa aplikasi, antarmuka pengguna menjadi area penting
memungkinkan pembuatan UI yang lebih konsisten dan
untuk diperhatikan. Lebih lanjut, dalam konteks antarmuka
mudah dipelihara[8].

617
JINACS: Volume 06 Nomor 02, 2024
(Journal of Informatics and Computer Science) ISSN : 2686-2220

Perbandingan antara Flutter dan Jetpack Compose menjadi (hardware) dan perangkat lunak (software). Komponen
penting karena setiap proyek pengembangan aplikasi memiliki tersebut adalah sebagai berikut:
serangkaian kebutuhan dan kriteria yang harus dipenuhi.
1. Hardware
Untuk aplikasi seperti Link D Law, yang menuntut keandalan
a. Processor AMD Ryzen 5
tinggi dan pengalaman pengguna yang lancar, pemilihan
b. Random Access Memory 16 GB
framework bukan hanya tentang preferensi teknologi,
c. Kapasitas SSD 512GB dan 1 TB
melainkan tentang memaksimalkan efisiensi operasional dan
meminimalkan biaya pemeliharaan. Dengan membandingkan
kedua teknologi ini, penelitian ini bertujuan untuk
2. Software
mengidentifikasi framework mana yang menawarkan
a. Sistem Operasi Windows 11
performa terbaik dalam penggunaan resource seperti memory,
b. Android Studio
CPU, dan storage, serta mengevaluasi efisiensi mereka dalam
c. Visual Studio Code
proses pengembangan—dari kecepatan pembangunan fitur,
d. Emulator Android
efesiensi kode hingga kemudahan pemeliharaan dan
e. Postman
skalabilitas aplikasi.
f. Figma
II. METODE PENELITIAN g. Bahasa Pemrograman Kotlin
h. Bahasa Pemrograman Dart
Penelitian ini menggunakan metode yang terdiri dari
beberapa tahapan utama seperti yang terlihat pada gambar 1.
C. Implementasi Sistem
Dimulai dengan studi literatur yang berfungsi sebagai dasar
teori, diikuti dengan analisis kebutuhan untuk Pada tahap ini implementasi pengembangan aplikasi
mengidentifikasi elemen-elemen yang diperlukan dalam Link D Law akan menggunakan framework Jetpack
sistem. Setelah itu, implementasi sistem dilakukan Compose dan Flutter. Berikut adalah langkah-langkah
berdasarkan hasil analisis kebutuhan. Tahap terakhir adalah proses implementasi jika menggunakann masing-masing
pengujian untuk mengevaluasi kinerja sistem secara framework:
menyeluruh.
1. Jetpack Compose
a. Pemilihan Library: Identifikasi library Jetpack
Compose yang dibutuhkan untuk
memaksimalkan proses pengembangan aplikasi.
b. Pengembangan UI: Implementasikan antarmuka
pengguna menggunakan komponen UI Jetpack
Compose berupa fungsi-fungsi seperti Button,
Text, Image, Column, Row, Lazylist, dan lain-
lain.
Gbr. 1 Diagram Alur Tahapan Penelitian c. Pengelolaan State: Menerapkan State dan
ViewModel untuk mengelola state aplikasi dan
Dari gambar di atas dapat diketahui tahapan penelitian yang mengikatnya ke UI. Gunakan fungsi-fungsi
akan diterapkan pada penelitian ini, yaitu: seperti remember dan mutableStateOf untuk
A. Studi Literatur mengelola state.
d. Navigasi: Impelementasi navigasi antar halaman
Pada tahapan studi literatur, peneliti ini akan layer menggunakan NavHost dan NavController
mengumpulkan berbagai literatur yang relevan untuk untuk menentukan serta menanggapi perubahan
mendukung dan menjadi referensi. Literatur yang akan rute navigasi.
digunakan berasal dari beragam sumber, termasuk buku,
artikel, serta jurnal baik dari dalam negeri maupun luar 2. Flutter
negeri. Adapun topik yang dijadikan acuan meliputi a. Pemilihan Library: Identifikasi library Flutter
Native Android, Flutter, Studi Komparatif, Jetpack yang dibutuhkan untuk memaksimalkan proses
Compose, dan Cross-platform. pengembangan aplikasi.
B. Analisis Kebutuhan b. Pengembangan UI: Implementasi antarmuka
pengguna menggunakan widget-widget Flutter
Analisis kebutuhan dilakukan untuk mendukung proses seperti TextField, Button, ListView, dan lain-
pengembangan aplikasi dan proses perbandingan dalam lain. Struktur antarmuka dibuat dengan
penelitian ini. Komponen yang telah dianalisa dan menempatkan widget-widget dalam hirarki yang
digunakan dalam penelitian ini meliputi perangkat keras tepat.

618
JINACS: Volume 06 Nomor 02, 2024
(Journal of Informatics and Computer Science) ISSN : 2686-2220

c. Pengelolaan State: Menggunakan setState, A. Analisis Kebutuhan

Provider atau paket-paket manajemen state
Tahap ini menjelaskan bagaimana analisis kebutuhan
lainnya untuk mengelola state aplikasi.
dilakukan dan bagaimana hal ini mempengaruhi proses
d. Navigasi: Implementasi navigasi antar halaman
pengembangan serta hasil penelitian.
layer menggunakan widget-widget seperti
Navigator dan MaterialPageRoute. Penentuan 1. Kaitan Kebutuhan dengan Framework
dan navigasi rute antar layer disesuaikan dengan
kebutuhan aplikasi. Analisis kebutuhan ini membantu dalam
menentukan framework yang paling sesuai untuk
pengembangan aplikasi Link D Law. Flutter dan
Jetpack Compose masing-masing memiliki kelebihan
D. Pengujian
dan kekurangan dalam memenuhi kebutuhan
Penelitian ini bertujuan untuk membandingkan Flutter tersebut.
sebagai framework Cross-platform dan Jetpack Compose
a. Flutter
sebagai framework Native Android. Masing-masing aplikasi
yang telah dikembangkan menggunakan kedua framework Menawarkan pengembangan lintas platform
akan dilakukan 2 pengujian, yaitu: dengan satu basis kode. Cocok untuk
pengembangan cepat dan iterasi, namun
1. Pengujian Pengembangan (Development Testing)
mungkin memerlukan optimasi tambahan untuk
Pengujian ini akan berjalan bersamaan dengan
kinerja pada perangkat Android.
proses pengembangan aplikasi. Beberapa aspek yang
akan diuji pada pengujian ini adalah: b. Jetpack Compose
a. Kecepatan Pengembangan: Mengukur waktu
yang diperlukan untuk mengembangkan fitur Menawarkan kinerja optimal dan integrasi
tertentu dalam aplikasi menggunakan kedua yang kuat dengan ekosistem Android. Cocok
framework. untuk aplikasi yang membutuhkan kinerja tinggi
b. Keunggulan Pembelajaran: Menilai seberapa dan stabilitas.
mudah bagi pengembang untuk mempelajari B. Implementasi Sistem
dan menggunakan kedua framework.
c. Keunggulan dan Efesiensi Kode: Menilai Tahap ini menjelaskan secara rinci langkah-langkah
kemudahan dalam membaca dan mengevaluasi yang diambil untuk mengimplementasikan sistem
efesiensi kode yang diketik dari kedua menggunakan framwork Flutter dan Jetpack Compose.
framework. Implementasi mencakup pemilihan library, pengembangan
d. Keunggulan Perawatan Kode: Mengevaluasi UI, pengelolaan state, dan navigasi.
seberapa mudah melakukan pembaruan atau 1. Implementasi dengan Jetpack Compose
perubahan pada kode aplikasi.
a. Pemilihan Library
2. Pengujian Kinerja (Performance Testing) Pada tahap awal implementasi, dilakukan
Pengujian ini akan menggunakan App Profiler dari pemililhan library yang akan digunakan untuk
Android Studio untuk mengukur kinerja dari fitur memaksimalkan proses pengembangan aplikasi.
aplikasi yang dikembangkan menggunakan Beberapa library yang dipilih adalah Compose
framework Flutter dan Jetpack Compose. Beberapa Destination, ViewModel, LiveData, Retrofit,
aspek yang akan diuji pada pengujian ini adalah: Room, Koin, Datastore, Paging3, dan Bouquet.
a. Penggunaan Memori: Mengukur total
penggunaan memori yang digunakan aplikasi b. Pengembangan UI
dari kedua framework. Dapat dilihat pada gambar 2 dan 3 yang
b. Penggunaan CPU: Mengamati efesiensi menjelaskan implementai halaman Login
penggunaan CPU pada perangkat. menggunakan Jetpack Compose.
c. Framerate aplikasi: Memastikan aplikasi
berjalan lancar tanpa jeda atau lag, terutama saat
melakukan transisi atau animasi.

III. HASIL DAN PEMBAHASAN

Bab ini membahas mengenai implementasi sistem dari
rancangan yang telah dibuat serta proses pengujian yang
dilakukan sesuai dengan perencanaan sebelumnya.

619
JINACS: Volume 06 Nomor 02, 2024
(Journal of Informatics and Computer Science) ISSN : 2686-2220

(5) Styling dan Theming

Styling dilakukan melalui parameter
fungsi composable itu sendiri. Misalnya,
TextStyle untuk teks, Modifier untuk layout
dan dekorasi, dan lain-lain.
c. Pengelolaan State
Jetpack Compose menggunakan pendekatan
deklaratif dengan prinsip Recomposition.
Gbr. 2 Memanggil LoginScreen di MainActivity
Recomposition adalah proses di mana Jetpack
Compose memperbarui UI ketika state yang
digunakan oleh Composable berubah. Proses
pengelolaan state dan pembaruan UI di Jetpack
Compose:
(1) Deklaratif UI
Pendefinsian UI dalam bentuk fungsi
dengan anotasi @Composable untuk
menggambarkan bagaimana UI harus
terlihat berdasarkan state saat ini.
Gbr. 3 Tampilan Kode Layout LoginScreen Dengan (2) State-Driven
Jetpack Compose
UI di Compose dikendalikan oleh state.
Ketika state berubah, Compose akan secara
(1) SetContent otomatis memicu recomposition dari fungsi
Jetpack Compose menggunakan @Composable yang menggunakan state
setContent di dalam activity untuk tersebut.
mendefinisikan layout. (3) Fine-gained Recomposition
(2) Composable Funstions Recomposition di Compose sangat efisien
karena hanya composable yang state-nya
• Semua elemen di Compose adalah
berubah yang akan di-recompose. Ini berarti
sebuah fungsi yang diberi anotasi
hanya bagian dari UI tree yang terpengaruh
@Composable.
perubahan state yang akan di-render ulang,
• Composable functions digunakan bukan seluruh UI tree.
untuk membuat elemen UI. Misalnya, (4) Skipping Recomposition
Text, Button, Column, dan lain-lain.
Compose secara otomatis menentukan
(3) Hirarki Composable bagian mana dari UI tree yang perlu di-
recompose. Jika bagian tertentu tidak
• Jetpack Compose juga menggunakan
terpengaruh oleh perubahan state, Compose
struktur hierarki yang berbasis tree.
akan melewatinya dan tidak melakukan re-
Namun, tidak seperti widget, ini
render.
menggunakan composable functions.
Seperti contoh pada gambar 4, variabel name
• Sebagai contoh, Column adalah diubah statenya dari “Compose” menjadi
composable function yang dapat “Jetpack” sehingga fungsi yang akan
memiliki children composables untuk direkomposisi hanya Greeting dan tidak semua
mengatur layout secara vertikal. layout UI.
(4) Deklarasi Composable
Composable dideklarasikan sebagai
fungsi. Misalnya, TextField, Image, Text,
Button, dan lain-lain.

620
JINACS: Volume 06 Nomor 02, 2024
(Journal of Informatics and Computer Science) ISSN : 2686-2220

Gambar 6 menjelaskan pemanggilan

MainAppScreen yang sudah dibuat seperti yang
ada pada gambar 5.

Gbr. 4 Contoh Manajemen State di Jetpack

Compose
Gbr. 7 Navigasi Dilakukan Menggunakan
d. Navigasi DestinationsNavigator

Navigasi antar layer dilakukan dengan

Gambar 7 menjelaskan penggunaan navigasi
Compose Destination. Berikut implementasi
dengan menggunakan destinationNavigator
navigasi dapat dilihat pada gambar 5, 6, dam 7.
yang diberi nilai berupa tujuan screen dalam
bentuk namaScreen + Destination seperti yang
tertera di gambar yaitu LawScreenDestination.

2. Implementasi dengan Flutter

a. Pemilihan Library
Pemilihan library untuk Flutter dilakukan
untuk memaksimalkan proses pengembangan..
Beberapa library yang dipilih adalah provider,
json_annotation, flutter_svg, dio, retrofit, get_it,
build_value, shared_preferences, sqflite, path,
Gbr. 5 Menggunakan DestinationNavHost Di dan flutter_pdfview.
MainAppScreen b. Pengembangan UI
Gambar 5 menjelaskan pemanggilan Dapat dilihat pada gambar 8 dan 9 yang
DestinationNavHost di dalam MainAppScreen menjelaskan implementasi halaman Login
dengan menyimpan nilai dari navController. menggunakan Flutter.

Gbr. 6 Memanggil MainAppScreen Di Dalam

MainActivity Gbr. 8 Memanggil MyApp Di Dalam [Link] dan
Menambahkan Routes LoginScreen

621
JINACS: Volume 06 Nomor 02, 2024
(Journal of Informatics and Computer Science) ISSN : 2686-2220

berbeda dalam mengelola state dan pembaruan

UI. Proses pengelolaan state dan pembaruan UI
di Flutter:
(1) Deklaratif UI
Pendefinisian UI dilakukan di dalam
method build dari Widget.
(2) State Management
Flutter menggunakan StatefulWidget
Gbr. 9 Tampilan Kode Layout LoginScreen Dengan untuk mengelola state. Ketika state berubah,
Flutter Flutter memanggil ulang build method dari
StatefulWidget.
(1) MaterialApp
(3) Full Widget Rebuild
Flutter menggunakan MaterialApp
sebagai entry point untuk aplikasi yang Ketika state berubah, build method dari
menyediakan beberapa fitur seperti tema, StatefulWidget akan dipanggil ulang dan
navigasi, dan lain-lain. seluruh sub-tree dari widget tersebut akan
di-rebuild. Ini berarti bahwa semua child
(2) Widget widget dalam sub-tree akan di-rebuild,
bukan hanya bagian yang terpengaruh oleh
• Flutter menggunakan konsep widget perubahan state.
untuk segala hal dalam UI. Setiap
elemen UI adalah sebuah widget. (4) Element Tree

• StatelessWidget dan StatefulWidget Flutter menggunakan Element tree untuk

digunakan untuk membuat UI yang mengelola widget dan memperbarui UI
tidak berubah dan yang bisa berubah secara efisien. Element tree membantu
(stateful). Flutter menentukan bagian mana dari UI tree
yang perlu diperbarui, meskipun secara
(3) Hierarki Widget umum seluruh sub-tree dari StatefulWidget
akan di-rebuild.
• Flutter menggunakan struktur hierarki
widget yang berbasis tree. Setiap Seperti contoh pada gambar 10, variabel
widget memiliki parent dan child. name diubah nilainya dari “Flutter” menjadi
“Flutter & Dart” dengan memanggil method
• Misalnya, Column adalah widget yang setState(). Karena ada perubahan, Flutter
dapat memiliki beberapa children memanggil ulang method build untuk
untuk mengatur layout secara vertikal. memperbarui tampilan.
(4) Deklarasi Widget
Widget dideklarasikan dalam method
build. Misalnya, TextField, Image, Text,
ElevatedButton, dan lain-lain.

(5) Styling dan Theming

Styling dilakukan melalui properti widget
itu sendiri. Misalnya, TextStyle untuk teks,
BoxDecoration untuk dekorasi, dain lain-
lain.
c. Pengelolaan State
Flutter menggunakan pendekatan deklaratif
untuk membangun UI, tetapi dengan cara yang

622
JINACS: Volume 06 Nomor 02, 2024
(Journal of Informatics and Computer Science) ISSN : 2686-2220

Gbr 10 Contoh Manajemen State Di Flutter 1. Pengujian Pengembangan

d. Navigasi Pengujian pengembangan dilakukan untuk
mengevaluasi aspek-aspek seperti kecepatan
Navigasi antar layer dilakukan dengan
pengembangan, keunggulan pembelajaran,
menggunakan navigator dan
keunggulan dan efisiensi kode, serta keunggulan
MaterialPageRoute.
perawatan kode. Berikut adalah hasil dari pengujian
tersebut:
a. Kecepatan Pengembangan
Pengujian ini mengukur waktu yang
diperlukan untuk mengembangkan fitur-fitur
tertentu dalam aplikasi menggunakan kedua
framework.
TABEL I
HASIL PENGUJIAN KECEPATAN
PENGEMBANGAN

Durasi Durasi
Pengembanga Pengembangan
Fitur Aplikasi
n dengan dengan Jetpack
Flutter (jam) Compose (jam)
Autentikasi 18 16
Gbr. 11 Menggunakan MaterialApp di [Link] Daftar Hukum 27 25
Konsultasi AI 22 18
Gambar 11 menjelaskan penggunaan
MaterialApp yang di dalamnya sudah disertakan Analisis:
initialRoute dan routes untuk navigasi.
Dari table 1 dan grafik pada gambar 13, dapat
dilihat bahwa Jetpack Compose lebih unggul
dibandingkan Flutter dalam pengembangan
fitur-fitur aplikasi Link D Law. Meskipun kedua
framework menggunakan pendekatan deklaratif,
peneliti menemukan bahwa Jetpack Compose
unggul karena kemampuannya dalam
penyesuaian UI yang lebih baik, menjaga
hierarki kode tetap mudah dibaca meski
semakin kompleks, dan meminimalkan
kebutuhan akan boilerplate code. Penyesuaian
UI yang lebih efisien memungkinkan
Gbr. 12 Contoh Penggunaan Navigasi pengembang untuk lebih cepat menyesuaikan
desain dan fitur, sementara struktur kode yang
Gambar 12 menjelaskan contoh penggunaan
navigasi jika menggunakan routes yang lebih rapi memudahkan dalam pemeliharaan
terdaftar pada MaterialApp gambar 10 dan dan pengembangan berkelanjutan. Faktor-faktor
navigasi dengan langsung memanggil Screen ini memberikan kontribusi signifikan terhadap
yang diinginkan. kecepatan dan efisiensi pengembangan
menggunakan Jetpack Compose.
C. Pengujian
Tahap ini menjelaskan metode dan hasil pengujian yang
dilakukan untuk membandingkan kinerja framework
Flutter dan Jetpack Compose dalam mengembangkan
aplikasi Link D Law. Pengujian ini bertujuan untuk
mengevaluasi kecepatan pengembangan, kemudahan
pembelajaran, efesiensi dan kemudahan perawatan kode,
serta kinerja aplikasi dalam hal penggunaan memori, CPU,
dan framerate.

623
JINACS: Volume 06 Nomor 02, 2024
(Journal of Informatics and Computer Science) ISSN : 2686-2220

Gbr. 13 Grafik Durasi Pengembangan

Gambar 13 adalah bentuk grafik dari hasil
pengujian durasi pengembangan seperti yang
dijelaskan dalam tabel 1.
b. Keunggulan Pembelajaran
Pengujian ini menilai seberapa mudah bagi
pengembang untuk mempelajari dan
menggunakan kedua framework.
Gbr. 15 Dokumentasi Jetpack Compose
Hasil Pengujian:
Gambar 14 dan 15 adalah contoh
Pengujian ini menilai seberapa mudah bagi dokumentasi dari kedua framework yang
pengembang untuk mempelajari dan digunakan dalam pengujian keunggulan
menggunakan kedua framework. Pengujian ini pembelajaran.
salah satunya adalah menilai website resmi
dokumentasi dari kedua framework seperti yang c. Keunggulan dan Efisiensi Kode
dapat dilihat pada gambar 14 dan 15. Hasil Pengujian ini menilai kemudahan dalam
pengujian menunjukkan bahwa Flutter lebih membaca dan menulis kode serta efisiensi kode
unggul dalam hal pembelajaran, terutama yang dihasilkan.
karena dokumentasinya yang sangat lengkap,
dukungan online compiler yang memungkinkan Hasil Pengujian:
pengembang untuk langsung mencoba kode Pengujian ini menilai kemudahan dalam
komponen, serta komunitas yang besar dan membaca dan menulis kode serta efisiensi kode
aktif. Dokumentasi yang lengkap dan tools yang dihasilkan. Hasil pengujian menunjukkan
tambahan seperti online compiler memudahkan bahwa kode UI yang ditulis dengan Jetpack
pengembang baru dalam memahami dan Compose lebih mudah dibaca meskipun
mengimplementasikan fitur dengan cepat, memerlukan lebih banyak kode. Jetpack
sementara komunitas yang besar menyediakan Compose memungkinkan penulisan kode yang
banyak sumber daya tambahan dan dukungan modular dan reusable, yang sangat membantu
cepat. dalam pengelolaan state dan mengurangi
Di sisi lain, meskipun dokumentasi Jetpack duplikasi kode. Struktur yang lebih jelas dan
Compose cukup lengkap, peneliti melaporkan pendekatan deklaratifnya mempermudah
bahwa diperlukan lebih banyak eksplorasi pengembang dalam memahami dan memelihara
secara mandiri. Hal ini mungkin memerlukan kode, terutama dalam proyek besar atau
lebih banyak waktu untuk mempelajari fitur- kompleks.
fitur yang kurang terdokumentasi atau untuk Sebaliknya, meskipun Flutter menghasilkan
memecahkan masalah yang belum banyak kode yang lebih pendek, struktur kode yang
dibahas dalam komunitas. Oleh karena itu, dihasilkan sering kali lebih rumit dan kurang
dalam konteks pembelajaran, Flutter terbaca karena banyaknya widget nesting.
menawarkan pengalaman yang lebih ramah bagi Meskipun Flutter juga mendukung penulisan
pengembang, terutama bagi mereka yang baru kode yang modular dan reusable, kompleksitas
memulai atau membutuhkan dukungan dalam hierarki widget dapat menjadi tantangan
komunitas yang lebih kuat. dalam pengembangan dan pemeliharaan
aplikasi. Oleh karena itu, Jetpack Compose
lebih unggul dalam hal keterbacaan dan
efisiensi pengelolaan state, sementara Flutter
mungkin lebih cocok untuk proyek yang
memerlukan hasil cepat dengan kompleksitas
UI yang lebih rendah.
d. Keunggulan Perawatan Kode

Gbr. 14 Dokumentasi Flutter

624
JINACS: Volume 06 Nomor 02, 2024
(Journal of Informatics and Computer Science) ISSN : 2686-2220

Pengujian ini mengevaluasi seberapa mudah Gbr. 16 Run Aplikasi Dengan Mode Profile
melakukan pembaruan atau perubahan pada
kode aplikasi. Gambar 16 menjelaskan sebelum melakukan
pengujian aplikasi harus di-run menggunakan mode
Hasil Pengujian: profile. Mode profile lebih mencerminkan kondisi
Pengujian ini mengevaluasi seberapa mudah sebenarnya dari aplikasi saat dijalankan oleh
melakukan pembaruan atau perubahan pada pengguna akhir. Menguji dalam mode profile
kode aplikasi. Hasil pengujian menunjukkan membantu memastikan bahwa aplikasi akan
bahwa Jetpack Compose memiliki keunggulan berperforma baik dalam kondisi yang sebenarnya
dalam kemudahan perawatan kode berkat dihadapi oleh pengguna.
pendekatan deklaratifnya yang intuitif dan
penggunaan Kotlin dengan sintaks yang bersih.
Pendekatan ini memungkinkan pengembang
untuk dengan mudah memperbarui dan
memodifikasi bagian-bagian aplikasi tanpa
risiko mempengaruhi keseluruhan kode secara
negatif. Modularitas yang ditawarkan oleh
Jetpack Compose juga mempermudah
Gbr. 17 Pilih Perangkat dan Aplikasi
refactoring dan pembaruan fitur, yang sangat
penting dalam perawatan kode jangka panjang. Kemudian buka tools App Profiler, pilih
Di sisi lain, meskipun Flutter juga perangkat dan aplikasi yang sedang berjalan seperti
menggunakan pendekatan deklaratif, tantangan yang terlihat di gambar 17.
utama dalam perawatan kode terletak pada
struktur widget yang kompleks. Struktur ini
dapat membuat refactoring lebih sulit dan
berisiko, terutama dalam proyek yang besar dan
kompleks. Namun, Flutter tetap menawarkan
kelebihan dalam pengembangan cepat, terutama
dengan fitur seperti hot reload yang mendukung
iterasi cepat dan debugging.
Berdasarkan analisis ini, Jetpack Compose
lebih unggul dalam hal perawatan kode,
terutama untuk proyek-proyek yang Gbr. 18 Statistik Aplikasi dari App Profiler
membutuhkan stabilitas dan fleksibilitas jangka
panjang. Sedangkan Flutter mungkin lebih Setelah memilih perangkat dan aplikasi.
cocok untuk proyek yang memerlukan hasil Pengujian dapat dilakukan dengan mengamati
cepat dengan iterasi berkelanjutan meski statistik yang ditunjukkan App Profiler. Dapat
menghadapi tantangan dalam struktur kode. dilihat pada gambar 18 yang menampilkan contoh
statistik dari aplikasi yang berjalan.
2. Pengujian Kinerja
a. Penggunaan Memori
Pengujian kinerja dilakukan untuk mengevaluasi
penggunaan memori, penggunaan CPU, dan Pengujian ini mengukur total penggunaan
framerate aplikasi yang dikembangkan menggunakan memori yang digunakan aplikasi dari kedua
kedua framework. Pengujian CPU dan Memory framework.
menggunakan App Profiler dari Android Studio.

TABEL II
HASIL PENGUJIAN PENGGUNAAN MEMORI

Penggunaan Penggunaan
Fitur Aplikasi
Memori Memori dengan

625
JINACS: Volume 06 Nomor 02, 2024
(Journal of Informatics and Computer Science) ISSN : 2686-2220

dengan Jetpack Pengujian ini mengamati efisiensi

Flutter (mb) Compose (mb) penggunaan CPU pada perangkat.
Autentikasi 200 130
TABEL III
Daftar Hukum 253 118
Konsultasi AI 187 109 HASIL PENGUJIAN PENGGUNAAN CPU

Analisis: Penggunaan
Penggunaan
CPU dengan
Dari tabel 2 di atas, dapat dilihat bahwa Fitur Aplikasi CPU dengan
Jetpack
Jetpack Compose menggunakan memori lebih Flutter (%)
Compose (%)
sedikit dibandingkan Flutter untuk semua fitur Autentikasi 18 17
yang diuji, menunjukkan efisiensi yang lebih Daftar Hukum 11 16
tinggi dalam pengelolaan resource. Perbedaan Konsultasi AI 10 8
signifikan dalam penggunaan memori, terutama
Analisis:
pada fitur 'Daftar Hukum' dan 'Konsultasi AI',
menunjukkan bahwa Jetpack Compose mampu Dari tabel 3 di atas, dapat dilihat bahwa
mengelola data dan state dengan lebih efisien. penggunaan CPU antara Flutter dan Jetpack
Compose bervariasi tergantung pada fitur yang
Efisiensi ini mungkin disebabkan oleh
diuji. Pada fitur 'Autentikasi,' penggunaan CPU
arsitektur Jetpack Compose yang lebih ringan
hampir sama, menunjukkan bahwa kedua
dan optimal dalam penggunaan komponen UI. framework memiliki efisiensi yang sebanding
Implikasi dari efisiensi ini adalah kinerja untuk tugas-tugas sederhana. Namun, untuk
aplikasi yang lebih baik, terutama pada
fitur 'Daftar Hukum,' Jetpack Compose
perangkat dengan resource terbatas, di mana
menggunakan lebih banyak CPU dibandingkan
penggunaan memori yang lebih rendah dapat
Flutter, yang mungkin disebabkan oleh
mengurangi lag dan meningkatkan pengalaman
kebutuhan komputasi tambahan dalam
pengguna. rendering atau pengelolaan data dalam fitur ini.
Berdasarkan hasil pengujian ini, Jetpack Sebaliknya, untuk fitur 'Konsultasi AI,' Jetpack
Compose lebih cocok digunakan dalam Compose lebih efisien dalam penggunaan CPU.
pengembangan aplikasi yang membutuhkan
Variasi ini menunjukkan bahwa efisiensi
efisiensi memori tinggi dan performa yang
penggunaan CPU di antara kedua framework
stabil, terutama untuk aplikasi yang berjalan tidak hanya bergantung pada framework itu
pada perangkat dengan spesifikasi rendah atau sendiri tetapi juga pada jenis tugas atau fitur
aplikasi yang memproses banyak data secara yang dikembangkan. Oleh karena itu, dalam
real-time.
memilih framework, penting untuk
mempertimbangkan jenis fitur yang akan
dikembangkan dan bagaimana masing-masing
framework mengelola penggunaan CPU.
Jetpack Compose mungkin lebih cocok untuk
fitur-fitur yang membutuhkan efisiensi CPU
dalam pengolahan data kompleks, sedangkan
Flutter mungkin lebih unggul dalam fitur yang
lebih ringan dalam penggunaan CPU.

Gbr. 19 Grafik Penggunaan Memori

Gambar 19 adalah bentuk grafik dari hasil
pengujian penggunaan memori seperti yang
dijelaskan dalam tabel 2.

b. Penggunaan CPU
Gbr. 20 Grafik Penggunaan CPU

626
JINACS: Volume 06 Nomor 02, 2024
(Journal of Informatics and Computer Science) ISSN : 2686-2220

Gambar 20 adalah bentuk grafik dari hasil

pengujian penggunaan CPU seperti yang
dijelaskan dalam tabel 3.
c. Framerate Aplikasi
Pengujian ini memastikan aplikasi berjalan
lancar tanpa jeda atau lag, terutama saat
melakukan transisi. Pengujian framerate
menggunakan aplikasi pihak ketiga bernama
TakoStats. Gambar 21 adalah contoh
penggunaan TakoStats saat pengujian.

627
JINACS: Volume 06 Nomor 02, 2024
(Journal of Informatics and Computer Science) ISSN : 2686-2220

Gbr. 21 Pengujian Framerate Dengan TakoStats

TABEL IV
HASIL PENGUJIAN FRAMERATE APLIKASI

Fitur Aplikasi Framerate Framerate

dengan dengan Jetpack
Flutter (fps) Compose (fps)
Autentikasi 40 34
Daftar Hukum 54 56
Konsultasi AI 56 55
Analisis:
Dilihat dari tabel 4 di atas, performa
framerate untuk fitur aplikasi yang diuji
menunjukkan hasil yang bervariasi antara
Flutter dan Jetpack Compose. Pada fitur
'Autentikasi,' Flutter menunjukkan framerate
yang lebih tinggi, yang menunjukkan bahwa
framework ini mungkin lebih efisien dalam
rendering elemen UI sederhana dan menangani
proses login dengan responsivitas yang baik.
Sebaliknya, pada fitur 'Daftar Hukum,'
Jetpack Compose memiliki framerate yang
sedikit lebih tinggi, yang mungkin disebabkan
oleh kemampuannya dalam mengelola tampilan
yang lebih kompleks dengan banyak elemen
data atau daftar. Sementara itu, untuk fitur
'Konsultasi AI,' kedua framework menunjukkan
performa yang hampir sebanding,
mengindikasikan bahwa keduanya mampu
menangani proses rendering yang melibatkan
interaksi dengan algoritma AI atau data yang
dinamis dengan baik.
Hasil ini mengindikasikan bahwa pemilihan
framework harus mempertimbangkan jenis fitur
yang akan dikembangkan. Flutter mungkin lebih
cocok untuk fitur-fitur yang membutuhkan
rendering cepat dan responsif, sementara
Jetpack Compose mungkin lebih unggul dalam
mengelola tampilan yang lebih kompleks
dengan banyak elemen data.

Gbr. 22 Grafik Framerate Fitur Aplikasi

628
JINACS: Volume 06 Nomor 02, 2024
(Journal of Informatics and Computer Science) ISSN : 2686-2220

Gambar 22 adalah bentuk grafik dari hasil dengan penghematan 45.45% penggunaan CPU. Dalam aspek
pengujian framerate aplikasi seperti yang framerate, Flutter menunjukkan keunggulan dalam rendering
dijelaskan dalam tabel 4. UI sederhana dengan framerate 17.65% lebih tinggi pada fitur
'Autentikasi,' sedangkan Jetpack Compose lebih unggul dalam
mengelola tampilan kompleks seperti 'Daftar Hukum' dengan
IV. KESIMPULAN framerate 3.7% lebih tinggi. Kesimpulannya, Jetpack
Compose lebih cocok untuk aplikasi yang memerlukan
Pada perbandingan proses pengembangan, Jetpack
efisiensi memori tinggi dan pengolahan data kompleks,
Compose menunjukkan keunggulan yang signifikan dalam
sedangkan Flutter unggul dalam fitur yang membutuhkan
proses pengembangan aplikasi Link D Law dibandingkan
rendering cepat dan responsif.
dengan Flutter. Dalam hal durasi pengembangan, Jetpack
Compose memungkinkan pengembangan fitur 12.23% lebih REFERENSI
cepat secara rata-rata dibandingkan Flutter, dengan [1] Diantoni, C., Komarudin, O., & Rizal, A. (2024). ARSITEKTUR
keunggulan terbesar tercatat pada fitur Konsultasi AI, di mana MVVM DAN FRAMEWORK JETPACK COMPOSE PADA
Jetpack Compose mampu mengurangi waktu pengembangan PENGEMBANGAN APLIKASI ANDROID. JATI (Jurnal Mahasiswa
hingga 18.18%. Meskipun Flutter lebih unggul dalam aspek Teknik Informatika), 8(3), 3216–3224.
[Link]
pembelajaran berkat dokumentasi yang lengkap dan dukungan [2] Noori, Z., & Eriksson, C. (2023). UI Performance Comparison of
komunitas yang kuat, Jetpack Compose menawarkan struktur Jetpack Compose and XML in Native Android Applications.
kode yang lebih mudah dipahami dan dikelola, serta [3] Hussain, H., Khan, K., Farooqui, F., Ali Arain, Q., & Farah Siddiqui, I.
memberikan efisiensi yang lebih tinggi dalam hal pengelolaan (2021). Comparative Study of Android Native and Flutter App
Development. Memory, 47, 36–37.
dan perawatan kode. Oleh karena itu, Jetpack Compose lebih [4] Appfigures. (2024, March 31). Top Development SDKs Installed in iOS
unggul dalam kecepatan dan efisiensi pengembangan, & Android Apps. [Link]
terutama dalam proyek-proyek yang memerlukan stabilitas (Accessed on: 30/03/2024)
dan fleksibilitas jangka panjang. [5] Flutter Developers. (2024, March 31). Flutter. [Link]
(Accessed on: 31/03/2024)
Pada perbandingan performa fitur aplikasi Link D Law, [6] Yunus, C. D. P., & Ulum, M. B. (2023). Pengembangan Aplikasi
Jetpack Compose juga menunjukkan efisiensi yang lebih Penjadwalan Konten Instagram Otomatis bagi Pelaku UMKM dengan
tinggi dalam penggunaan memori dengan rata-rata Flutter Framework. JURNAL ILMIAH INFORMATIKA, 11(02), 196–
penghematan memori sebesar 43.36% dibandingkan Flutter, 205. [Link]
[7] Marchenko, S. (2023). JETPACK COMPOSE: NEW APPROACHES
terutama pada fitur 'Daftar Hukum' yang mencatat TO ANDROID UI DEVELOPMENT. Publishing House “Baltija
penghematan tertinggi sebesar 53.36%. Dalam penggunaan Publishing.”
CPU, hasil pengujian bervariasi tergantung pada fitur yang [8] Android Developers. (2024, March 31). Jetpack Compose.
diuji. Jetpack Compose lebih unggul dalam penggunaan CPU [Link] (Accessed on:
31/03/2024)
pada fitur 'Konsultasi AI' dengan efisiensi 20% lebih baik,
sementara Flutter lebih efisien pada fitur 'Daftar Hukum'

629