Ilmu Coding Ilmucoding.com - Merupakan situs yang membantu Anda belajar coding lebih mudah, nyaman, interaktif dan profesional. Belajar sekarang di ilmu coding. GRATIS

Flutter vs React Native: Performa Keduanya di Tahun 2020

7 min read

Flutter vs React Native: Performa Keduanya di 2020

Flutter vs React Native Performance 2020. Tahun 2020 adalah tahun yang epic untuk perkembangan Flutter dan React Native.

Saat ini, Cross-platform solutions semakin berkembang dan populer.

Namun, seorang developer selalu ingin tahu jawaban atas beberapa pertanyaan kritis ini:

  • Framework mana yang paling cocok dengan project saya?
  • Solusi mana yang dapat menyediakan waktu tercepat untuk aplikasi saya?
  • Apakah aplikasi saya stabil dan ramah pengguna?
  • Solusi mana yang terbaik jika desain sempurna adalah prioritas pertama saya?

Flutter dan React Native adalah dua pemain yang terkenal.

Keduanya punya kelebihan yang dijagokan oleh masing-masing pengguna.

Misalnya dalam sisi UI, library, package, bahasa dasar dan contoh app mobile yang sudah menggunakan keduanya.

Saya tidak akan menyimpulkan mana yang lebih baik dari keduanya.

… tetapi saya akan menyuguhkan data yang relevan agar kita bisa menyimpulkan dengan bijak.

Sehingga … kita bisa mengambil manfaat dari data-data tersebut dalam membandingkan performa Flutter vs React Native.

Google Trends: Flutter vs React Native

Kita coba untuk melihat data selama 5 tahun terakhir pengguna keduanya di Indonesia melalui Google Trends.

Sebagai tambahan perbandingan Flutter vs React Native, saya memasukan Ionic sebagai pemanis.

Coba lihat data melalui gambar di bawah ini:

Google Trends: Flutter vs React Native
Google Trends: Flutter vs React Native

Kalau menurut data pada gambar di atas, kita mendapatkan 2 hasil.

Pertama, pengguna React Native cenderung stabil, kadang naik, kadang turun.

Kedua, pengguna Flutter naik secara signifikan mulai dari bulan Desember 2018. Tepat setelah acara Flutter Live.

Apa sudah bisa disimpulkan?

Belum. Masih banyak parameter lainnya.

Perbedaan Flutter dan React Native Secara Singkat

Sekarang kita akan coba menguraikan perbedaan keduanya secara singkat.

1# Pengertian

Flutter: Seperangkat SDK / Toolkit UI portabel untuk membuat aplikasi yang dicompile secara native ke mobile, web, dan desktop dari satu project saja.

React Native: Sebuah framework untuk membangun aplikasi native menggunakan React.

2# Creator

Flutter: Google pada bulan Desember 2018.

React Native: Facebook, bulan Maret 2015.

3# Bahasa Pemrograman

Flutter: Dart.

React Native: Javascript.

4# Popularitas

Flutter: 81.200 stars di Github pada bulan Desember 2019.

React Native: 83.200 stars di Github pada bulan Desember 2019.

5# Pengguna

Flutter: Xianyu app by Alibaba, Hamilton, Google Ads app.

React Native: Instagram, Facebook, Skype, Tesla

6# UI

Flutter: Flutter hanya memiliki satu basis kode. Aplikasi yang kita buat akan terlihat dan berperilaku serupa di iOS dan Android.

Adanya Material Design dan Cupertino Widget membuat Flutter juga dapat meniru desain platform itu sendiri (iOs atau Android).

Bagaimana itu mungkin?

Flutter berisi dua set widget yang sesuai dengan bahasa desain spesifik, yaitu Widget Material Desain menerapkan bahasa desain Google dengan nama yang sama, sedangkan Cupertino Widget meniru desain iOS Apple.

Ini berarti aplikasi Flutter yang kita buat akan terlihat dan berperilaku alami pada setiap platform iOs atau Android, meniru komponen asli mereka.

React Native: Komponen UI aplikasi akan terlihat seperti yang asli. Misalnya, tombol pada perangkat iOS terlihat seperti tombol iOS asli. Begitu juga dengan Android.

Fakta bahwa React Native menggunakan komponen asli akan memberikan dampak setelah pembaruan OS OS apa pun, komponen aplikasi kita akan langsung ditingkatkan juga.

Jika Kita ingin aplikasi menggunakan React Native terlihat hampir identik di seluruh platform – dan juga pada versi sistem operasi yang lebih lama (seperti yang dicapai Flutter), cobalah menggunakan library React Native Paper.

