Meningkatkan Performa React Native di Kurir Apps
React Native merupakan salah satu framework utama yang digunakan oleh Tim Software Engineer di Warung Pintar untuk membuat aplikasi mobile. Hingga saat ini, sudah lebih dari tiga aplikasi dibuat dengan React Native, di mana salah satu yang tengah kami kerjakan saat ini adalah Kurir Apps.
Sebelum membaca lebih jauh, resource yang saya sebutkan dibawah ini akan bermanfaat bagi kalian yang ingin menjadi software developer
Apa itu Kurir Apps?
Kurir Apps merupakan salah satu aplikasi yang dimiliki oleh PT Warung Pintar Distribusi. Aplikasi ini digunakan oleh para kurir dalam pengiriman barang ke pemesannya, yaitu para Juragan.
Melalui aplikasi ini, kurir dapat melakukan ceklis barang yang akan dikirim, melihat rute perjalanan yang akan dilalui, membuat laporan berupa foto warung, mengirimkan bukti pembayaran, dan lain sebagainya.
Aplikasi tersebut dibangun dengan React Native versi 0.59. Dalam pengembangannya, beberapa dependency yang kami gunakan diantaranya adalah,
- React Native Navigation (Wix), sebagai pondasi utama dalam melakukan navigasi di React Native,
- Renceng, yaitu library yang dibuat oleh Tim Core Warung Pintar untuk mengatur keseluruhan UI yang ada pada aplikasi,
- React Native Vector Icons,
- Sentry, sebagai library untuk mendapatkan log dan error report saat production — diterapkan pada v1.2,
- AppCenter, digunakan untuk melakukan automation build and distribute.
- React Native Maps, digunakan untuk integrasi dengan Google Maps,
- Clevertap, digunakan untuk merekam seluruh kegiatan yang ada pada aplikasi, fungsinya mirip dengan Google Analytics — diterapkan pada v1.2,
- React Native Image WebP, digunakan untuk menampilkan gambar dengan format WebP,
- React Native Geolocation, digunakan untuk merekam posisi Kurir saat mengantar barang — diterapkan pada v1.2.
- dan lain sebagainya.
Startup Time pada Kurir Apps v1.1
Dengan banyaknya dependencies yang bersandar pada React Native versi 0.59 tersebut, aplikasi ini sudah memiliki performa startup time yang cukup baik. Dengan 10 kali percobaan, kami mendapatkan rata-rata waktu di angka 1275ms atau sekitar 1.2 detik.
Ukuran APK yang kami dapatkan berada di angka 24.8 MB. Angka tersebut tergolong wajar jika merujuk pada Official Docs React Native mengingat React Native membuat standarisasi APK untuk arsitektur CPU x86 dan ARMv7a.
Improve Startup Time pada Kurir Apps v1.1
Pada proses pengembangan Kurir Apps di versi 1.2, kami mencoba melakukan upgrade React Native ke versi 0.61.5, dan kami mendapatkan waktu rata-rata startup time di angka 1326ms, di mana terdapat kenaikan sekitar 0.05 detik.
Kenaikan startup time sekitar 0.05 detik ini diakibatkan oleh adanya penambahan beberapa dependencies, sehingga, lagi-lagi, hal ini merupakan suatu hal yang cukup wajar. Karena kami belum puas, akhirnya kami mencoba melakukan pengembangan kembali dengan hasil sebagai berikut,
Kami mendapatkan waktu rata-rata startup time sekitar 0.8 detik dan ukuran APK menjadi 19.8 Mb. Angka tersebut kami peroleh setelah kami melakukan beberapa penyesuaian kode, seperti penerapan inline requires, WebP format, mengurangi font, hermes engine, dan lain-lain.
1. Implementasi Inline Requires.
Kita pasti sudah memahami jika setiap kode yang kita tulis pada React Native perlu load & parse ke dalam memory oleh React Native. Sejatinya, inline requires menunda kode untuk dieksekusi oleh memory, sehingga memory hanya perlu melakukan code execution bila memang dibutuhkan saja. Serupa dengan code splitting, penerapan inline requires adalah seperti ini,
import React, { Component } from 'react';
import { Text } from 'react-native';export default class VeryExpensive extends Component {
render() {
return <Text>Very Expensive Component</Text>;
}
}
Cara penggunaan pada parent component-nya sebagai berikut,
import React, { Component } from 'react';
import { TouchableOpacity, View, Text } from 'react-native';let VeryExpensive = null;export default class Optimized extends Component {
state = { needsExpensive: false }; didPress = () => {
if (VeryExpensive == null) {
VeryExpensive = require('./VeryExpensive').default;
} this.setState(() => ({
needsExpensive: true,
}));
}; render() {
return (
<View style={{ marginTop: 20 }}>
<TouchableOpacity onPress={this.didPress}>
<Text>Load</Text>
</TouchableOpacity>
{this.state.needsExpensive ? <VeryExpensive /> : null}
</View>
);
}
}
2. Mengganti format gambar dari PNG ke WebP.
Ekstensi WebP adalah format gambar digital yang dikembangkan oleh Google. WebP sendiri diklaim mampu mereduksi ukuran gambar hingga 25% lebih dibanding format JPG atau PNG. Hal ini memberikan keuntungan dari segi ukuran aset yang dimiliki hingga waktu yang dibutuhkan untuk menampilkan gambar menjadi lebih cepat. Untuk penerapan format WebP pada react-native sendiri, kami menggunakan library react-native-webp-format.
3. Mengurangi Font yang Digunakan.
Kami menggunakan react-native-vector-icons untuk mendukung kami dalam menerapkan ikon di react-native. Library ini memiliki lebih dari 10 jenis font yang berbeda, dan, setelah kami hitung, ukuran seluruh font yang ada di APK berkisar 2.8Mb, di mana font sebanyak ini tentunya tidak akan kami gunakan semua, hanya 1 jenis, yaitu material icons. Untuk mereduksi font ini, kita cukup mendefinisikan font yang digunakan di android/app/build.gradle, seperti ini,
project.ext.vectoricons = [
// Name of the font file you want to copy
iconFontNames: [ 'MaterialIcons.ttf' ]
]4. Menggunakan Hermes Engine.
Hermes merupakan JavaScript Engine yang diciptakan oleh Facebook dan saat berfokus untuk meningkatkan startup time di React Native. Hermes membawa beberapa perbaikan selain startup time, seperti mengurangi ukuran APK dan menurunkan konsumsi memory.
Untuk penjelasan lebih lengkap tentang Hermes Engine, Anda dapat menyaksikan video berikut,
Kesimpulan
Untuk Kurir Apps, React Native versi 0.61.5 membawa banyak perubahan, baik dari segi developer experience hingga performa. Dari sekian banyak perubahan yang ditawarkan, perubahan yang paling dirasakan dalam pengembangan Kurir Apps adalah perihal startup time dan ukuran APK.
Ada beberapa hal yang masih perlu ditingkatkan untuk menurunkan ukuran APK hingga lebih dari 50% lebih, diantaranya dengan generate APK yang difokuskan pada setiap arsitektur CPU dengan enableSeparateBuildPerCPUArchitecture. Hal ini tentu akan senantiasa menjadi perhatian kami guna mengembangkan Kurir Apps agar semakin mudah digunakan oleh para pengguna, yaitu kurir.
Jika ada masukan atau diskusi, silahkan tinggalkan komentar atau mention saya melalui Twitter di @arryanggaputra. Terima kasih. 😊
