Flutter ve ReactNative

Gerçek yerel uygulamalara en yakın performansı sağlayan tek bir kod tabanlı mobil uygulamalar geliştirmek için birçok platformlar arası çerçeve mevcuttur. En güçlü çerçeve, Google'ın Flutter'ı ve Facebook'un React Native'idir . Flutter ve ReactNative'in güçlü ve zayıf yönlerine bakalım ve objektif bir karşılaştırma yapalım.

üretkenlik

En önemli faktörlerden biri, her bir çerçeveyi kullanmanın rahatlığı ve geliştirici deneyimidir. Her çerçevenin üretkenliğini tahmin etmek için beş kriter seçtik.

Sıcak yeniden yükleme desteği . Bu işlev, kod değişiklikleri olduğunda uygulamayı otomatik olarak yeniden başlatır. Ek olarak, uygulamanın önceki aşamasını korur. Hem React Native hem de Flutter bu özelliği destekler. Geliştiricilere göre bu özellik, geliştirme sürecini daha erişilebilir kılıyor ve zamandan tasarruf sağlıyor.

Kod yapısı . Kod yapısında büyük farklılıklar vardır. Her şeyden önce, Flutter'ın şablonları ve verileri kod boyunca ayrılmamıştır. Dart programlama dilini kullanır. Ayrıca, Flutter'da oluşturulan UI düzeni, başka herhangi bir şablonlama diline veya görsel araca ihtiyaç duymaz. Bu işlemler zamandan tasarruf sağlar. React Native, yapı kararını geliştiriciye bırakır ve bu da onu dikkate alınması gereken bir ödünleşim haline getirir.

Kurulum ve konfigürasyon . Flutter'ı kurmak ve hemen kullanmaya başlamak çok basittir. Ek olarak, Flutter doktoru sistem sorunlarının çözülmesine yardımcı olur. React Native, yeni bir uygulama oluşturmaya ve geliştirme için gerekli olan kitaplıkları sağlamaya yardımcı olacak araçlara sahiptir. Ek olarak, koda bir miktar yapı sağlayacaktır. Yeni React Native uygulamaları oluşturmak için en popüler araçlar Expo ve Create React Native Uygulamasıdır.

Desteklenen IDE'ler . Flutter, örneğin IntelliJ IDEA, Android Studio ve VS Code gibi daha az IDE'yi destekler. Öte yandan, React Native birçok IDE ile bütünleşir, bu nedenle hangisini kullanacağınızı seçmek zordur.

Donanıma özel API . React Native, coğrafi konum ve Wi-Fi programlama arayüzleri sunar. Ayrıca Bluetooth, kamera, biyometri ve NFC için seçenekler var. Özelleştirilebilir grafiklerle çizim yapmak için pek çok çözüm yoktur ve yalnızca yerel kod yardımıyla elde edilebilir. Flutter için şu anda donanıma özel birçok API oluşturuluyor. Dolayısıyla şu anda bir iddiada bulunmak oldukça zor. Flutter'ın başarısı, donanıma özel API'lerin kalitesine bağlıdır.

Programlama dili

React Native, görünümler oluşturmak için JavaScript ile birlikte JSX sözdizimini kullanır. JavaScript, web programlamanın yanı sıra mobil geliştirme için de kullanılabilir. Ayrıca geliştiriciler, arka uç geliştirme için Node.js'yi seçebilir. Yığının tüm bölümleri için bir dil kullanmamıza izin verir.

Flutter, Dart programlama dilini kullanır. Bu dil JS kadar popüler değil, ancak Google onu kullanıyor ve tanıtıyor. Dart, yerel ve React Native geliştiricileri için kademeli bir öğrenme eğrisi sunar.

Teknik Mimari

Flutter: Flutter mimarisi, içinde mobil uygulamalar geliştirmek için gereken tüm teknolojileri sağlayan Malzeme Tasarımı ve Cupertino gibi yerleşik bileşenlerin çoğuna sahip Dart çerçevesini kullanır. Bu nedenle, boyut olarak daha büyüktür ve genellikle köprünün yerel bileşenlerle iletişim kurmasını gerektirmez. Dart çerçevesi, tüm protokollere, kompozisyonlara ve kanallara sahip olan Skia C++ motorunu kullanır.

React Native: React Native mimarisi, JavaScript köprüsü olarak da bilinen JS çalışma zamanı ortam mimarisine dayanır. JavaScript kodu, çalışma zamanında yerel kodda derlenir. React Native, Flux mimarisini kullanır. Kısacası, React Native, yerel bileşenlerle iletişim kurmak için JavaScript köprüsünü kullanır.

Kullanıcı Arayüzü Bileşenleri

Flutter'ın en önemli avantajlarından biri, işletim sisteminin yerel bileşenleri yerine UI bileşenlerini kullanma fırsatı sunmasıdır. Sonuç olarak, özelleştirilmiş UI bileşenleri sağlamak ve esnekliği artırmak çok daha kolay.

Böyle Flutter UI öğeleri vardır:

• Android için malzeme widget'ları sağlanır.
• Cupertino, iOS için sunulmaktadır.
• Platformdan bağımsız widget'lar.

Flutter'ın widget'larını kullanarak, işletim sisteminin bileşenleriyle birlikte yerel ekranlarla yüksek düzeyde uyumluluk elde etmek mümkündür. Ancak, iOS uygulamalarının geliştirilmesi için Cupertino kitaplığına hala ihtiyaç vardır, örneğin iOS tarzı form bileşenleri.

