Saya mencoba mengembangkan aplikasi yang sama dengan Flutter, React Native, dan Ionic

• Saat mencari framework pengembangan mobile cross-platform yang optimal, Flutter, React Native, dan Ionic menarik perhatian saya
• Ketiga framework ini sama-sama menjanjikan performa yang baik di berbagai platform dengan satu codebase
• Saya membuat aplikasi mobile dalam tiga versi untuk dibandingkan, yang menampilkan data dasar di layar dengan memanfaatkan API
  • Kebutuhan aplikasi: menampilkan informasi negara saat layar dimuat, spinner loading, tombol untuk mengambil negara acak baru, dan daftar negara hanya diambil sekali

Flutter

• Flutter adalah framework open source buatan Google pada 2017 yang membuat aplikasi native untuk berbagai platform dari satu codebase. Berbasis bahasa Dart
• Saya mulai mengembangkan setelah mempelajari dokumentasi dan tutorial Flutter selama satu jam
• Penyiapan lingkungan pengembangan dan menjalankan emulator berjalan mulus
• Saya membuat aplikasi dengan fitur dasar dalam 4 jam
• Fitur saran di Android Studio sangat membantu dalam pengembangan
• Fitur Hot Reload memungkinkan perubahan langsung terlihat sehingga menghemat waktu pengembangan
• Namun, karena konsep "semuanya adalah widget", nested-nya banyak dan style serta elemen bercampur sehingga terasa kurang intuitif

React Native

• Framework JavaScript open source buatan Meta pada 2015 yang dapat membangun aplikasi native Android dan iOS
• Saya sudah punya pengalaman menggunakan library React, dan VS Code juga sudah terpasang
• Proses penyiapan lingkungan pengembangan terasa rumit/membingungkan (perlu memahami perbedaan Expo Go dan React Native CLI)
• Aplikasi selesai dalam 2,5 jam, tetapi saya kesulitan menyelesaikan masalah tampilan gambar
• Berkat arsitektur berbasis komponen React, kodenya ringkas dan modular
• Dengan JSX, UI komponen bisa ditulis menggunakan kode yang mirip HTML

Ionic

• Ionic adalah toolkit UI mobile open source yang dibuat pada 2012 untuk membangun aplikasi mobile cross-platform modern dan berkualitas tinggi dari satu codebase
• Dapat dikembangkan dengan React, Vue, dan Angular
• Menyediakan komponen UI yang kaya dan antarmuka pengguna yang menarik
• Saya mulai mengembangkan setelah mempelajari video dan panduan Ionic selama 30 menit
• Saya mengembangkan aplikasi dengan versi Angular, dan berkat ekosistem pengembangan yang sudah familier saya bisa bekerja cepat
• Banyaknya file konfigurasi JSON dan TypeScript yang dihasilkan pada proses setup awal terasa agak membebani
• Aplikasi selesai dalam 2 jam
• Implementasi UI mudah dan dokumentasinya baik
• Dengan template HTML, UI dan logika bisa dipisahkan
• Komponen UI seperti Spinner dan Floating Action Button memudahkan implementasi UI

Perbandingan: Flutter, React Native, Ionic

• Gaya kode dan bahasa
  • Framework berbasis JavaScript unggul dalam keterbacaan dan kesederhanaan kode
  • Gaya kode Flutter yang bertingkat terasa agak membingungkan dan sulit dibaca
  • Preferensi antara template React dan Angular bergantung pada selera pribadi
• Ekosistem
  • Per April 2024, dari 500 aplikasi teratas yang terpasang di AS, 12,57% dibuat dengan React Native, 5,24% dengan Flutter, dan 0,52% dengan Ionic
  • React Native memberi banyak kebebasan, tetapi bisa menimbulkan kebingungan dalam setup dan penggunaan alat
  • Tingkat adopsi Flutter sedang meningkat, dan jumlah repositori publik GitHub-nya banyak
• Alat
  • Hot Reload
    • Di browser, ketiga framework sama-sama me-reload aplikasi dengan cepat saat ada perubahan kode
    • Pada perangkat Android atau simulator, Hot Reload Flutter adalah yang tercepat
  • Remote debugging
    • Flutter DevTools intuitif dan menawarkan berbagai fitur
    • Ionic mudah untuk debugging dengan antarmuka yang mirip Chrome Developer Tools
    • React Native menyediakan React DevTools, tetapi tertinggal dari Flutter dan Ionic dalam remote debugging
