Inspeksi Performa Aplikasi React Native
Saat ini, jutaan aplikasi mobile tersedia di Playstore dan Appstore, dengan berbagai jenis dan fungsi. Teknologi smartphone pun terus berkembang pesat, dengan spesifikasi yang sudah semakin tinggi. Meskipun spesifikasi device meningkat, performa aplikasi mobile tidak boleh disepelekan. Device yang digunakan pengguna tidak hanya membuka satu aplikasi saja.
Beriringan dengan meningkatnya spesifikasi device, sensitivitas pengguna pun semakin lama meningkat. Saat ini sekitar 70% pengguna aplikasi mobile akan keluar dari aplikasi apabila respon dari aplikasi terlalu lama. Jadi tidak heran apabila user tidak ragu untuk mencari alternatif lain jika aplikasi yang mereka gunakan tidak memuaskan.
Oleh karena itu alangkah baiknya apabila kita sebagai pengembang dapat melakukan evaluasi terhadap aplikasi yang kita buat. Ada beberapa cara yang dapat dilakukan untuk melakukan evaluasi terhadap performa aplikasi. Khusus nya aplikasi yang menggunakan framework React Native.
Profiling Components
Untuk developer React, seharus nya sudah tidak asing lagi dengan hal ini. Untuk melakukannya pada aplikasi React Native, dapat menggunakan package react-devtools atau menggunakan Flipper yang telah terintegrasi dengan plugin react-devtools.
Dengan menggunakan react devtools, kita dapat melakukan inpeksi terhadap component-component yang digunakan. Selain itu kita juga dapat melihat berapa kali proses rerender dilakukan ketika memuat sebuah halaman. Serta berapa lama waktu yang dibutuhkan untuk me-render setiap component, dan apa yang menyebabkan render dilakukan.
Berdasarkan informasi ini, kita dapat melakukan optimasi code kita untuk mengurangi jumlah dan waktu render component yang kita miliki.
iOS & Android Profiling
Mayoritas kode dalam aplikasi React Native menggunakan JavaScript. Oleh karena itu, React Profiler umumnya cukup untuk menyelesaikan berbagai masalah performa. Namun, terkadang terdapat bug atau performa yang berasal dari native code. Dalam situasi ini, melakukan native profiling dapat membantu Anda mendapatkan informasi mengenai penggunaan CPU, memori, dan lainnya. Xcode dan Android Studio memiliki fitur profiler yang memungkinkan Anda mendapatkan informasi tersebut.
Selain menggunakan XCode dan Android Studio, ada juga tools lain yang dapat melacak CPU, memory, sampai FPS (frames per second). Flashlight juga memberikan rerata skor dari performa aplikasi seperti ini. Alternatif lain adalah menggunakan plugin Flipper seperti react-native-performance dari shopify.
Real-time Performance Monitoring
Selain melakukan evaluasi selama proses development, kita juga dapat mengukur performa aplikasi kita yang sudah release ke Play Store dan App Store. Beberapa tools yang paling populer adalah Firebase Performance Monitoring, Sentry, dan DataDog. Dengan service/tools ini, kita bisa mendapatkan informasi mengenai kondisi aplikasi kita pada device yang digunakan oleh user. Sehingga informasi yang kita dapatkan lebih actual dan bervariasi karna digunakan pada device yang berbeda-beda.
Kesimpulan
Dalam pengembangan aplikasi mobile, terutama menggunakan framework React Native, evaluasi performa sangat penting mengingat sensitivitas pengguna terhadap respons aplikasi yang lambat. Profiling komponen dengan tools seperti react-devtools atau Flipper, bersamaan dengan native profiling menggunakan fitur Xcode dan Android Studio, menjadi langkah kunci untuk mengidentifikasi masalah performa. Setelah aplikasi dirilis, pemantauan performa real-time melalui layanan seperti Firebase Performance Monitoring, Sentry, atau DataDog membantu pengembang memperoleh informasi yang akurat dan bervariasi tentang respons aplikasi pada berbagai perangkat, memungkinkan pengoptimalan yang sesuai dengan kebutuhan pengguna dan meminimalkan risiko kehilangan pengguna.
