Pangsa pasar aplikasi mobile masih didominasi oleh Android dan iOS. Per Januari 2023, Android menempati posisi pasar tertinggi di angka 71%,diikuti dengan iOS yang memiliki pangsa pasar yang juga tidak sedikit di angka 27%.

Untuk memaksimalkan keuntungan, developer umumnya dituntut untuk bersaing di banyak platform. Pada umumnya, mereka dihadapkan dengan tantangan waktu dan biaya yang tidak sedikit untuk mengembangkan aplikasi untuk tiap platform yang ada. Untuk mengatasi hal tersebut, umumnya developer mencari alternatif lain yaitu memakai teknologi cross-platform.

React Native, sebuah framework teknologi cross-platform yang masih populer saat ini dan didukung langsung oleh big tech Meta (Facebook), berhasil menjawab tantangan diatas sejak 2015. Daripada membuat codebase terpisah di masing-masing platform, React Native memberikan solusi single codebase untuk banyak platform, sehingga waktu dan biaya bisa diminimalkan dan iterasi produk yang di rilis ke pasar lebih cepat.

Namun React Native tidak berhasil sendirian. Ada pesaingnya Flutter yang juga didukung oleh big tech ternama Google. Kini framework mereka adalah yang paling populer dan masih bertahan.

Tren

Sejak tahun 2021 popularitas React Native di 38% mulai terkejar oleh Flutter di 42% berdasarkan Statista. Flutter bahkan cenderung terus mengalami peningkatan dibandingkan React Native yang cenderung stagnan bahkan menurun di tahun itu.

Pada setiap rilis major-nya, jumlah aplikasi Flutter meningkat. Ketika Flutter 2 dirilis pada Maret 2021, ada sekitar 150rb aplikasi Flutter yang ada di Play Store. Dan saat rilis Flutter 3 pada Mei 2022, ada 500rb aplikasi Flutter. Lonjakannya sekitar 455% dan itu terjadi hanya dalam dua tahun.

Jika dilihat berdasarkan bahasa pemrograman yang dipakai, React Native memang memiliki basis programmer JavaScript yang jauh lebih populer dibandingkan Flutter Dart. Namun dilihat dari tren Statista diatas, React Native sebagai framework sendiri sempat mengalami penurunan dan hal ini menimbulkan pertanyaan, apakah React Native masih worth it dipakai? Mana sebaiknya yang digunakan untuk kedepannya?

Engine

React Native menyediakan seperangkat komponen abstrak yang merepresentasikan UI dalam bahasa JavaScript, contohnya View (mirip div pada html) dan TextInput. Komponen tersebut diterjemahkan menjadi komponen native, lalu logik aplikasi berkomunikasi dengan komponen native melalui sebuah Bridge yang berjalan diatas JavaScript engine. Bridge ini umumnya dikenal sebagai penyebab performa aplikasi kurang optimal. Namun saat ini React Native menggunakan arsitektur baru yaitu JSI yang menggunakan C++, dan konsep Bridge dihilangkan.

https://medium.com/mindful-engineering/fabric-architecture-react-native-a4f5fd96b6d2

Dibandingkan dengan Flutter, sejak awal Flutter menggunakan Skia Engine yang juga menggunakan C++, sehingga performanya lebih mendekati native. Jadi pertanyaannya, mana yang lebih baik? To be fair, ini bergantung aplikasi apa yang akan dibangun. Lagi pula kita bukan akan membuat shooter game bukan? Untuk aplikasi bisnis pada umumnya, keduanya oke. Realitanya, baik aplikasi yang menggunakan React Native; seperti Facebook, Instagram; dan Flutter; seperti Google Pay, Google Ads, Grab; bisa berjalan mulus.

Dukungan Komunitas

https://survey.stackoverflow.co/2022/#most-loved-dreaded-and-wanted-misc-tech-want

React Native dan Flutter masuk kedalam top-three library paling populer versi Stackoverflow saat ini. (Stackoverflow adalah platform komunitas yang sangat terkenal untuk tanya jawab bagi developer)

https://insights.stackoverflow.com/trends?tags=flutter%2Creact-native