Library tersebut akan memungkinkan kita menggunakan Material Desain Component sebagai pengganti komponen asli dari OS (iOs dan Android).

Pro dan Kontra Pengguna Flutter

Saya tidak hanya membicarakan sisi kelebihannya Flutter saja, tetapi ada hal yang yang perlu kita perhatikan.

Sebagus apapun Flutter akan tetap memiliki Pro dan Kontra.

Berikut Ulasannya:

Pro Pengguna Flutter

Baik, inilah 5 hal yang membahas pro pada pengguna Flutter.

Apa saja?

1# Hot Reload

Sebagai pengembang, Flutter menawarkan pengembangan aplikasi yang lebih dinamis dan lebih cepat. Ini adalah salah satu hal terbesar tentang Flutter, yang dihargai oleh setiap perusahaan pengembang aplikasi mobile terkemuka.

Pengembang dapat membuat perubahan pada basis kode saat itu juga, dan melihatnya secara langsung dalam aplikasi. Ini adalah apa yang disebut fitur Hot Reaload. Biasanya diperlukan waktu (mili-) detik untuk perubahan ditampilkan.

Fitur ini membantu tim menambahkan fitur, memperbaiki bug, dan bereksperimen dengan ide-ide baru dalam sekejap.

2# Sekali Ngoding, 2 atau Lebih Target Flatform

Seperti yang kita ketahui, Flutter tidak hanya ditujukan untuk Android dan iOs. Sekarang Flutter telah mencapai ke desktop dan website.

Baca Juga: Tutorial Lengkap Flutter Web untuk Pemula

Itu artinya, developer akan mampu membuat satu kode program saja yang bisa dijalankan di berbagai platform.

3# Fast App

Flutter berfungsi dengan lancar dan cepat – tanpa pernah menggantung atau memotong saat scrolling.

Flutter menggunakan Skia Grafik Library. Berkat ini, UI digambar ulang setiap kali tampilan berubah.

Sebagian besar pekerjaan dilakukan pada GPU (unit pemrosesan grafis); itu sebabnya Flutter UI halus dan menghasilkan 60fps (frames per detik).

Namun, kita harus berhati-hati selama pengembangan agar tidak menyebabkan redrawing elemen-elemen tampilan yang datanya tidak berubah.

Redrawing ulang seluruh tampilan dapat memengaruhi kinerja dan kecepatan aplikasi, terutama jika kita harus sering memuat ulang tampilan.

Misalnya dalam aplikasi stopwatch.

4# Desain yang Disukai Pengguna

Flutter tidak bergantung pada komponen sistem asli. Sebaliknya, Flutter memiliki serangkaian widget khusus, yang dibuat dan dikelola oleh Framework Graphics Engine.

Aplikasi Flutter memiliki UI yang sangat ramah dengan pengguna.

Keuntungan penting bagi Flutter di atas React Native yaitu berasal dari perhatian detail visual.

Flutter dibuat untuk memudahkan kita membuat widget sendiri, atau hanya menyesuaikan widget yang ada.

5# Tampilan Sama, Meski di Platform yang berbeda

Aplikasi yang kita bangun menggunakan Flutter akan berjalan sama, baik di Android ataupun di iOs.

Ini memberikan kita pekerjaan yang lebih mudah dan relatif singkat.

Kontra Pengguna Flutter

Sekarang kita akan membahas kontra dari pengguna Flutter.

Apa saja?

1# Jumlah Komunitas Developer Flutter

Point plus utama untuk React Native dibandingkan Flutter adalah komunitas pengembangnya yang lebih mapan dan lebih berpengalaman.

Selanjutnya, dalam hal bahasa pemrograman, Dart tidak digunakan secara luas seperti JavaScript, setidaknya untuk saat ini.

Sebenarnya, Flutter memiliki banyak hal yang harus dilakukan jika harus mencocokkan ‘kakaknya’ – yang bisa dimengerti.

Komunitas membutuhkan waktu untuk mendidik penggunanyadan untuk mendapatkan lebih banyak pengalaman.

Namun, kita tidak melihatnya sebagai kerugian yang signifikan. Perlu juga dicatat bahwa komunitas Flutter tumbuh secara eksponensial. Plus, ada kegembiraan tersendiri ketika menggunakan toolkit ini.