Öte yandan, geliştiriciler, React Native UI kitaplıkları oldukça kapsamlı olduğu için daha kişiselleştirilmiş bir kullanıcı deneyimi elde edebilir.

Verim

Flutter: Flutter, uygulamaları ekranda oluşturmak için tamamen farklı bir yaklaşım benimsiyor. Başlangıç ​​olarak, Flutter her iki platformdan da yerel bileşenleri kullanmaz. Bunun yerine, widget'larını oluşturur ve ekranda oluşturmak için GPU'yu kullanır. Tüm Dart kodunu, daha sonra doğrudan CPU tarafından çalıştırılabilen yerel ARM kodunda derler. Bu, Flutter ile oluşturulmuş uygulamaları oldukça hızlı hale getirir. Flutter'ın uygulaması, makine diline daha yakın olması ve daha iyi yerel performans sağlaması için arm C/C++ kitaplığı kullanılarak derlenmiştir.

React Native: React Native ise, oluşturulacak UI bileşenlerini yorumlamak için bir Javascript köprüsünü kullanır ve ardından iOS veya Android bileşenini ekranda oluşturmak için Objective-C API'lerini veya Java API'lerini çağırır. Bu ekstra soyutlama katmanı, React Native uygulamalarını yavaşlatabilir.

Test Desteği

Flutter: Flutter, uygulamaları, widget'ları ve entegrasyon düzeylerini test etmek için zengin bir dizi test özelliği sunar. Flutter, Flutter uygulamalarını test etmek için burada harika belgelere sahiptir, Flutter uygulamalarının nasıl test edilebileceği hakkında ayrıntılı bilgi için Flutter uygulamalarını test etmeyle ilgili Nevercode blogunu da okuyabilirsiniz. Flutter, kullanıcı arayüzünü test etmek ve bunları birim testleri hızında çalıştırmak için pencere öğesi testleri oluşturabileceğimiz harika bir pencere öğesi test özelliğine sahiptir.

React Native: React Native bir JavaScript çerçevesidir, bu nedenle JavaScript'te birkaç birim düzeyinde test çerçevesi bulunur. Jest araçları, anlık görüntü testi için kullanılabilir. Ancak, entegrasyon veya UI seviyesi testi söz konusu olduğunda, React Native, React Native'den resmi destek sağlamaz. Appium ve Detox gibi React Native uygulamalarını test etmek için kullanılabilecek üçüncü taraf araçlar vardır, ancak bunlar resmi olarak desteklenmemektedir.

Belgeler ve Araç Seti

Flutter: Flutter çok iyi dokümantasyon sağlar, mobil uygulama geliştiricilerinin uygulamalarını dokümante ederken kullanmalarına izin vererek hayatını kolaylaştırır. Bu nedenle, dokümantasyon ve Araç Seti olarak kabul edildiğinde, Flutter, muadili ile karşılaştırıldığında en iyi seçenektir.

React Native: Bileşenlerin çoğu üçüncü şahıslar tarafından tasarlandığından ve uygun dokümantasyon sağlamadığından React Native çerçevesinin belgeleri organize edilmemiştir.

İnşa Et ve Bırak Otomatı

Flutter: Flutter, güçlü bir komut satırı arayüzüne sahiptir. Android ve iOS uygulamaları oluşturmak ve yayınlamak için komut satırı araçlarını kullanarak ve Flutter belgelerindeki talimatları izleyerek uygulamanın bir ikili dosyasını oluşturabiliriz. Bunun da ötesinde, Flutter burada fastlane ile dağıtım sürecini resmi olarak belgelemiştir.

React Native: React Native resmi belgelerinde, iOS uygulamalarını App Store'a dağıtmak için herhangi bir otomatik adım yoktur. Ancak, uygulamayı Xcode'dan dağıtmak için manuel bir işlem sağlar. Burada, React Native uygulamalarının App Store'a nasıl dağıtılacağına dair bir makale var, ancak tüm süreç manuel görünüyor. Ancak, React Native ile yazılmış iOS ve Android uygulamalarını dağıtmak için fastlane gibi üçüncü taraf araçları kullanabiliriz. Bu makalede açıklandığı gibi React Native uygulamalarını göndermek için fastlane kullanma süreci. Bu, React Native'in oluşturma ve yayınlama otomasyonu için üçüncü taraf kitaplıklarına güvenmesi gerektiği anlamına gelir.

CI/CD Desteği

Flutter: Flutter'ın, harici kaynaklara bağlantılar içeren Sürekli Entegrasyon ve Test üzerine bir bölümü vardır. Ancak Flutter'ın zengin komut satırı arayüzü, CI/CD'yi kolayca kurmamızı sağlar.

React Native: React Native, CI/CD'yi kurmak için herhangi bir resmi belgeye sahip değildir. Ancak, React Native uygulamaları için CI/CD'yi açıklayan bazı makaleler vardır.

Çözüm

Flutter ve React Native çerçevelerinin kararlılık, performans ve dokümantasyon açısından avantajları ve dezavantajları vardır.

Endüstri uzmanlarından bazıları, Flutter'ın mobil uygulama geliştirmenin geleceği olduğunu tahmin ediyor ve yukarıdaki yönleri karşılaştırdığımızda, Flutter'ın platformlar arası geliştirme yarışına çok güçlü bir şekilde girdiği açık.