NativeScript vs React Native: Perbandingan Arsitektur, Native API, Komunitas, dan Tooling

Seberapa familiar kalian dengan dua tech stack ini: NativeScript dan React Native? 🙃 Pernah menggunakan salah satunya, atau bahkan pernah mencoba keduanya? 😄

NativeScript dan React Native sama-sama digunakan untuk membangun aplikasi mobile cross-platform Android dan iOS menggunakan JavaScript atau TypeScript. Namun, cara keduanya berinteraksi dengan platform native ternyata cukup berbeda.

Mengenal NativeScript dan React Native

NativeScript pertama kali diperkenalkan oleh Telerik pada 2014, sedangkan React Native diperkenalkan Facebook, sekarang Meta, pada 2015.

• NativeScript: Wikipedia NativeScript
• React Native: Wikipedia React Native

Keduanya mengusung konsep cross-platform mobile development. Artinya, developer dapat membangun aplikasi Android dan iOS dengan berbagi sebagian besar basis kode yang sama. 😎

Perbedaan Struktur UI NativeScript dan React Native

Logika aplikasi pada NativeScript dan React Native sama-sama dapat ditulis menggunakan JavaScript atau TypeScript.

Perbedaannya mulai terlihat pada cara membangun antarmuka.

React Native menggunakan React dan JSX untuk mendefinisikan UI berbasis komponen.

NativeScript lebih fleksibel. Developer dapat menggunakan JavaScript atau TypeScript secara langsung, atau memilih integrasi framework seperti Angular, Vue, Svelte, Solid, hingga React.

Pada NativeScript Core, struktur UI juga dapat ditulis menggunakan XML.

Jadi secara sederhana:

React Native
JavaScript / TypeScript
        +
React + JSX

NativeScript
JavaScript / TypeScript
        +
NativeScript Core / Angular / Vue / Svelte / Solid / React

Learning Curve NativeScript vs React Native

Fleksibilitas NativeScript membuat developer yang sebelumnya sudah menggunakan Angular, Vue, atau framework JavaScript tertentu memiliki pilihan untuk tetap membawa sebagian pola kerja yang sudah familiar ketika masuk ke pengembangan aplikasi mobile.

NativeScript juga memberikan akses yang sangat dekat dengan API native Android dan iOS. Karena itu, ketika mengalami masalah di level platform atau membuat integrasi native yang cukup dalam, pengetahuan tentang Android, Java/Kotlin, iOS, atau Swift tetap sangat membantu.

Untuk pekerjaan UI dan business logic sehari-hari, developer tetap dapat bekerja menggunakan JavaScript atau TypeScript.

React Native mengambil pendekatan yang sedikit berbeda. Untuk kebutuhan UI dan integrasi yang umum, developer React biasanya dapat bekerja cukup lama tanpa menyentuh implementasi native secara langsung karena banyak kebutuhan sudah tersedia melalui React Native maupun ekosistem package pihak ketiga.

Akses Langsung ke Native API di NativeScript

Salah satu keunggulan menarik NativeScript adalah kemampuan untuk mengakses API native Android dan iOS langsung dari JavaScript atau TypeScript.

Misalnya, kita ingin menampilkan Toast bawaan Android. NativeScript dapat memanggil API Android tersebut secara langsung:

const context = Application.android.context;

android.widget.Toast
  .makeText(
    context,
    "Hello dari NativeScript!",
    android.widget.Toast.LENGTH_SHORT
  )
  .show();

Developer tidak harus membuat wrapper khusus hanya untuk melakukan pemanggilan sederhana tersebut.

Pendekatan ini dapat mengurangi kebutuhan dependency tambahan, dengan konsekuensi developer perlu cukup nyaman bekerja dengan API native platform.

Performa dan Arsitektur NativeScript vs React Native

React Native New Architecture dan NativeScript sama-sama memiliki mekanisme komunikasi JavaScript dan native yang jauh lebih efisien dibanding pendekatan bridge lama.

Arsitektur React Native

React Native New Architecture menggunakan JSI sebagai salah satu fondasi komunikasi antara JavaScript runtime dan native layer, menggantikan ketergantungan terhadap bridge berbasis serialisasi JSON pada arsitektur lama.

JavaScript / TypeScript
        ↓
JSI / TurboModules
        ↓
Native Layer
        ↓
Android / iOS

Arsitektur NativeScript

NativeScript menggunakan NativeScript Runtime, metadata, dan native bindings untuk mengekspos API platform ke lingkungan JavaScript.

JavaScript / TypeScript
        ↓
NativeScript Runtime
        ↓
Metadata + Native Bindings
        ↓
Android / iOS API

Perbedaan utamanya bukan sekadar soal performa, melainkan bagaimana native API diekspos kepada developer.

Zero-Day Native API Access di NativeScript

NativeScript memiliki konsep yang sering disebut Zero-Day Native API Access.

