Clever Geek Handbook

Why I Left React Native to Flutter: Part 1

Halo. Nama saya Dmitry Andriyanov. Saya telah menulis di React Native selama dua tahun, sekarang saya adalah pengembang di Surf dan saya telah menulis di Flutter selama satu setengah tahun. Ketika saya pertama kali memutuskan untuk serius tentang Flutter, saya sangat ingin mencari artikel dari seorang pengembang yang beralih dari React Native ke Flutter dan mendapatkan pendapatnya. Sekarang pengembang ini adalah saya.



Kemungkinan Anda pernah melihat ini jenis umpan balik tentang Bereaksi asli dan bagaimana perusahaan bergerak jauh dari itu. Saya akan membagikan pendapat pribadi saya dari satu pengembang, bukan perusahaan.



Artikel ini ditujukan bagi mereka yang:



  • Tidak terbiasa dengan lintas platform dan ingin memahami perbedaan utama antar teknologi.
  • Dia menulis di React Native dan ingin tahu apa manfaatnya beralih ke Flutter.
  • Tidak menulis di React Native, hanya di Flutter.


Di bawah ini saya akan memberi tahu Anda mengapa pada suatu waktu saya memilih React Native, saya akan membagikan alasan untuk meninggalkan Flutter dan memberikan perbedaan utama antara React Native dan Flutter, yang menurut saya adalah yang paling penting. Banyak waktu telah berlalu sejak meninggalkan React Native - sesuatu telah berubah dan telah diperbaiki. Saya mencoba mempertimbangkan hal ini, tetapi saya mungkin melewatkan sesuatu.







Mengapa saya memilih React Native



Saya datang ke React Native dari pengembangan Web dengan React.js pada tahun 2017. Perusahaan membutuhkan pengembang React / React Native.



Penyebab:



  • Bahasa yang sama adalah JavaScript.
  • Aturan yang sama untuk membangun UI dan sistem komponen.
  • Lintas platform.


Mengapa pergi ke Flutter



React Native bagus sampai Anda mulai melakukan sesuatu yang berbobot, dengan banyak layar dan logika tambahan, dan aplikasinya semakin sulit. Saya mencoba berbagai cara untuk meningkatkan kinerja: shouldComponentUpdate, PureComponent, penggunaan kunci, memoization, pengoptimalan loop, dll., Dan mulai berpikir untuk mengganti JSCore (Hermes belum ada di sana). Hasilnya, saya mendapatkan saran untuk mencoba Flutter.



Flutter memiliki perkakas yang lebih kaya, kinerja yang lebih baik, dan tidak ada masalah React Native. Tentu saja, saya tidak menyangkal bahwa kode RN saya mungkin bukan yang paling sempurna.



Pro dari React Native yang membuat saya memulainya



1. React Native menggunakan kerangka kerja komponen React.js yang nyaman.



React.js: 



function App() {
    return (
        <div className="App">
            <header className="App-header">
                <Image
                    logo={logo}
                />
                <p>
                    Edit <code>src/App.js</code> and save to reload.
                </p>
                <AppLink>
                    Learn React
                </AppLink>
            </header>
        </div>
    );
}
function Image({logo}) {
    return <img src={logo} className="App-logo" alt="logo" />
}
function AppLink({children}) {
    return (
        <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
        >
            {children}
        </a>
    );
}

export default App;






React Native: 



function App() {
    return (
        <>
            <StatusBar barStyle="dark-content" />
            <SafeAreaView>
            <ScrollView
                contentInsetAdjustmentBehavior="automatic"
                style={styles.scrollView}
            >
            <Header />
            </ScrollView>
            </SafeAreaView>
        </>
    );
}

function Header() {
    return (
        <View>
            <Text>head</Text>
        </View>
    );
}

const styles = StyleSheet.create({
    scrollView: {
        backgroundColor: Colors.lighter,
    },
});

export default App;






