Aynı uygulamayı Flutter, React Native ve Ionic ile geliştirdim

• En iyi çapraz platform mobil geliştirme çatısını ararken Flutter, React Native ve Ionic dikkatimi çekti
• Üç çatının da tek bir kod tabanıyla birden fazla platformda iyi performans vadettiği görülüyor
• Bir API kullanarak temel verileri ekranda gösteren mobil uygulamayı üç farklı sürümle geliştirip karşılaştırdım
  • Uygulama gereksinimleri: ekran yüklenirken ülke bilgisini gösterme, yükleme spinner'ı, yeni rastgele ülke getiren bir düğme, ülke listesini yalnızca bir kez getirme

Flutter

• Flutter, Google'ın 2017'de geliştirdiği açık kaynaklı bir çatı; tek bir kod tabanından birden fazla platform için yerel uygulamalar üretiyor. Dart dili tabanlı
• Flutter belgelerini ve eğitimlerini bir saat inceledikten sonra geliştirmeye başladım
• Geliştirme ortamını kurmak ve emülatörü çalıştırmak sorunsuzdu
• 4 saatte temel işlevlere sahip uygulamayı geliştirdim
• Android Studio'nun öneri özellikleri geliştirme sürecinde çok yardımcı oldu
• Hot Reload özelliği sayesinde değişiklikleri anında görebildim ve bu da geliştirme süresini kısalttı
• Ancak "her şey bir widget" yaklaşımı nedeniyle iç içe geçme fazla ve stil ile öğeler birbirine karıştığı için çok sezgisel gelmedi

React Native

• Meta'nın 2015'te geliştirdiği açık kaynaklı bir JavaScript çatısı; yerel Android ve iOS uygulamaları oluşturmayı sağlıyor
• React kütüphanesini kullanma deneyimim vardı ve VS Code zaten kuruluydu
• Geliştirme ortamını kurma süreci karmaşık ve kafa karıştırıcıydı (Expo Go ile React Native CLI arasındaki farkları anlamak gerekiyordu)
• Uygulamayı 2,5 saatte tamamladım ancak görsel gösterimiyle ilgili sorunları çözmekte zorlandım
• React'in bileşen tabanlı mimarisi sayesinde kod daha sade ve modülerdi
• JSX kullanarak bileşenlerin arayüzünü HTML benzeri kodla yazmak mümkün

Ionic

• Ionic, 2012'de oluşturulmuş açık kaynaklı bir mobil UI araç takımı; tek bir kod tabanıyla modern ve yüksek kaliteli çapraz platform mobil uygulamalar geliştirmeyi sağlıyor
• React, Vue ve Angular ile geliştirilebiliyor
• Zengin UI bileşenleri ve çekici bir kullanıcı arayüzü sunuyor
• Ionic videoları ve rehberlerini 30 dakika inceledikten sonra geliştirmeye başladım
• Uygulamayı Angular sürümüyle geliştirdim ve aşina olduğum geliştirme ekosistemi sayesinde hızlı ilerledim
• İlk kurulum sırasında oluşturulan çok sayıdaki JSON ve TypeScript yapılandırma dosyası biraz göz korkutucuydu
• Uygulamayı 2 saatte tamamladım
• UI'ı uygulamak kolaydı ve dokümantasyonu iyiydi
• HTML şablonları kullanarak UI ile mantığı ayırmak mümkün
• Spinner ve Floating Action Button gibi UI bileşenleri sayesinde arayüzü uygulamak kolaylaştı

Karşılaştırma: Flutter, React Native, Ionic

• Kod stili ve dil
  • JavaScript tabanlı çatılar kod okunabilirliği ve sadelikte öne çıkıyor
  • Flutter'ın iç içe geçmiş kod stili biraz kafa karıştırıcı ve okumayı zorlaştırıyor
  • React ile Angular şablonları arasında hangisinin tercih edileceği kişisel zevke bağlı
• Ekosistem
  • Nisan 2024 itibarıyla ABD'de kurulu en iyi 500 uygulamanın %12,57'si React Native, %5,24'ü Flutter, %0,52'si Ionic ile geliştirilmiş
  • React Native çok fazla esneklik sunuyor ancak kurulum ve araç kullanımında kafa karışıklığına yol açabiliyor
  • Flutter'ın benimsenme oranı artıyor ve GitHub'daki açık depo sayısı yüksek
• Araçlar
  • Hot Reload
    • Tarayıcıda üç çatı da kod değişikliklerinde uygulamayı hızlıca yeniden yüklüyor
    • Android cihazda veya simülatörde Flutter'ın Hot Reload özelliği en hızlısı
  • Uzaktan hata ayıklama
    • Flutter DevTools sezgisel ve çeşitli özellikler sunuyor
    • Ionic, Chrome Developer Tools'a benzer arayüzüyle hata ayıklamayı kolaylaştırıyor
    • React Native, React DevTools sunuyor ancak uzaktan hata ayıklamada Flutter ve Ionic'in gerisinde kalıyor