Penting untuk dicatat:

  • Tren tag stackoverflow menunjukkan peningkatan minat pengembang di Flutter.
  • Di Udemy, ada 50+ kursus Flutter (dengan sekitar 213.000 peserta kursus).
  • Ada juga 35 kursus Dart (dengan sekitar 187.500 peserta kursus (25 Juni 2019)).
  • Flutter memiliki angka sekitar 287.000 siswa di 59 kursus.
  • Flutter memiliki 80.600+ bintang di Github sementara React Native memiliki 83.000+
  • Singkatnya, Flutter memang memiliki komunitas yang lebih kecil dan kurang berpengalaman saat ini, dan Dart lebih disukai daripada JavaScript.

Namun, trends saat ini menunjukkan bahwa Flutter akan segera menyusul pesaingan dalam hal ini.

2# Dokumentasi dan Support Mengesankan, Tetapi Masih Belum Cukup

Dukungan Google untuk Flutter sangat mengesankan, tetapi Flutter masih cukup baru. Ini berarti kita tidak dapat selalu menemukan problem solving yang kita butuhkan di dokumentasi yang ada.

Sehingga kita perlu membangun penyelesaian problem solving sendiri. Pastinya ini akan membutuhkan waktu.

Baca Juga: Tutorial Lengkap Belajar Flutter untuk Pemula

3# Dukungan Integrasi Berkelanjutan

Pada saat penulisan, Flutter tidak memiliki dukungan untuk platform CI seperti Travis atau Jenkins. Jadi, untuk mencapai pembangunan, pengujian, dan penyebaran otomatis, pengembang perlu menggunakan dan memelihara skrip khusus seperti ini.

Perlu dicatat bahwa:

  • Ada sistem CI / CD baru untuk aplikasi Flutter yang diumumkan di Flutter Live 2018
  • Pada Januari 2019, Bitrise mengumumkan Flutter CI berfitur lengkap.

4# Risiko Platform

Meskipun Flutter adalah open source, jika Google memutuskan untuk menarik dukungan untuk proyek tersebut, itu akan berarti bencana.

Sejak Google merilis Flutter versi Beta, ia hanya meningkatkan usahanya, seperti yang diilustrasikan oleh peran Flutter yang menonjol selama Google IO ’19, di samping acara Flutter Live baru-baru ini.

5# Ukuran Aplikasi

Aplikasi yang dibuat menggunakan Flutter lebih besar daripada yang asli. Namun, tim Flutter sedang berupaya mengurangi ukuran aplikasi yang dibuat dengan Flutter.

Pro dan Kontra Pengguna React Native

Sekarang kita akan masuk ke pembahasan pro dan kontra dari pengguna React Native. Sama halnya seperti Flutter, kita akan membahas apa saja kelebihan dan kekurangan React Native.

Berikut ulasan pro dari React Native:

Pro Pengguna React Native

Kita akan membahas apa saja kelebihan dari React Native.

Simak ulasannya:

1# Menggunakan Bahasa yang Populer

React Native menggunakan JavaScript: bahasa pemrograman yang banyak pengembang tahu dengan baik (sedangkan Dart masih belum begitu banyak dikenal atau digunakan).

… jika kita seorang pengembang yang lebih suka bahasa pemrograman yang diketik secara statis, kita dapat menggunakan TypeScript (subset JavaScript) di React Native.

2# Kematangan Relative

Rilis asli React Native lebih dari 5 tahun yang lalu, sehingga tim Facebook memiliki banyak waktu untuk menstabilkan API, serta fokus pada memperbaiki masalah dan menyelesaikan masalah.

Sekarang, mereka sedang mengerjakan beberapa perbaikan menarik – seperti mengurangi ukuran aplikasi.

Mantap.

3# Mudah Dipelajari

Keuntungan ini sangat ditargetkan untuk React Developer.

Jika kita memiliki latar belakang dalam pengembangan web dan sudah menggunakan React yang populer, kita dapat dengan mudah bekerja dengan React Native, tanpa harus mempelajari dokumentasi yang baru.

Kitabisa menggunakan dokumentasi, alat, dan pola yang sama.

4# Sekali Ngoding, 2 atau Lebih Target Platform

Kita pun bisa membuat aplikasi ke dalam 2 target (iOs dan Androd) hanya dengan sekali coding. Ini akan memudahkan kita dan mempersingkat waktu pengerjaan project.

5# Fast Refresh

Pada dasarnya fitur ini sama dengan Flutter.

Hot Reload mempercepat proses pengembangan dengan memungkinkan pengembang untuk menyuntikkan kode baru langsung ke aplikasi yang sedang berjalan.

Jadi, pengembang dapat melihat perubahan secara instan, tanpa membangun kembali aplikasi.