2. Tidak ada WebView dan HTML - widget platform asli (OEM) digunakan. Komunikasi antara JS dan bagian asli terjadi melalui jembatan .



Sekitar dua tahun lalu saya menulis aplikasi dengan bagian UI di sisi WebView. Pada akhirnya, tantangan terbesar adalah membuatnya menjadi native, terutama responsivitas komponen dan scrolling. Dan menggunakan widget OEM secara otomatis menghilangkan masalah ini.



3. CodePush . Izinkan pengguna mengubah kode aplikasi hampir segera tanpa memperbarui versi dari toko.



4. Selama keberadaannya, banyak perpustakaan telah muncul untuk React Native.

Salah satu koleksi perpustakaan .



Pada proyek React Native pertama saya, saya menggunakan library react-native-fcmuntuk pemberitahuan push, hanya pemberitahuan yang diperlukan dan tidak ada yang lain. Di proyek lain, kami sudah menggunakan react-native-firebase , karena selain notifikasi, diperlukan analitik.



Profesional flutter



1. Lepaskan.



Versi stabil dan andal. Rilis Dart dan Flutter secara bersamaan memastikan bahwa versi baru Flutter menggunakan Dart terbaru. Karena mereka dikembangkan oleh perusahaan yang sama - Google.



2. Kinerja UI.



UI dirender pada mesin Skia -nya sendiri . Flutter memiliki kumpulan widget Material dan Cupertino sendiri , yang merupakan salinan dari komponen OEM platform. Ini memungkinkan mereka untuk digunakan secara bersamaan di kedua platform. Untuk informasi lebih lanjut tentang cara kerja widget, lihat artikel Flutter Under the Hood .



Contoh peluncuran widget iOS di kedua platform:







Tidak ada komponen OEM dan tidak ada biaya interaksi. Meskipun mereka adalah keunggulan React Native dibandingkan teknologi yang menggunakan WebView, mereka lebih rendah dalam fleksibilitas dan kinerja dari widget Flutter. Baru-baru ini bekerja pada aplikasi yang sebagian besar menggunakan widget Material untuk Android dan iOS, tetapi DatePicker bergantung pada platform.



Contoh UI pada kedua platform:







3. Hot Reload - Menyuntikkan file kode sumber yang diperbarui ke mesin virtual Dart yang sedang berjalan. Setelah itu, Flutter membuat ulang pohon widget, segera menampilkan perubahan tanpa memulai ulang aplikasi. Ini menghemat banyak waktu saat mendesain UI dan menulis logika.



4. Kompilasi Flutter.



Di React Native, hanya kompilasi JIT. Flutter hanya menggunakan JIT dalam mode pengembangan - ini memungkinkan Hot Reload berfungsi. Versi rilis Flutter menggunakan kompilasi AOT ke dalam file platform asli, yang lebih aman dan efisien daripada React Native, tempat Anda dapat mengakses kode JavaScript saat rilis. Rilis build Flutter jauh lebih cepat daripada build rilis React Native.



Perbandingan kinerja Native vs Flutter vs React Native .



5. Mengisolasi.



Dalam proses Flutter dan React Native 1 dengan 1 utas asinkron dan tugas berat akan memblokir UI.



Jalan keluar:



  • Terurai menjadi operasi asinkron. Mereka tidak memblokir UI, tetapi berjalan di utas yang sama.
  • Melepaskan ke dalam isolasi adalah proses independen dengan alirannya sendiri, yang memungkinkan Anda tidak perlu khawatir tentang penyumbatan aliran utama ini.


Flutter Dev Podcast memiliki rilis yang bagus tentang isolat dan perpustakaan untuk bekerja dengan mereka.



6. Semuanya adalah widget.



Berkat ini, widget dapat saling bertumpuk seperti yang diminta oleh pengembang, tanpa batasan khusus.



Contoh: tombol yang berisi AppBar dengan judul Switch. 



