Native Application dengan Single Codebase Javascript

Di era dimana semuanya saling terhubung dan portable terutama pada penggunaan aplikasi Mobile atau Gadget . Terdapat berbagai inovasi pengembangan teknologi yang berbeda-beda .

Salah satunya React Native .

React Native adalah Framework yang memungkinkan untuk menulis single Codebase JavaScript menjadi aplikasi Native pada Android , IPhone bahkan Platform lain .

React Native ini pertama kali rilis open-source pada tahun 2015 oleh Facebook.

React Native ditulis dalam JavaScript XML sesuai dengan standar ES6 . JavaScript merupakan Programming Language yang populer dan mempunyai komunitas besar . Begitupun React JS dan baru-baru ini React Native cukup populer dikalangan Developer hingga kini.

Alhasil React Native sudah digunakan oleh berbagai developer baik startup maupun enterprise.

Sesuai slogan JavaScript “Write once , Run Anywhere” JavaScript merupakan Code yang membuat behavior tersendiri dan reuseable .

Selaras dengan itu Slogan React Native pun “Learn Once , Write Anywhere” yang berarti dapat di reuseable kembali sebagai pengembangan jangka panjang secara periodik . Dengan kata lain Cross-Platform.

React Native dapat ditulis pada extensi JavaScript XML , JavaScript ataupun TypeScript namun yang perlu diingat adalah kode di App.js merupakan Handling Event pertama kali yang akan di eksekusi .

Jadi dari App.js kita dapat membuat route atau fungsi lain .

Cara kerja React Native adalah dengan mengeksekusi kode JavaScript yang ada pada Virtual React DOM , yang kemudian React Native memprosesnya menjadi Native Module sehingga environment Native pun siap dipakai .

Ini meningkatkan optimalisasi performa dan penggunaanya menjadi lebih efisien .

Dan integrasi Framework React Native disini berperan untuk men-jembatinya hingga menjadi Native Module .

Ini adalah pilihan yang cocok sesuai dengan slogannya .

ilustrasi: systemseed.com

Plus dan Minus React Native

Plus.

1. Proses Instalasi yang mudah

yang hanya menggunakan Command dan Package Manager sehingga terlihat seperti One-Click Wizard.

2. Environment siap Pakai

Tidak perlu banyak konfigurasi , setelah proses install selesai , anda dapat meng edit kode langsung melalui Direktori yang sudah di siapkan.

3. Struktur kode dan Optimalisasi Performa

React Native merupakan Framework dengan berdasar pada React JS Library, ini artinya semua komponen atau library JavaScript dapat diintegrasikan ke React Native melalui struktur React DOM yang membuat proses dan debugging menjadi lebih mudah tertata.

4. Dukungan Library yang banyak dan Komunitas yang besar

Development dapat menjadi amat sulit ketika tidak dapat menemukan sesuatu yang dicari . Tetapi sepertinya itu tidak berlaku pada komunitas React dan JavaScript . Disini kita dapat menggunakan komponen yang disediakan oleh komunitas dan berkontribusi pada lingkungan pengembangan secara sumber terbuka . Disamping itu kita tidak perlu khawatir tentang FAQ ataupun Trouble karena seharusnya ada jawaban dari Komunitas yang dapat ditemukan.

5. Live Render saat Development

React Native berada pada Virtual React DOM untuk mempercepat proses render serta didukung emulator pada saat development secara live atau realtime untuk meningkatkan produktifitas dalam bekerja .

Minus

1. Kompatibilitas Komponen yang belum sepenuhnya Native

Untuk beberapa kasus khusus pada development , kita membutuhkan kode yang benar-benar Native pada platform itu , sebagai contoh Programming Language C untuk Android pada NDK atau Native Development Kit digunakan untuk menjangkau Root ataupun melakukan fungsi istimewa pada Hardware itu sendiri , sedangkan React Native itu sendiri belum support hal itu .

2. React Native merupakan Framework yang sedang Berkembang

Meski React Native dapat berjalan dengan layak stabil dan banyak juga testimoni dari perusahaan besar yang menggunakan React Native , React Native memerlukan Development yang up to date , sehingga meminta kita agar selaras dalam pengembangan React Native itu sendiri.

3. Keamanan kode

React Native menggunakan Third Party untuk men-compile sebagai Native Application . Namun kita masih belum sampai untuk dapat me-review apa yang ada pada proses compiler tersebut .

Namun semua itu adalah proses natural , ada Pro dan ada Kontra . Disamping itu teknologi adalah sesuatu yang berkembang . Mungkin kita akan menemukan jawabannya suatu hari nanti …

Getting Started

Requirements React Native

Sebelumnya Untuk memulai membuat aplikasi dengan React Native , setidaknya anda membutuhkan pemahaman pengetahuan tentang ;

1. HTML , CSS

2. JavaScript ES6

3. React JS Environment

Dan berikut adalah Persyaratan sistem untuk memulai React Native ;

1. Node Package Manager (NPM) LTS Version , Di download melalui halaman https://nodejs.org

2. Yarn (Opsional)

3. React-Native CLI atau Expo Framework

4. Android Virtual Device Emulator atau Physical Device Android / IPhone

5. An IDE or Text Editor

6. Dan Expo Go pada Physical Device (Opsional)

Karena ini digunakan sebagai pembelajaran latihan secara Quickstart dan paling mudah , maka Penulis disini menggunakan React Native Expo dengan Visual Studio Code sebagai IDE dan Physical Device sebagai proses Debugging

Baiklah kita mulai

1. Install Node Package Manager sebagai JavaScript Runtime untuk proses server maupun Library

Setelah selesai buka Command untuk memulai.

2. (Opsional) Kita dapat menggunakan Yarn untuk Library purpose nantinya , ketik

$ npm install –global yarn

3. Memulai dengan Expo

$ npm install –global expo-cli

Setelah selesai proses kita dapat cek expo kita dengan

$ npm expo –version

4. Inisialisasi Project Expo

Perlu diingat tahap ini akan membuat direktori tersendiri yang berupa Work Environment

$ npm expo init

Memuat … tunggu hingga selesai. Kemudian beri nama dengan mengikuti petunjuk

Nantinya jika Work Environment sudah dibuat dan ingin melanjutkan development , anda bisa memulai langsung melalui tahap 6

5. Akan ada beberapa pilihan , untuk QuickStart dalam pembelajaran kita pilih Blank , kemudian tunggu hingga selesai.

template

6. Start

$ expo start

Browser akan memuat localhost sebagai development tools , siapkan Physical Device yang terinstall Expo Go .

Setelah barcode muncul , scan melalui Device kemudian secara realtime (perubahan saat di save) ini akan me refresh otomatis untuk proses debugging .

Tahap penting disini , pastikan anda menggunakan Wifi atau LAN atau jaringan yang sama pada Laptop dan Physical Device , ini berguna sebagai koneksi antar Device untuk dapat menghubungkan secara Realtime .

7. Selanjutnya kita buka Direktori Projek , Buka dengan IDE atau Text Editor favorit anda . Disini Developer menyarankan untuk menggunakan Visual Studio Code , Atom ataupun Sublime , tetapi anda bebas untuk berkreasi .

8. App.js siap di edit .!

Begitulah React Native bekerja . Dengan terus berlatih dan dokumentasi WorkFlow yang ada pada halaman Official nya https://reactnative.dev merupakan bagian terpenting dalam memulai React Native.

Selanjutnya apa yang akan anda buat dengan React Native ?