Hot Reload juga mempertahankan status aplikasi, menghindari risiko kehilangannya saat memuat ulang penuh (manfaat penting dalam konteks kerangka kerja berbasis negara) – mempercepat proses pengembangan aplikasi lebih jauh.

Untuk meningkatkan pengalaman pengembang dengan pemuatan Hot Reload, tim React Native memasukkan dalam versi 0.61 fitur baru yang disebut penyegaran cepat yang menyatukan pemuatan Hot dan Reload.

Ini lebih tahan terhadap kesalahan ketik dan kesalahan dibandingkan dengan versi sebelumnya. Anda dapat membaca lebih lanjut tentang penyegaran cepat di sini.

Kontra Pengguna React Native

Sekarang, kita akan membahas apa saja kekurangan dari React Native.

Ini ulasannya:

1# Bukan Native Asli

Seperti halnya solusi lintas-platform, pengalaman atau kinerja UI tidak akan sama dengan di aplikasi asli (bawaan OS), hanya cukup dekat dengan mereka.

Tapi tetap saja, lebih mudah untuk mencapai “native feeling” dengan React Native daripada dengan Flutter.

Jika kita ingin aplikasi Flutter memiliki komponen asli, itu akan membutuhkan pekerjaan tambahan.

2# Aplikasi Lebih Besar Daripada Native Asli

Aplikasi yang ditulis dalam React Native harus dapat menjalankan kode Javascript (JavaScript Virtual Machine). Android tidak memiliki fungsi ini secara default.

Artinya aplikasi harus menyertakan librray yang mendukung kode JavaScript, dan itu akan menghasilkan aplikasi yang lebih besar daripada Android aslinya.

Aplikasi iOS yang dibuat dengan React Native tidak jadi masalah, tetapi mereka biasanya lebih besar dari yang Native.

Berita bagus?

Seperti yang kami sebutkan sebelumnya, tim React Native sedang berupaya mengurangi ukuran aplikasi mereka.

3# UI Rapuh

Fakta bahwa React Native menggunakan komponen native, memberi kita keyakinan bahwa, setiap pembaruan OS OS, komponen aplikasi Anda akan langsung ditingkatkan juga.

Ini dapat merusak UI aplikasi tetapi jarang terjadi.

Yang lebih buruk, pembaruan dapat menjadi lebih berbahaya jika mereka menyebabkan perubahan tertentu pada API di Native.

Berita bagus?

Kejadian seperti ini sangat jarang terjadi.

Sedangkan ketika datang ke Flutter (berkat cara kerangka menciptakan komponen native sendiri), UI aplikasi jauh lebih stabil.

4# Kebebasan Memilih Pengembang

Setelah pengembang membuat proyek baru, mereka kemudian perlu memutuskan paket navigasi mana – serta manajemen negara global mana – yang akan digunakan.

Dibutuhkan banyak waktu untuk memahami penyelasaian dari setiap solusi.

… dan pada akhirnya, akan banyak waktu yang dibutuhkan untuk memutuskan mana yang terbaik ketika digunakan.

5# Lebih Sedikit Komponen Out The Box

React Native hanya mendukung komponen dasar out the box (banyak di antaranya adaptif dengan platform out the box, seperti tombol, indikator pemuatan, atau penggeser).

Seperti yang saya katakan dalam paragraf ini, ada repo luar dengan banyak komponen tambahan untuk React Native.

Pengembang dapat menggunakannya dalam suatu proyek tetapi itu membutuhkan usaha dan waktu tambahan.

Di sisi lain, jika melihat Flutter vs React Native, justru Flutter dirancang untuk mendukung Desain Bahan out the box, sehingga kerangka kerja mendukung lebih banyak widget.

Ini menghemat waktu.

Pengembang yang menggunakan Flutter dapat membuat sebagian besar tampilan dengan widget yang mudah disesuaikan dan lintas platform.

Kesimpulan

Demikianlah pembahasan tentang Flutter vs React Native dalam hal performanya di tahun 2020. Mulai dari data, trends, sampai pada pro dan kontra masing-masing dari keduanya.

Silahkan share tulisan ini sebanyak-banyak. Terutama pada mereka yang masih sering berdebat mana yang lebih baik.

Semoga bermanfaat …

Sumber: https://www.thedroidsonroids.com/blog/flutter-vs-react-native-what-to-choose-in-2020

Ilmu Coding Ilmucoding.com - Merupakan situs yang membantu Anda belajar coding lebih mudah, nyaman, interaktif dan profesional. Belajar sekarang di ilmu coding. GRATIS

Leave a Reply

Your email address will not be published. Required fields are marked *