RaisedButton(
  padding: const EdgeInsets.all(10),
  child: AppBar(
    title: Row(
      children: <Widget>[
        Switch(
          value: false,
        ),
        Text('text'),
      ],
    ),
  ),
),






Anda dapat menulis widget Anda sendiri:



  • Kombinasi widget.
  • Menggunakan Canvas untuk geometri yang lebih kompleks.
  • Menggunakan lapisan render saat diperlukan perilaku tertentu.


Baru-baru ini saya menulis fungsionalitas yang paling mudah dilakukan bukan dengan menggunakan widget layer, tetapi membuat layer menggunakan RenderObject. Tetapi saya akan membicarakan hal ini di salah satu artikel berikut, di mana saya akan menjelaskan masalah dan solusinya.



Artikel tentang membuat lapisan.



Kontra dari React Native



1. Masih belum 1.0.0.



Biasanya dalam proyek mereka tetap menggunakan versi RN tertentu. Pembaruan sering kali mengakibatkan kerusakan perpustakaan atau perangkat internal RN. Alat pembaruan versi otomatis gagal. Itu lebih cepat untuk membuat ulang proyek pada versi baru, karena pelanggan outsourcing tidak membayar waktu yang dihabiskan untuk memperbarui.



Mereka diperbarui hanya ketika perpustakaan yang diperlukan memerlukannya, atau bug kritis untuk kami telah diperbaiki di versi baru. Dalam kasus ini, ada risiko bahwa pustaka lama mungkin tidak kompatibel dengan versi baru React Native. Tapi satu setengah tahun telah berlalu, mari kita periksa bagaimana sekarang. Mari coba perbarui React Native dalam beberapa menit, karena waktu pelanggan penting bagi kami.



Kami membuat proyek React Native di v0.61.5 (kedua dari belakang saat ini).

react-native init test_version --version 0.61



Jalankan:







Semuanya baik-baik saja.



Kami menginisialisasi repositori, karena pemutakhiran bekerja di atas Git dan tanpanya akan ada kesalahan:







Jalankan npx react-native pemutakhiran:







Proyek yang bersih memberikan kesalahan saat memutakhirkan.



Mari ikuti tautan yang ditawarkan di treminal. Daftar file yang akan diperbarui secara manual:



  • package.json
  • .gitattributes
  • .flowconfig
  • App.js
  • app.js / android / app / build.gradle
  • android / app / src / debug / java / com / rndiffapp / ReactNativeFlipper.java
  • android / app / src / main / AndroidManifest.xml
  • android / app / src / main / java / com / rndiffapp / MainApplication.java
  • android / build.gradle
  • android / gradle.properties
  • android / gradle / wrapper / gradle-wrapper.properties
  • android / gradlew
  • ios / Podfile
  • ios/RnDiffApp.xcodeproj/xcshareddata/xcschemes/RnDiffApp-tvOS.xcscheme
  • ios/RnDiffApp.xcodeproj/xcshareddata/xcschemes/RnDiffApp.xcscheme
  • ios/RnDiffApp/AppDelegate.m


Setelah memperbarui file, saya menjalankan peningkatan:







Jalankan npm install. Selesai. Proyek telah diperbarui.



Kriteria utamanya adalah waktu. Ini dihabiskan untuk memperbarui dan memperbaiki masalah, atau membangun kembali proyek dari awal. Di Flutter, tulis "flutter upgrade" di konsol dan selesai. Flutter akan diperbarui untuk semua project sekaligus. Mungkin ada perubahan yang mengganggu, tetapi biasanya ada beberapa di antaranya untuk keseluruhan proyek dan sangat mudah diperbaiki.



2. Kinerja.



Itu tidak cukup. Masih tidak secepat yang kami inginkan. Penguji terus mengganggu performa "non-native" yang rendah. Pengoptimalan tidak selalu membantu. Seiring pertumbuhan aplikasi, lebih banyak data yang diserialkan untuk bridge dan kurang responsif.



