React Native vs NativeScript vs Xamarin

Published in

Biji Inovasi

3 min readJun 12, 2018

Ketika belajar atau develop aplikasi mobile android, kadang bingung mau pilih platform/framework yang mana. Apalagi sekarang sudah cukup banyak framework, dari yang native atau pun hybrid. Namun seringkali, performa menjadi salah satu pertimbangan penting ketika memilih framework, jadinya mau nggak mau harus memilih platform native atau setidaknya ‘semi’-native, semacam React Native, NativeScript, atau Xamarin.

Kenapa memilih semi-native? Ya.. Secara performa masih bisa dipertanggungjawabkan lah, dibandingkan dengan model hybrid semacam ionic atau phonegap, dkk. Selain itu, alasan lainnya karena sudah familiar dengan framework, jadi lebih mudah belajar, dan ngodingnya pun jadi lebih cepat.

Dari hasil penerawangan ditemukan tiga kandidat utama untuk jenis semi-native, yaitu React Native yang berbasis React, NativeScript dengan basis macam-macam, dan Xamarin yang berbasis .NET. Dan berikut inilah hasilnya:

╔══════════════╦════════════╦══════════╦═══════════╦══════════════╗
║ Framework    ║ Based On   ║ APK Size ║ Installed ║ Startup Time ║
╠══════════════╬════════════╬══════════╬═══════════╬══════════════╣
║ React Native ║ React JS   ║   7.2 MB ║     21 MB ║        3.0 s ║
║ NativeScript ║ JavaScript ║  13.9 MB ║     31 MB ║        3.5 s ║
║ NativeScript ║ TypeScript ║  13.9 MB ║     31 MB ║        3.5 s ║
║ NativeScript ║ Angular 6  ║  14.1 MB ║     31 MB ║        4.0 s ║
║ Xamarin      ║ .NET C#    ║  12.4 MB ║     24 MB ║        4.0 s ║ ╚══════════════╩════════════╩══════════╩═══════════╩══════════════╝

Uji Coba

Uji coba di atas dibangun menggunakan template standart Hello World. Tujuannya sederhana, hanya untuk mengetahui kemampuan awal dari setiap framework. Pengujian juga sederhana, hanya mencakup ukuran serta waktu load awal aplikasi.

Bahasa

Dari segi bahasa pemrograman, sebenarnya adalah suka2 alias berhubungan dengan selera. Kalau suka JavaScript bisa pakai React Native atau NativeScript. Kalau suka TypeScript bisa pakai NativeScript. Kalau lebih terbiasa C#, ya pakai saja Xamarin.

Komponen UI

Untuk user interface memang berbeda dengan model hybrid yang bisa menggunakan HTML dan CSS langsung. Untuk framework semi native akan memakai HTML/XML dengan tag khusus yang di-convert ke komponen native. Styling dengan CSS pun juga sedikit berbeda, karena tidak semua fungsi CSS bisa diterapkan. Jadi sediakan waktu untuk mempelajarinya, terutama kalau pakai Xamarin dengan XAML-nya.

Hot Reload

Untungnya dari semua platform sudah tersedia fitur hot reload, meskipun istilah di masing2 framework sedikit berbeda, dan implementasinya juga berbeda. Ya.. setidaknya ga perlu build ulang terus menerus hanya untuk bisa melihat hasil perubahannya. Capeek…

Di React Native, hot reload bisa dengan Expo, sedangkan di Xamarin dengan Live Player. Hot reload di kedua platform tersebut berjalan sangat smooth, sedikit berbeda dengan NativeScript yang agak lambat, karena terkadang harus ada proses build sedikit, kemudian perubahannya baru dideploy ke device.

Ukuran

Ukuran dibagi menjadi dua, yaitu ukuran APK hasil build, dan ukuran aplikasi setelah diinstal. Dari hasil uji coba bisa dilihat kalau paling kecil diraih oleh React Native. Sebenarnya hasilnya sih tidak terlalu beda jauh. Apalagi kapasitas smartphone sekarang sudah cukup besar, jadi tidak begitu menjadi masalah.

Waktu Startup

Waktu yang dibutuhkan tiap framework untuk start tidak berbeda jauh, antara 3–4 detik. Hasil ini diuji dengan smartphone yang cukup jadul dengan Android 5.0, RAM < 512 MB.

Uniknya adalah pada NativeScript, di versi terdahulu 3.x, waktu start-nya cukup lambat, sekitar 12 detik. Kemudian di versi 4.0 diperbaiki, meningkat menjadi 8 detik saja. Dan di versi terbaru 4.1 menjadi 4 detik saja! Jadi ada peningkatan yang cukup signifikan. Ya.. meskipun basis Angular masih sedikit lebih lambat dibanding saudara2nya.

Pilih Yang Mana?

Kalau sudah pernah belajar React, pakai saja React Native.
Kalau project tidak terlalu besar dan terbiasa dengan plain JavaScript pakai saja NativeScript dengan template JavaScript.
Kalau project tidak terlalu besar dan suka JavaScript tapi ingin memanfaatkan tooling static typing, pakai saja NativeScript dengan template TypeScript.
Kalau project cukup besar dan membutuhkan sistem komponenisasi, bisa pakai NativeScript dengan template Angular atau Vue.
Kalau terbiasa dengan .NET dan ingin menikmati library2 dan fitur2nya, seperti LINQ, generic, dkk, pakai saja Xamarin.

Intinya.. sudah.. ga usah bingung tentang framework :D Semua sudah serba cepat sekarang. Yang penting tetep produktif, gunakan tool yang kita bisa dan suka sebaik mungkin.