Saat ini, keduanya masih didukung oleh komunitas dengan baik, sehingga penggunaan untuk jangka waktu lama kedepan masih aman. Flutter sendiri terus mengalami peningkatan sehingga untuk jangka waktu kedepan masih bisa bertahan lebih lama.

Dokumentasi

Dokumentasi yang disediakan React Native tidak sebagus Flutter. Untuk pemula, Flutter lebih mudah diikuti dan lebih terarah karena memiliki standar. Dokumentasi React Native hanya cocok untuk minimal mid-level programmer. Untuk mempelajari React Native diharuskan juga mempelajari Reactjs, dan dokumentasinya dibuat terpisah dan diarahkan ke website lain.

Di sisi lain di Flutter memiliki dokumentasi yang baik dan mudah diikuti mulai dari development hingga deployment. Flutter menjelaskan fundamental ui widget dengan lengkap. Selain itu Flutter juga menyediakan learning resources tambahan seperti cookbook dan codelab. Isinya menjelaskan kasus-kasus umum yang biasanya dipakai dalam pembangunan aplikasi mobile yang serius. Websitenya juga relatif lebih nyaman untuk dieksplor dibandingkan React Native yang terlalu techy.

Learning Curve

React Native menggunakan bahasa JavaScript. Berbeda dengan Flutter yang menggunakan bahasa Dart buatan Google. Dart memang tidak se-populer JavaScript, tapi karena style Dart tidak jauh berbeda dengan Java dan Kotlin, maka mempelajarinya tidak sulit.

Disamping itu, pada dasarnya Flutter ditujukan untuk kelompok native developer, sedangkan React Native pada dasarnya fokus ditujukan untuk programmer web. Jadi, secara alami, akan lebih mudah bagi native developer mempelajari Flutter, dibandingkan programmer web mempelajari teknologi mobile dari nol.

Selain itu, bicara soal proses setupnya. Proses setup di React Native relatif mudah karena menggunakan npm. Tinggal menjalankan beberapa command pada terminal maka aplikasi starter sudah bisa dibuat dan dijalankan. Terdengar mudah bukan? Tapi realitanya tidak. Kenyataannya banyak workaround ekstra yang harus dilakukan agar berjalan normal. Makin kompleks projeknya, makin besar isunya. Isu-isu aneh dan pesan error yang penuh teka-teki sering terjadi, misal saat kita menambahkan third-party baru, atau pindah branch di repository. Jika itu terjadi, biasanya perlu untuk me-reset konfigurasi projek dengan menjalankan beberapa command tambahan, baru bisa kembali berjalan normal. Eksplorasi solusi semacam itu cukup menghabiskan waktu. Setidaknya ini pengalaman yang juga dirasakan oleh penulis pribadi.

Di Flutter, proses setup relatif mudah. Mungkin memang ada bagian awal yang cukup merepotkan, yaitu konfigurasi environment variable, tapi itu hanya dilakukan sekali saja pada pertama kali setup. Sedangkan untuk isu-isu seperti yang terjadi di React Native tadi sangat jarang dialami. Apabila terjadi, maka Flutter sendiri sudah menyediakan tool untuk mengatasinya.

Fitur

React Native pada dasarnya mengikuti standar pemrograman web yang menggunakan node. Untuk kebutuhan basic memang sudah disediakan, seperti dependency manager, linter, dll. Sedangkan untuk kebutuhan standar mobile tidak disediakan, seperti: Material Design, Cupertino, navigation, state management, localization, http, icon. Itu semua masih memerlukan third-party tambahan yang dibuat oleh komunitas. Bagi pemula yang bereksplorasi sendiri untuk menemukan third-party yang tepat umumnya akan merasa bingung dan akan muncul pertanyaan klasik “Sebaiknya pakai yang mana?”.

Di Flutter, kebutuhan mobile yang disebutkan tadi sudah disediakan in-built. Material Design adalah standar UI buatan well… Google, sangat disupport oleh Flutter. Lalu soal navigation, yang merupakan kebutuhan super esensial dalam pengembangan aplikasi mobile, itu juga sudah included di Flutter. Meanwhile anehnya React Native tidak menyediakan fitur super esensial tersebut dan masih mengandalkan third-party luar.