• Uygulama boyutu
  • Ionic: 3.2MB, Flutter: 18.1MB, React Native: 25.2MB
  • Kurulumdan sonra kapladıkları alan sırasıyla 9.61MB, 34.66MB ve 55.47MB
• Kullanıcı deneyimi
  • Flutter ve Ionic, platforma uygun UI bileşenleri sunarak tutarlı bir kullanıcı deneyimi sağlıyor
  • React Native ek kütüphanelere bağımlı kalıyor
• Performans
  • Flutter yerel koda derlendiği için React Native'den daha hızlı olması bekleniyor
  • Ionic webview içinde çalıştığı için performansı biraz daha yavaş olabilir

Sonuç

• Flutter'ın kod stilini daha derinlemesine incelemek istiyorum ve hata ayıklamada oyunun kurallarını değiştirebilecek Hot Reload özelliği çok cazip
• Buna rağmen mevcut web geliştirme bilgimi (TypeScript, HTML, CSS) mobil uygulama geliştirmede kullanabilme imkanı sunduğu için Ionic bana daha çekici geliyor
• Ionic geliştirme becerilerimi artırmanın mobil ve web geliştiricisi olarak yetkinliğimi güçlendireceğini düşünüyorum
• Proje geliştikçe kod organizasyonu, sorumlulukların ayrılması ve bileşenlerin yeniden kullanılabilirliği daha da netleşecektir
• Harika uygulamalar bu üç çatıdan herhangi biriyle geliştirilebilir
  • Çatı seçerken geliştirme sürecinden alınan keyif göz ardı edilmemeli
  • Deneysel bir uygulama geliştirerek farklı çatıları keşfetmeyi öneriyorum

[firea32]

Native UI kullanan tek çapraz platform kütüphanesi olduğu için vazgeçmek zor…
Bir alternatif olsa hemen geçmek isteyecek kadar, ama asıl yazıdaki Flutter da Ionic de native UI’yi seçmemiş göründüğüne göre pek bir geleceği yok gibi.

[bus710]

Benim durumumda Flutter, html/css bilmeye gerek kalmadan Dart ile her şeyi yapabilmeyi sunduğu için hoşuma gitti.

[superwoou]

Genelde web tarafında çalışmış olanlar rn'i, çalışmamış olanlar ise flutter'ı daha rahat buluyor diyorlar.

[optid77]

Sonuçta cross-platform alanının kendisi biraz niş kaldığı için, ilgili kütüphanelerin geliştirilmesi gecikiyor ya da yetersiz kalıyor.
React Native’in güçlü yanı, React ekosistemini kısmen paylaşabilmesi gibi görünüyor.

2 yıl önce geliştirme yaptığım döneme kıyasla, yakın zamanda RN ile geliştirirken tailwind, ReactQuery, TRPC gibi React tarafında aktif olarak geliştirilen/kullanılan kütüphaneleri kullanabildiğim için RN üretkenliğinin giderek arttığını hatırlıyorum.

[kaistj]

Kişisel deneyimime göre uygulama geliştirirken önemli kısımlar durum yönetimi ve UI tarafıydı.

RN’de global yönetim için Redux + Redux-saga, sayfa bazında ise React-query kullandım.
Flutter’da ise Riverpod kullanmıştım.

Kişisel olarak React tarafındaki durum yönetimi ve mantık akış sırasını anlamak biraz daha kolaydı,
geliştirmesi de daha rahattı. Web tabanlı bir platform olduğu için geliştirme biraz daha kolaydı.

Flutter’da ise kişisel olarak Riverpod’u anlamak kolay gelmedi. (Ayırdığım zamanın da biraz az etkisi vardı.)
Basit durum yönetiminde büyük bir zorluk olmadı ama platformu anlama tarafı mı etkiledi bilmiyorum,
durum değişikliklerinin ele alınması ve sunucu API işlemleri sonrasındaki ortak işleme kısmında uygulamanın karmaşıklığı? zorluğu vardı.

UI tarafında ise Flutter’daki widget’ların özellikleri ve işlevleri iyi tanımlandığı için geliştirme rahattı.
React’ta antd UI kütüphanesini kullandım ve kullanım deneyimi kötü değildi.

React deneyimim 2 yıl öncesine ait olduğu için geliştirme ile ilgili kütüphane deneyimi eski,
Flutter’ı ise yakın zamanda geliştirdim ama ayırdığım süre azdı.

Ben de geliştirme deneyimimi yorum olarak bırakıyorum~
"Demek böyle yönleri de varmış..." diye düşünmeniz yeterli~ ^^

[xguru]

Teşekkürler! Başkalarına da yardımcı olacağını düşünüyorum.