Apakah React Native lebih baik dari Real Native Apps? | AMTech

Pada artikel kali ini saya akan membahasa tentang Apakah React Native lebih baik dari Real Native Apps?, OK mari kita langsung bahas saja tentang Apakah React Native lebih baik dari Real Native Apps?

Jika Anda menyukai pengembangan aplikasi seluler, nama Bawahan Asli tidak boleh baru untuk Anda. Istilah ini telah tren di dunia teknologi untuk beberapa waktu sekarang. Karena Facebook secara resmi meluncurkannya sebagai platform open-source, banyak bisnis telah memasukkannya ke dalam proses mereka.

Sama seperti originasi lainnya, React Native hadir dengan pro dan kontranya sendiri. Terlepas dari kenyataan bahwa pengembang web profesional masih lebih suka bekerja dengan alat bawaan, ada sejumlah pengembang pemula yang sedang berkembang yang sedang mempertimbangkan Bereaksi Asli untuk proyek mereka.

Posting ini ditargetkan untuk menyoroti aspek teoritis serta praktis menggunakan React Native dibandingkan dengan Swift. Untuk membuat perbandingan ini, kami memiliki dua aplikasi yang hampir identik dalam kedua kerangka (lihat detail di https://github.com/weblab-technology/swift-honors-app

https://github.com/weblab-technology/react-native-honors-app)

Tujuan saya adalah untuk menjaga aplikasi ini sesederhana mungkin sehingga akan lebih mudah membuat perbandingan yang adil di antara aspek-aspek penting dari kedua platform. Di bawah ini Anda akan menemukan analisis rinci dari aplikasi yang dikembangkan di Swift serta di React Native dalam hal CPU, GPU, dan konsumsi memori. Jadi mari kita jelajahi!

Swift vs React Native

Oke, jadi aplikasi ini melibatkan login Facebook, pemulihan profil Facebook, pemulihan Database, dan Tab Bar Controller. Saya telah mengkodifikasi aplikasi serupa di Swift serta di React Native dan akan menggunakan perangkat nyata untuk menilai kinerja aplikasi ini. Tujuan saya adalah menyamakan mereka satu sama lain untuk mengamati platform mana yang berkinerja lebih baik.

The Swift
Tidak seperti bahasa lain, Swift relatif mudah digunakan, terutama jika Anda membandingkannya dengan apa yang kami miliki sebelumnya dengan Objective C. Xcode benar-benar aplikasi yang canggih dan membuat pengembangan jauh lebih mudah ketika dikombinasikan dengan Swift.

 

(Facebook login in Swift)

 

(To-do list in Swift)

 

(Maps in Swift)

The React Native

Ketika berbicara tentang React Native, belajar JavaScript relatif lebih mudah daripada belajar Swift. Yang terbaik? Berbeda dengan iOS, di mana Anda perlu menyesuaikan semuanya sendiri, React Native berguna bagi penggunanya. Saya menjalankan aplikasi dalam sejumlah ukuran iPhone yang beragam dan coba tebak? Mereka tampak sempurna di sana.
 

 

(Facebook Login in React Native)

 

(To-do list in React Native)

 

 

(Maps in React Native)

 

 (CPU Profiler on maps screen)

 

 (CPU Profiler on todo list screen)

Performance Comparison
Sekarang saatnya untuk menumpuk aplikasi ini satu sama lain untuk menyimpulkan opsi mana yang lebih baik. Seperti yang disebutkan sebelumnya, saya akan menggunakan perangkat nyata yang digabungkan dengan Xcode untuk menguji aplikasi ini. Tiga kategori yang akan saya fokuskan adalah CPU, GPU, dan konsumsi Memori. 

 Bereaksi Aplikasi asli tertinggal lebih cepat ketika saya mengubah ukuran dan menyeret peta.

Aplikasi Swift menggunakan total energi lebih sedikit selama pengujian yang sama dari aplikasi React Native sesuai dengan Log Penggunaan Energi.

Secara keseluruhan, ada 4 tab di aplikasi saya - login Facebook, daftar yang harus dilakukan, pengendali tampilan halaman, dan Maps. 

CPU Measurements

Swift vs React Native — CPU Usage

1. Profil Facebook

Dengan perbedaan 1,21% dalam pengukuran CPU, React Native sedikit lebih efisien daripada Swift dalam hal penggunaan CPU.

2. Daftar Agenda

Untuk tab kedua, React Native dengan efisiensi 0,66% adalah pemenang lagi. Saat melakukan tugas, lonjakan konsumsi CPU dicatat pada waktu yang tepat saya memasukkan / menghapus item ke / dari daftar.

3. Tampilan Halaman

Swift adalah pemenang yang pasti untuk tab ini dengan efisiensi 5,55% lebih besar daripada React Native. Saat melakukan tugas ini dan mencatat pengukuran, peningkatan konsumsi CPU dicatat pada saat saya melompat ke halaman lain pada tampilan Halaman.

4. Maps

Dengan 9,7% penggunaan CPU yang lebih efisien, Swift memenangkan kategori ini lagi. Terlihat, saat melakukan tugas ini, lonjakan konsumsi CPU dicatat tepat pada saat saya menekan tombol Maps.

Jadi kita memiliki hasil 50-50 untuk Swift dan React Native di sini. Secara keseluruhan, Swift sedikit lebih efisien daripada React Native dalam hal penggunaan CPU. Hasilnya mungkin sebaliknya jika saya memberi saya cukup waktu untuk menguji setiap aplikasi. yang menarik, CPU tidak digunakan kapan pun ketika berpindah dari tab ke tab.

Penggunaan GPU

Oke, jadi analisis berikutnya yang akan kita lakukan adalah pengukuran GPU. Saya akan melakukan satu tugas per tombol untuk setiap paradigma dan mencatat hasilnya. Sumbu vertikal naik hingga 60 bingkai / detik dan saya akan menggunakan alat 'Inti Animasi' untuk menilai hasilnya. 
  

Mari kita bahas setiap kategori untuk memeriksa hasilnya

1. Profil Facebook

Dengan perbedaan ukuran 1.08 frame / detik, Swift secara marjinal memenangkan tab ini. Hasilnya diamati tepat pada saat saya menekan tab 'Masuk dengan Facebook'.

2. Daftar Agenda

Bereaksi Asli hampir tidak memenangkan tab ini dengan menjalankan pada 6 frame / detik lebih tinggi dari Swift. Pengukuran diamati tepat pada saat menambahkan / menghapus item ke / dari daftar.

3. Tampilan Halaman

Swift mengungguli Bawaan Bereaksi dengan 1,37% bingkai / detik untuk tab Tampilan halaman. Saat melakukan tugas dan mencatat pengukuran, saya perhatikan bahwa frame / detik meningkat hingga 50-an ketika saya mencoba untuk cepat bergerak melalui halaman.

4. Maps

Swift adalah pemenang di sini karena berjalan pada 3,6 frame / detik lebih tinggi dari React Native. Pengukuran dicatat pada waktu yang tepat ketika saya menekan tombol ‘Maps’.

Dengan hasil 3-1, Swift jelas merupakan pemenang di sini.

Penggunaan Memori

Sekarang saatnya untuk membandingkan Swift dan React Native dalam hal pengukuran memori. Saya telah melakukan satu tugas per tab dan memplot grafik dengan memori (MiB) pada sumbu y. Interval sampel untuk konsumsi CPU adalah 1 ms.

1. Profil Facebook

Swift adalah pemenang kategori ini dengan konsumsi memori kurang dari 0,07% MiB. Sebuah lonjakan ingatan direkam pada saat saya menekan tombol ‘Masuk ke Facebook’.

2. Daftar Agenda

React Native outperform Swift dalam kategori ini dengan penggunaan memori kurang dari 0,35%. Lonjakan konsumsi memori dicatat pada saat saya memasukkan item ke daftar. Terjadi penurunan penggunaan memori saat saya menghapus item dari daftar.

3. Tampilan Halaman

Sekali lagi Bereaksi Asli melebihi Swift saat ini dengan menunjukkan 0,07% MiB kurang penggunaan memori. Tidak ada lonjakan memori yang teramati saat beralih di antara halaman.

4. Maps

Bereaksi Asli lagi adalah pemenang di sini dengan mengalahkan Swift dengan penggunaan memori besar 36,02 untuk kategori ini. Saat melakukan tugas ini, lonjakan memori direkam tepat pada saat saya menekan tombol ‘Maps’.

Saya akan mengatakan di sini bahwa bahkan jika Swift menggunakan lebih banyak memori rata-rata, yang benar, memori akan dikelola lebih baik ketika aplikasi tumbuh. Selain itu, hasilnya mungkin sangat berbeda jika saya memberikan waktu yang cukup di setiap aplikasi daripada hanya berkonsentrasi pada satu tugas saja pada satu waktu.

Platform Pilihan saya

Yah, aplikasi yang saya kembangkan untuk Bereaksi Asli dan Swift hampir mirip dalam presentasi fisik mereka. Selain itu, jelas sekali bahwa kedua aplikasi ini berfungsi dengan cara yang identik. Saya dapat menyimpulkan dari percobaan ini bahwa meskipun React Native berkinerja lebih baik dalam kategori memori, Swift menggunakan CPU dan GPU dari iPhone cukup efektif. Kesimpulannya, kita dapat mengatakan bahwa React Native cukup dekat dengan Swift, yang hebat. Namun, dengan rasio menang 2-1 bersama dengan potensi memori yang tinggi, Swift adalah pemenang yang pasti di sini.

Apa yang Bereaksi Bawaan Begitu Populer?

Popularitas kerangka kerja ini tidak mengejutkan saya sama sekali karena aplikasi ini memiliki janji untuk membuat aplikasi untuk berbagai platform secara bersamaan. Ya, kamu benar tentang itu. Karena Bawaan Asli sepenuhnya bergantung pada JavaScript, Anda tidak perlu menguasai bahasa asli apa pun lainnya untuk membuat aplikasi untuk iOS dan Android secara terpisah. Besar! Bukan begitu Tapi di sini muncul pertanyaan, apakah kerangka mobile ini cocok untuk semua jenis proyek? Tentu saja tidak. Ada banyak pertimbangan yang harus diambil sebelum membuat keputusan akhir - kecakapan coding Anda saat ini, ruang lingkup aplikasi Anda, dan durasi proyek Anda adalah pertanyaan yang harus dijawab sebelum membuat pilihan.

React Native — Pros & Cons

Pros:

Shared Core Advantage 

Saat berbicara tentang aplikasi web, React berhasil mengatur paradigma React bersama dengan menyegarkan DOM Browser. Namun, ketika menyangkut aplikasi seluler, hal-hal menjadi sulit ketika tidak dapat dihindari untuk mengelola sejumlah model pohon di berbagai platform. Nah, jika Anda terus menambahkan lebih banyak tanggung jawab di pundak React, Anda tidak dapat mengharapkan apa pun selain bencana pada akhirnya.

Platform Semua-Termasuk

Jika kita melihat lebih dekat definisi formal React, pada dasarnya ini adalah pustaka JavaScript untuk membuat UI. Baiklah, ini sangat bagus untuk membuat UI, tetapi pada saat yang sama tidak termasuk yang lain.

Pernahkah Anda berpikir untuk menyiapkan seluruh resep dengan satu bahan? Mirip dengan itu, tidak mungkin membangun keseluruhan aplikasi hanya dengan React saja. Tentunya, Anda memerlukan webpack untuk menyusun kode, CSS untuk melakukan styling, Firebase untuk pemeliharaan data, dan banyak hal lainnya.

Nah, jika lingkup pekerjaan Anda terbatas pada pengembangan web saja, Bereaksi saja sudah cukup untuk memenuhi tujuan. Namun, jika Anda juga berurusan dengan perancangan aplikasi seluler, itu menjadi tidak signifikan untuk menambahkan kumpulan alat lengkap yang dapat digunakan untuk bekerja dengan cara yang sama seperti React. Itu sebabnya React adalah pustaka dan React Native adalah kerangka kerja.

Apa Buktinya Penawaran Asli?

a.        The New React

b.       Kontributor untuk Android dan iOS

c.       Flexbox untuk menata antarmuka pengguna

d.      Widget dan animasi yang berbeda

e.       Dan banyak lagi

 

import React, { Component } from 'react'; import propTypes from 'prop-types'; import { View, Text } from 'react-native'; import { infoMessageStyles } from './styles'; export default class InfoMessage extends Component { static propTypes = { text: propTypes.string.isRequired, } render() { return ( <view style={infoMessageStyles.wrapper}> <Text allowFontScaling={false} style={infoMessageStyles.text} > {this.props.text} </Text> </View> ); } }

Dengan demikian, React Native adalah platform lengkap karena menggabungkan semua yang Anda perlukan untuk membuat aplikasi yang berfungsi penuh. Meskipun React yang asli hanya menangani UI web dan Anda perlu menambahkan komponen lain yang relevan untuk membuat aplikasi web lengkap.

UI asli

Pernahkah Anda berpikir mengapa React Native disebut ‘Native’? Itu karena antarmuka pengguna yang dibuat dengan React Native terdiri dari widget asli yang tidak hanya berfungsi dengan sempurna tetapi juga terasa konsisten.

Hal-hal seperti akselerasi gulir, animasi, dan perilaku keyboard menambah begitu banyak pengalaman pengguna sehingga Anda tidak dapat mengambil kesempatan untuk menghindarinya. Di sinilah aplikasi React Native mengungguli aplikasi asli asli karena memungkinkan Anda untuk membuat aplikasi asli yang mendukung React paradigm dalam JavaScript.

Komponen Terpadu

React Native menawarkan sejumlah komponen terintegrasi yang memungkinkan pengembang untuk melaksanakan tugas-tugas dasar dengan cepat dan efektif. Beberapa di antaranya termasuk:

  Teks: Digunakan untuk menampilkan teks

import React, { Component } from 'react'; import { AppRegistry, Text, StyleSheet } from 'react-native'; export default class TextInANest extends Component { constructor(props) { super(props); this.state = { titleText: 'Nest', bodyText: 'This looks like a birds nest.', }; } render() { return ( <text style={styles.baseText}> <text style={styles.titleText} onPress={this.onPressTitle}> {this.state.titleText}{'\n'}{'\n'} </Text> <text numberOfLines={5}> {this.state.bodyText} </Text> </Text> ); } } const styles = StyleSheet.create({ baseText: { fontFamily: 'Cochin', }, titleText: { fontSize: 20, fontWeight: 'bold', }, });

 View: Used for designing a user interface

class ViewColoredBoxesWithText extends Component { render() { return ( <view style={{flexDirection: 'row', height: 300, padding: 300}}> <view style={{backgroundColor: 'green', flex: 0.3}} /> <view style={{backgroundColor: 'blue', flex: 0.5}} /> <text>Greetings !</Text> </View> ); } }

Text Input: Enables users to enter text

import React, { Component } from 'react'; import { AppRegistry, Text, TextInput, View } from 'react-native'; export default class PizzaTranslator extends Component { constructor(props) { super(props); this.state = {text: ''}; } render() { return ( <view style={{padding: 10}}> <TextInput style={{height: 40}} onChangeText={(text) => this.setState({text})} /> <text style={{padding: 10, fontSize: 43}}> {this.state.text.split(' ').map((word) => word && '🍕').join(' ')} </Text> </View> ); } }

Button

Misalnya, Anda dapat membuat tombol dasar di basis Asli dengan menggunakan kode sumber berikut.

<Button onPress={onPressLearnMore} title='A Basic Button' color='#841589' accessabilitylevel='A beautiful button' />

Cons:

APIs Restriction

Meskipun React Native mendukung berbagai macam API, masih ada persyaratan untuk menggunakan API lain melalui modul asli. Modul-modul ini pada dasarnya adalah segmen kode yang ditulis dalam bahasa asli dan kemudian dimasukkan ke dalam kode yang tersisa. Tidak diragukan lagi, ini adalah cara yang bagus untuk menyelesaikan masalah, tetapi Anda perlu memiliki kemampuan yang memadai tentang bahasa asli dan alat-alatnya.

Complex Design

Android dan iOS menggunakan pedoman desain yang berbeda, yang tampaknya berarti bahwa dengan menggunakan Bawaan Asli Anda harus menyertakan banyak pernyataan if bersama dengan pengkodean terpisah untuk menumpuk terhadap penempatan elemen grafis. Selain itu, membuat UI kustom berkualitas tinggi juga melelahkan dalam paradigma React dan saya terpaksa menulis dan menyertakan perpustakaan cepat saat mengembangkan aplikasi ini. 

Slower Performance

Ini adalah kemunduran terbesar bagi saya. Jika Anda berencana mengembangkan aplikasi yang rumit seperti editor gambar / video, Bereaksi Asli bukan pilihan yang baik untuk Anda. Namun, jika proyek Anda relatif kecil, Anda dapat menghemat waktu dengan berbagi bagian kode Anda (Ya, hanya bagian! Kode tidak sepenuhnya dapat digunakan kembali dan Anda hanya dapat menggunakan 60% kode untuk Android. Ini bekerja lebih baik dengan iOS meskipun ....)  

Native — Pros & Cons

Pros:

No APIs Limitations

Apa yang membuat native benar-benar fungsional adalah kenyataan bahwa Anda dapat mengakses semua API melalui lingkungan asli. Anda tidak memerlukan pemetaan lapisan tambahan yang perlu diperbarui.

Variety of Resources to Choose From

Pengembangan di lingkungan asli memberi Anda kesempatan untuk mengakses banyak perpustakaan pihak ketiga. Dengan demikian akan membantu Anda membuat lebih banyak aplikasi fungsional dengan pengalaman pengembangan yang lebih baik.

Long-Term Benefits

Ketika bekerja dengan paradigma React, faktor ketidakpastian selalu ada. Real Native, di sisi lain, adalah pilihan yang paling aman bagi pengembang dalam jangka panjang. 

Cons:

The Requirement to Develop Two Separate Applications

Ketegasan platform tentu saja merupakan kerugian terbesar yang ditawarkan oleh platform asli. Anda harus mengembangkan kode terpisah untuk Android dan iOS dan tidak ada kode yang dapat dibagikan di antara mereka.

 

Membandingkan React Native dengan Real Native Apps

Cara Membuat Aplikasi Bawaan yang Bereaksi

Baik Anda membangun aplikasi untuk iOS atau Android, Anda memerlukan wawasan tentang tiga hal penting

a.        Bahasa pemrograman yang disukai

b.       Alat yang cocok

c.        Antarmuka Pemrograman Aplikasi (API)

Sejauh bahasa pemrograman untuk React Native yang bersangkutan, Anda memerlukan JavaScript atau sedikit offbeat mengambil JavaScript yang disebut JSX. Untungnya, Anda tidak perlu seperangkat alat yang rumit baik terutama editor teks dan debugger chrome cukup untuk membuat dan menguji aplikasi. Bagian API sedikit menantang. Tentu saja Anda tidak dapat memiliki pendekatan React Native dalam melakukan segalanya.

Meskipun, Anda dapat memulai tanpa keterpaparan web, Anda mungkin masih perlu memiliki pengetahuan tentang pengembangan web untuk membuat aplikasi React Native yang sempurna. (Bagaimana dengan berinvestasi di beberapa program JavaScript, HTML, dan CSS profesional untuk memoles keahlian Anda?)

Building a Native Android/iOS App

Objective-C dan Swift adalah bahasa yang diperlukan untuk membangun aplikasi asli di iOS. Untuk Android, Anda perlu menguasai bahasa Jawa. Dalam hal perkakas, Anda harus menggunakan IDE platform individual serta mengambil bagaimana IDE dan debugger yang relevan dapat membantu Anda membangun sistem.

Meskipun pengembangan web membentuk basis untuk Bereaksi Bawaan, tidak ada kerangka acuan khusus dalam pengembangan Android atau iOS. Tidak lupa ini adalah platform asli asli dan Anda harus memiliki pengetahuan tentang prasyarat yang terkait dengan platform ini.

Kerangka kerja di sisi lain juga bukan perkecualian. Anda perlu menjadi berpengalaman tentang bagaimana segala sesuatu dapat diselesaikan secara terprogram. Singkatnya, Anda harus menjadi orang aneh pemrograman nyata untuk bekerja dengan lingkungan asli untuk membangun aplikasi.

Which One’s Easier to Learn?

Di luar bayangan keraguan JavaScript jauh lebih mudah untuk dipelajari serta debug dibandingkan dengan Swift, Objective-C dan Java. Namun perlu diingat, kemudahan datang dengan biaya. Karena JavaScript adalah bahasa yang mudah digunakan, selalu ada risiko kesalahan di dalam kode Anda.

Semua bahasa lain, di sisi lain, datang dengan konsep analisis waktu kompilasi yang menghapus banyak kemungkinan kesalahan.

Swift jelas sangat modern, tetapi kedua bahasa lainnya terus ditingkatkan dan tidak benar-benar cacat dalam hal kinerja dan fungsionalitas. Namun, JavaScript menyimpan berbagai ketidaksempurnaan yang dapat menjadi alasan ketidakkonsistenan dan ketidaksempurnaan (Jadikan Google sebagai teman terbaik Anda dan Anda akan tahu sisanya).

Dengan demikian, React Native mungkin lebih sederhana untuk dipelajari, tetapi ini datang dengan masalah JavaScript. Selain itu, seperti paradigma lintas platform lainnya, Anda harus mengatasi paradigma 'tulis sekali, terapkan di mana-mana'.

     

React Native vs Real Native Apps — Conclusion

Besar! Kami telah meninjau beberapa hal penting sampai sekarang. Memilih Bereaksi Bawaan di Swift tergantung pada preferensi dan persyaratan pribadi Anda. Saya akan mengatakan jika aplikasi Anda tidak rumit dan tidak perlu menyertakan fitur yang relatif terbaru seperti, animasi yang kompleks atau iMessage, Anda harus memilih Bereaksi Bilangan Asli pada awalnya.

Dan bahkan jika persyaratan Anda rumit, tetapi Anda adalah seorang ahli iOS atau Android dan juga memperoleh beberapa eksposur pengembangan web, Bereaksi Asli dapat membuat pilihan yang baik karena Anda mungkin memperbaiki semua yang Anda perlukan.

Namun, jika Anda adalah seorang peserta di dunia pembangunan, saya merekomendasikan peluncuran pada satu platform yang menggunakan bahasa aslinya di awal. Amati cara kerjanya. Kemudian mendekati ke platform lain.

Jadi Apakah React Native lebih baik dari Real Native Apps?? Silakan tinggalkan umpan balik Anda di bagian komentar di bawah ini dan mari kita diskusikan! 

 


sumber: https://codeburst.io/react-native-vs-real-native-apps-ad890986f1f