3. Karena komponen asli digunakan, mereka terlihat berbeda di Android dan iOS.

Untuk mencapai konsistensi, Anda harus menulis analog dari komponen untuk salah satu platform atau dari awal untuk keduanya. Atau rancang desain dengan mempertimbangkan fitur dan perbedaan ini.



UI yang sama. IOS di kiri, Android di kanan.







Selain itu



JavaScriptCore



React Native telah memiliki JS Core lama untuk Android sejak lama. Dengan munculnya Hermes, situasinya telah membaik, tetapi dilihat dari ulasan pengembang dan pengujian yang akrab, semuanya tidak sesederhana itu.



Perbandingan mesin JS .



Expo



Sulit untuk menghubungkannya dengan pro dan kontra. Ini menyediakan pustaka dan fungsionalitas penting di luar kotak, tetapi memiliki masalah sendiri yang menetralkan kelebihannya. Jika Anda memerlukan beberapa fungsionalitas tingkat platform yang hilang di Expo atau perpustakaan eksternal yang menggunakan kode asli, maka Anda harus mendorong proyek dan kelebihan Expo menghilang atau berubah menjadi kekurangannya. Bereaksi Asli init vs Expo .



Kontra Flutter



Tidak adil untuk tidak menyebut mereka. Tetap saja, ini bukanlah peluru perak.



1. Lebih sedikit spesialis dan lowongan.

Lebih sedikit pengembang dan perusahaan yang berkembang dengan Flutter dibandingkan dengan React Native. Ketika saya mencari pekerjaan di Flutter pada Mei 2019, saya hanya menemukan 3 perusahaan.



2. Jumlah perpustakaan lebih sedikit daripada di React Native.

Karena Flutter adalah teknologi yang lebih muda, jumlah pustaka yang digunakan jauh lebih sedikit, tetapi jumlahnya terus bertambah. Tetapi selama lebih dari satu tahun bekerja, ini tidak memberi saya masalah khusus, karena semua perpustakaan yang diperlukan tersedia.



3. Tidak cocok untuk:

  • Permainan.
  • Aplikasi terikat untuk bekerja dengan besi.
  • Aplikasi augmented reality. Karena Anda perlu mengimplementasikan logika secara terpisah untuk setiap platform.




Tetapi jika ada banyak UI yang umum, mungkin opsi menggunakan saluran platform untuk berinteraksi dengan kode asli atau mengintegrasikan Flutter ke dalam aplikasi asli akan dilakukan.



Dokumentasi



React Native memiliki dokumentasi yang cukup bagus yang menjawab banyak pertanyaan yang muncul. Secara bertahap membaik (sebelum Anda dapat menemukan halaman kosong: ada judul, tetapi tidak ada konten) dan materi menjadi lebih baik.

Di Flutter, dokumentasinya luar biasa. Contoh, penjelasan, resep dengan contoh, video. Jika ada masalah dalam menggunakan sesuatu, dokumentasi dapat menyelesaikannya.



Ambang batas masuk



Dalam kedua kasus tersebut, ambang masuk cukup rendah.



  • React Native - Anda perlu tahu JS, React dan Anda bisa mulai.

  • Flutter — JS / Java / Kotlin / Swift / C ( JS — ), Dart .

    React Native, Flutter .






React Native



  • .
  • .
  • .
  • .
  • .


Flutter



  • , . .
  • , .
  • .
  • .
  • .


Pengguna tidak peduli apa yang Anda gunakan untuk permintaan jaringan Http atau Dio.

Pernahkah Anda mencari pengembang JS hari ini atau pengembang Flutter bulan ini. Hal utama adalah bahwa aplikasi tersebut melakukan tugas yang diperlukan dan produktif. Flutter memungkinkan Anda memenuhi persyaratan ini dengan jauh lebih efisien.



Analisis untuk memecahkan masalah yang sama menggunakan Flutter dan React Native akan ada di bagian kedua artikel.


More articles:


All Articles