Selama API Android atau iOS tersebut sudah tersedia pada SDK yang digunakan ketika build, NativeScript dapat mengekspos API tersebut melalui metadata sehingga bisa dipanggil langsung dari JavaScript atau TypeScript tanpa harus menunggu plugin khusus.

Contoh menggunakan Android Toast:

const context = Application.android.context;

android.widget.Toast.makeText(
  context,
  "Hello dari NativeScript!",
  android.widget.Toast.LENGTH_SHORT
).show();

React Native menggunakan pendekatan yang berbeda. Jika sebuah native API belum diekspos oleh React Native atau package yang digunakan, developer biasanya perlu membuat Native Module atau TurboModule untuk menghubungkan implementasi native ke JavaScript.

Secara konseptual:

NativeScript
JS / TS
  ↓
Native API

React Native
JS / TS
  ↓
Native Module / TurboModule
  ↓
Native API

Jadi perbedaannya bukan tentang siapa yang lebih "native", tetapi seberapa langsung developer mendapatkan akses ke API native platform.

Komunitas NativeScript vs React Native

NativeScript memiliki komunitas yang aktif, tetapi skalanya lebih kecil dibanding React Native.

Akibatnya, tutorial, contoh kasus, diskusi Stack Overflow, dan solusi untuk permasalahan yang sangat spesifik terkadang lebih terbatas.

Jika mengalami masalah NativeScript yang cukup spesifik, kalian bisa mencoba berdiskusi melalui komunitas Discord resminya: NativeScript Discord .

React Native memiliki komunitas yang jauh lebih besar, didukung Meta, digunakan banyak perusahaan, serta memiliki ekosistem package yang sangat luas.

Karena itu, mencari tutorial, solusi error, diskusi teknis, atau pengalaman developer lain biasanya lebih mudah di ekosistem React Native.

Dari sisi ukuran komunitas saja, React Native memiliki keunggulan yang cukup signifikan.

Tooling React Native: Community CLI dan Expo

React Native menawarkan dua pendekatan tooling yang populer.

• React Native Community CLI untuk developer yang membutuhkan kontrol lebih langsung terhadap project native.
• Expo untuk Developer Experience yang lebih praktis.

Dengan ekosistem Expo dan EAS, proses setup, cloud build, signing, distribusi, hingga submit aplikasi ke store dapat dibuat jauh lebih terintegrasi.

React Native
├── Community CLI
└── Expo + EAS

Tooling NativeScript: NS CLI dan NativeScript Preview

NativeScript menyediakan NativeScript CLI atau NS CLI untuk workflow development penuh.

Contohnya:

ns create my-app
cd my-app
ns run android

Namun jika hanya ingin belajar atau melakukan prototyping cepat, NativeScript juga menyediakan NativeScript Preview .

Developer dapat membuka project melalui browser atau StackBlitz, melakukan scan QR Code menggunakan perangkat, kemudian menjalankan project tanpa harus terlebih dahulu melakukan setup Android atau iOS development environment secara lengkap.

NativeScript
├── NS CLI
└── NativeScript Preview

React Native Expo vs NativeScript Preview

Jika disederhanakan, ekosistem tooling keduanya bisa digambarkan seperti berikut:

React Native
Community CLI | Expo

NativeScript
NS CLI | NativeScript Preview

Untuk workflow production secara end-to-end, Expo dan EAS masih memiliki ekosistem yang lebih matang, terutama untuk cloud build, signing, distribution, dan deployment.

Namun untuk sekadar mulai belajar dan mencoba NativeScript, NativeScript Preview membuat kebutuhan setup awal jauh lebih ringan dibanding workflow NativeScript tradisional.

NativeScript Forge: Tool Visual untuk NativeScript

Sebagai tambahan, developer NativeScript juga dapat mencoba NativeScript Forge.

Tool ini menawarkan pendekatan yang lebih visual untuk membantu proses development NativeScript.

Website: nativescript-forge.netlify.app

NativeScript atau React Native, Mana yang Lebih Baik?

Tidak ada jawaban mutlak karena keduanya memiliki filosofi yang berbeda.

React Native menarik jika kalian membutuhkan ekosistem besar, komunitas luas, banyak library siap pakai, serta workflow modern melalui Expo.

NativeScript menarik jika kalian menginginkan fleksibilitas framework dan akses yang sangat dekat terhadap API Android dan iOS langsung dari JavaScript atau TypeScript.

React Native
Ekosistem besar
+ React
+ Expo
+ Library melimpah

NativeScript
Framework fleksibel
+ Direct Native API
+ Zero-Day API Access
+ NativeScript Runtime

Pendekatannya berbeda, tetapi keduanya sama-sama punya daya tariknya sendiri. 🙃

Kalau kalian pernah menggunakan keduanya, lebih nyaman menggunakan NativeScript atau React Native? 😄

CMIIW.