Hot Reload

Hot Reload, salah satu fitur super andalan both framework Flutter dan React Native (Fast Refresh tepatnya), adalah fitur yang memungkinkan melihat perubahan kode secara langsung pada layar tanpa perlu menjalankan ulang aplikasi. FItur ini sangat powerful dan super mempercepat proses development. Namun sayangnya di React Native kadang tidak berfungsi dengan baik dan itu sudah menjadi isu umum di kalangan developer sendiri. Bahkan solusi yang tersedia di internet cenderung tricky. Kehilangan fitur ini akan menurunkan speed development.

Kompatibilitas

Kompatibilitas di React Native menjadi isu tersendiri. Hal tersebut sulit dihindari disebabkan mekanisme internal React Native sendiri yang menggunakan komponen native. Saat komponen native dipakai, maka secara alami hasil yang diperolehnya beresiko dipengaruhi oleh behavior komponen native itu sendiri. Contohnya sederhananya soal aspek esensial seperti shadow pada suatu komponen ui, atau hal lain misal kustomisasi ui, yang mana kadang di iOS berfungsi normal namun di Android tidak dan memerlukan konfigurasi khusus. Pembuatannya tidak straightforward dan bahkan membutuhkan effort lebih hanya untuk mencari tricky workaround-nya.

Berbeda halnya dengan Flutter, dia tidak menggunakan komponen native, rendering engine yang dimilikinya membuatnya mampu mengontrol setiap pixel pada layar. Artinya tampilan ui pada masing-masing platform tetap konsisten.

Selain itu, aspek font juga menjadi perhatian. Di React Native, pemakaian custom font ternyata berbeda antara Android dan iOS. Di Android dia menggunakan nama filenya, sedangkan di iOS menggunakan nama font aslinya. Penanganan khusus tetap perlu dilakukan namun dengan effort lebih itu menjadikannya kurang nyaman. Sedangkan di Flutter, pendefinisian font cukup straightforward tanpa perlu penanganan yang tricky.

Backend as a Service (BaaS)

Backend as a Service (BaaS) adalah layanan cloud yang memungkinkan memfasilitasi aplikasi web dan mobile dengan berbagai layanan yang umum yang siap pakai, seperti manajemen user, push notification, integrasi social media, dsb. Provider layanan-layanan tersebut biasanya sudah menyediakannya melalui sebuah SDK dan API.

Google memiliki layanan backend sendiri, seperti Firebase, dan keuntungan bagi Flutter sendiri yang sudah kompatibel dengan Firebase dan memiliki dokumentasi khusus Flutter di websitenya.

Sedangkan React Native tidak memiliki “on brand” backend walaupun memang ada saja third-party buatan komunitas lainnya.

Summary

Memilih framework mana yang terbaik asalnya memang dikembalikan lagi pada developer itu sendiri. Well… itu memang jawaban klasik.

Baik React Native maupun Flutter performanya sama-sama baik. Dari sisi tren keduanya juga masih bisa bertahan lama. Namun bagi developer, ada hal lain yang juga menjadi perhatian utama, yaitu kenyamanan menggunakannya.

React Native memang memiliki komunitas JavaScript yang besar, bahkan terbesar di komunitas programmer dibandingkan Dart. Namun pengalaman mengembangkan dengan React Native tidak begitu mulus. Isu atau bug memang selalu ada solusinya dan bisa dieksplor. Namun effort untuk mengeksplorasi isu-isu yang ada jadi terkesan membatalkan tujuan utama pengembangan cross-platform, yaitu cost and time effective.

Learning resources, kompatibilitas, dan stabilitas framework yang disediakan oleh React Native masih kurang dibandingkan dengan Flutter. Sehingga dalam hal ini Flutter dirasa lebih mampu menjawab kebutuhan pengembangan cross-platform.

Dalam pengembangan mobile, PT. Suitmedia Kreasi Indonesia sebagai full-service digital agency berpengalaman dalam layanan tersebut. Sebagai digital agency Indonesia dan digital agency Jakarta, Suitmedia selalu hadir untuk transformasi digital dan teknologi bisnis Anda!

Mengenal Native vs. Cross-Platform vs. Hybrid vs. PWA