• Ukuran aplikasi
  • Ionic: 3.2MB, Flutter: 18.1MB, React Native: 25.2MB
  • Ruang yang dipakai setelah instalasi masing-masing adalah 9.61MB, 34.66MB, dan 55.47MB
• Pengalaman pengguna
  • Flutter dan Ionic menyediakan komponen UI yang sesuai dengan platform sehingga menjamin pengalaman pengguna yang konsisten
  • React Native perlu bergantung pada library tambahan
• Performa
  • Flutter dikompilasi ke kode native sehingga diperkirakan lebih cepat daripada React Native
  • Karena berjalan di WebView, performa Ionic bisa sedikit lebih lambat

Kesimpulan

• Saya ingin menggali lebih dalam gaya kode Flutter, dan fitur Hot Reload yang bisa mengubah permainan dalam debugging sangat menarik
• Meski begitu, saya lebih tertarik pada Ionic karena pengetahuan web development yang sudah saya miliki (TypeScript, HTML, CSS) bisa dimanfaatkan untuk pengembangan aplikasi mobile
• Saya merasa meningkatkan kemampuan pengembangan Ionic akan membantu meningkatkan kapasitas saya sebagai developer mobile dan web
• Seiring proyek berkembang, susunan kode, pemisahan concern, dan reusability komponen akan menjadi lebih jelas
• Aplikasi yang hebat bisa dibangun dengan salah satu dari ketiga framework ini
  • Saat memilih framework, jangan mengabaikan kesenangan dalam proses pengembangan
  • Saya merekomendasikan untuk menjelajahi berbagai framework dengan membuat aplikasi eksperimen

[firea32]

Karena ini satu-satunya library lintas platform yang menggunakan native UI, memang sulit untuk ditinggalkan…
Kalau ada alternatif, rasanya saya ingin langsung pindah, tetapi melihat Flutter maupun Ionic di artikel utama juga tidak memilih native UI, sepertinya memang tidak ada masa depannya.

[bus710]

Dalam kasus saya, saya menyukai Flutter karena saya bisa melakukan semuanya dengan Dart tanpa perlu memahami html/css.

[superwoou]

Biasanya, orang yang terbiasa dengan web mengatakan rn lebih nyaman, sedangkan yang tidak begitu biasanya mengatakan flutter lebih nyaman.

[optid77]

Sepertinya karena cross-platform sendiri masih cukup niche, pengembangan library terkait jadi lambat atau kurang memadai.
React Native tampaknya punya keunggulan karena sebagian berbagi ekosistem React.

Saya ingat, dibanding saat mengembangkan 2 tahun lalu, belakangan ketika mengembangkan dengan RN produktivitasnya makin meningkat karena bisa memakai library yang aktif dikembangkan/digunakan di React seperti tailwind, ReactQuery, dan TRPC.

[kaistj]

Berdasarkan pengalaman pribadi saya, bagian penting saat mengembangkan aplikasi adalah state management dan UI.

Di RN, untuk pengelolaan global saya menggunakan Redux + Redux-saga, dan untuk tiap halaman saya menggunakan React-query.
Di Flutter, saya menggunakan Riverpod.

Secara pribadi, saya merasa state management di React dan pengaturan urutan logikanya sedikit lebih mudah dipahami,
dan juga lebih mudah untuk dikembangkan. Karena berbasis platform web, proses pengembangannya juga sedikit lebih mudah.

Untuk Flutter, secara pribadi saya tidak merasa mudah memahami Riverpod. (Waktu yang saya investasikan juga memang agak sedikit.)
Untuk state management yang sederhana tidak ada kesulitan besar, tetapi mungkin karena pemahaman terhadap platformnya,
dalam penanganan perubahan state dan bagian pemrosesan umum setelah menangani server API, ada kompleksitas? kesulitan dalam implementasinya.

Untuk sisi UI, widget di Flutter memiliki properti dan fungsi yang terdefinisi dengan baik, jadi pengembangannya terasa lancar.
Di React saya menggunakan library UI antd, dan pengalaman penggunaannya tidak buruk.

Pengalaman pengembangan React saya sudah dari 2 tahun lalu sehingga pengalaman dengan library terkait pengembangannya sudah cukup lama,
sedangkan Flutter saya kerjakan baru-baru ini, tetapi waktu yang saya investasikan tidak banyak.

Saya juga meninggalkan pengalaman pengembangan saya di komentar~
Anggap saja ini sebagai, "Oh, ternyata ada sisi seperti ini juga..." ~ ^^

[xguru]

Terima kasih! Sepertinya ini juga akan membantu orang lain.