Giderek daha fazla insan modern teknolojiyi benimsediğinden, mobil uygulamalara olan talep büyük ölçüde artmıştır. Müşterilerin ve işletmelerin artan gereksinimlerine ayak uydurmak için teknolojinin, çerçevelerin ve platformların sürekli girişi bir zorunluluk haline gelir. Yeni işletme segmenti için yeni bir mobil uygulama geliştirmek için geliştiricilerin zaman alan kodlama süresini basit ve verimli kılan sağlam teknolojiye ihtiyaçları vardır. Bunu başarmak için, birçok geliştirici, e-ticaret uygulamaları, etkileşimli uygulamalar ve sosyal uygulamalar tasarlama özelliklerinden yararlanabilmeleri için platformlar arası uygulamayı kullanmaya başladı.

Flutter ve React native, kendi değerlerini kanıtlamak için yarışan ve platformlar arası mobil uygulama geliştirmeye ev sahipliği yapan iki ana gelişme framework dür. React Native vs Flutter, 2018 ve 2019’daki en popüler konusudur.

Çeşitli parametrelere dayanarak yapılan Flutter-React yerel performans karşılaştırması ile buradayız. 

İşte hangisinin iyi olduğunu anlamak için hızlı bir karşılaştırma.

DAHA DETAYLI AÇIKLAMA GEREKİRSE

React Native , Facebook tarafından dahili olarak 2015 yılında açık kaynaklı olarak başlatılan bir projedir. Diğer tarafta, Google tarafından I / O 2017’den beri yoğun bir şekilde teşvik ettikleri bir proje olan Flutter . Bu teknolojilerin her ikisi de, uygulama geliştiricilerin tek bir programlama dili kullanarak platformlar arası uygulamaları daha hızlı oluşturmasına yardımcı olur. React Native zaten olgun bir araçtır ve çok büyük bir topluluğa sahiptir, ancak Flutter 2017’den beri çok büyük ilgiyle kabul görmeye başladı. Bu yazıda, her birini belirlenen kriterlere  göre karşılaştıracağız:

• Programlama dili
• Teknik mimarlık
• Kurulum
• Kurulum ve proje yapılandırması
• UI bileşenleri ve geliştirme API’si
• Geliştirici üretkenliği
• Topluluk desteği
• Test desteği
• Otomasyon desteği oluşturun ve bırakın
• DevOps ve CI / CD desteği

Şimdi tüm kriterlerimizi belirlediğimize göre, her birini ayrıntılı olarak araştırmaya başlayalım.

Programlama dili

Bir platformlar arası mobil uygulama geliştirme teknolojisi kullanmanın en önemli yararı, hem iOS hem de Android için uygulamalar geliştirmek için tek bir programlama dilini kullanma yeteneğidir.

React Native – JavaScript

React Native, platformlar arası uygulamalar oluşturmak için JavaScript kullanır. JavaScript şu an web topluluğunda çok popüler bir dildir. Genellikle React ve diğer popüler JavaScript framework birlikte kullanılır. React Native sayesinde web geliştiricileri, biraz eğitimli mobil uygulamalar oluşturabilir. Bunu göz önünde bulundurarak şirketler, React Native’i  kabul gördü. JavaScript dinamik olarak yazılmış bir dildir ve aynı zamanda hem iyi hem de kötü olan JavaScript ile her şey yapılabilir.

Flutter – Dart

Flutter, Google tarafından 2011’de tanıtılan ve programlama geliştiricileri tarafından nadiren kullanılan Dart programlama dilini kullanıyor. Dart sözdizimi, nesneye yönelik kavramların çoğunu desteklediği için JavaScript veya Java geliştiricileri için anlaşılması kolaydır. Resmi Dart sitesinde bulunan harika ve takip etmesi gereken belgeler bulunduğundan Dart ile başlamak kolaydır.

Analiz sonucu

JavaScript çoğu web geliştiricisi tarafından yaygın olarak kullanıldığı için, React Native çerçevesini benimsemek kolaydır. Dart aynı zamanda harika bir özellik setine sahiptir, ancak nadiren kullanılır ve geliştirici topluluğunda az bilinir. Bunu dikkate alarak, React Native’in programlama dili kategorisindeki noktayı kazandığı açıktır.

Teknik Mimari

Bir platformlar arası mobil uygulama geliştirme çerçevesi seçerken, teknik mimarisini dikkate almak önemlidir. Çerçevenin içindekileri tanıyarak, bilinçli bir karar verebilir ve projemiz için daha iyi olanı seçebiliriz.

React Native – Akı

React Native architecture, JavaScript çalışma köprüsü olarak da bilinen JS çalışma ortamı ortam mimarisine büyük ölçüde güveniyor. JavaScript kodu çalışma zamanında yerel koda derlenir. React Native, Facebook’tan Flux mimarisini kullanıyor. Burada React Native’in ana mimarisi hakkında ayrıntılı bir makale var. Kısacası, React Native, yerel modüller ile iletişim kurmak için JavaScript köprüsünü kullanır.

Flutter – Skia

Flutter, bileşenlerin çoğunun yerleşik olduğu Dart çerçevesini kullanır, böylece boyutu daha büyüktür ve genellikle köprünün yerel modüller ile iletişim kurmasını gerektirmez. Dart, içinde mobil uygulamalar geliştirmek için gerekli tüm teknolojileri sağlayan ve içerisine paketlenmiş Malzeme Tasarımı ve Cupertino gibi pek çok çerçeveye sahiptir. Dart çerçevesi, tüm protokolleri, kompozisyonları ve kanalları içeren Skia C ++ motorunu kullanır. Flutter motorunun mimarisi burada Github Wiki’de ayrıntılı olarak açıklanmaktadır. Kısacası, Flutter, Flutter motorunun kendisinde uygulama geliştirme için gereken her şeye sahiptir.

Analiz sonucu

Flutter motoru, framework içindeki yerel bileşenlerin çoğuna sahiptir ve yerel bileşenlerle iletişim kurmak için her zaman bir köprüye ihtiyaç duymaz. Ancak React Native, düşük performansa neden olan yerel modüller ile iletişim kurmak için JavaScript köprüsünü kullanıyor.

Kurulum

Kurulum yöntemi, çok fazla karmaşık adım atmadan basit olmalıdır, böylece yeni başlayan geliştiriciler tarafından kolayca öğrenilebilir.

React Native – NPM

Tepki Yerli çerçevesi, Node Package Manager (NPM) kullanılarak yüklenebilir. JavaScript geçmişi olan geliştiriciler için React Native’in kurulumu kolaydır, diğer geliştiricilerin düğüm paketi yöneticisini öğrenmeleri gerekir. Düğüm paket yöneticisi, paketleri yerel veya global olarak yükleyebilir. Geliştiricilerin, tam olarak ikili konumun neresinde bulunduğunu anlamaları gerekecektir. MacOS’ta React Native’i kurarken , HomeBrew paket yöneticisine de ihtiyacımız var. Kısacası, React Native’ı macOS’a yüklemek için aşağıdaki komutları çalıştırmamız gerekir:

  $ / usr / bin / ruby ​​-e "$ (curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
 $ brew kurulum düğümü

 $ brew bekçi yüklemek

 $ npm kurulum -g tepki-yerel-cli 

Bu komutları çalıştırdıktan sonra, reaksiyon satırından reaksiyon satırına erişebiliriz.

Flutter – Binary Kaynaktan İndir

Flutter, Github’dan belirli bir platform için ikili dosya indirilerek kurulabilir. MacOS durumunda, dosyasını indirip PATH değişkeni olarak eklemeliyiz. Bunu komut satırından yapabiliriz:

  $ curl -O https://storage.googleapis.com/flutter_infra/releases/beta/macos/flutter_macos_v0.7.3-beta.zip

 $ unzip Instagram Hesabındaki Resim ve Videoları flutter_macos_v0.7.3-beta.zip

 ihracat PATH = [PATH_TO_FLUTTER__DIRECTORY] / çarpıntı / kutu: $ PATH

Flutter, Homebrew, MacPorts, YUM, APT, vb. Gibi paket yöneticilerini destekleyerek kurulum yöntemini iyileştirmeli, böylece kullanıcılar kurulum sırasında bu ilave adımları gerçekleştirmeleri gerekmeyecekti.

Analiz sonucu

Hem Flutter hem de React Native, belirli bir işletim sistemi için yerel paket yöneticileriyle tek bağlantılı bir kurulumdan yoksundur, ancak Flutter kurulumu, ikili dosyayı PATH’a eklemek ve onu JavaScript olmayanlar için yararlı olabilecek kaynak koddan indirmek için ek adımlar gerektiriyor gibi görünmektedir. geliştiricileri. React Native, yalnızca paket yöneticileri kullanılarak ve ikili bilgiyi kaynaktan indirme zorunluluğu olmadan kurulabilir.

Kurulum ve Proje Yapılandırması

Geliştiricinin yeni çerçeveyi kullanması için ayarlama işlemi zaman alır. Çok sayıda yazılım yüklemesi yapılandırması gerektirir. Teknoloji, kullanıcıların çalışmaya başlaması için uygun belgelere sahip olmalıdır.

React Native

React Native projesinin başlangıç kılavuzu geliştiricinin zaten iOS ve Android için geliştirme için gerekli tüm kurulumlara sahip olduğunu varsayar. Xcode komut satırı araçları hakkında çok az bilgi var, ancak ilerlemek için yeterli olmayacak. Belgeler doğrudan yeni bir proje oluşturma adımına atlar. Aşağıdaki komutları kullanarak yeni bir React Native projesi oluşturulabilir ve iOS simülatöründe çalıştırılabilir:

  $ reaksiyonu-yerel init MyProject
 $ cd MyProject
 $ reaksiyon-yerli çalışma ios

Tepki Yerli belgesinde Android projeleri için kurulum kılavuzu yoktur.

Flutter

Flutter için başlangıç ​​kılavuzu hem iOS hem de Android için IDE kurulumu ve platform kurulumu hakkında ayrıntılı bilgi içerir. MacOS için Flutter kurulumunda gerekli tüm kurulum ayrıntılarını buradan okuyabilirsiniz. Bunun da ötesinde, Flutter, geliştiricilere kurulum boyunca rehberlik edebilecek flutter doctor adlı bir CLI aracına sahiptir. Yerel makineye hangi araçların takılı olduğunu ve hangi araçların yapılandırılması gerektiğini inceler. Flutter doctor komutu mutlu olduğunda, yeni bir Flutter uygulaması oluşturmaya devam edebiliriz. Flutter ile başlayacak editörlerin nasıl yapılandırılacağı hakkında ayrı bir sayfa var. Tüm ayarlar yapıldıktan sonra, CLI’den yeni bir Flutter uygulaması oluşturup çalıştırabiliriz:

  $ flutter MyProject oluştur
 $ cd MyProject
 $ çarpıntı koşusu

Bu aşamada, Flutter projesinin tüm kurulum ve konfigürasyonuna sahip olmalısınız.

Analiz sonucu

Yukarıdaki karşılaştırmaya göre, Flutter’ın kurulum ve konfigürasyon için daha iyi dokümantasyon ve CLI desteği sağladığı açıktır.

UI Bileşeni ve Geliştirme API’si

Platformlar arası mobil uygulamalar geliştirirken, yerel bileşen için destek anahtarıdır. Yerel bileşen desteği olmadan, uygulamamız yerel bir uygulama gibi hissetmez. Çerçevenin yerel modüllere herhangi bir acı çekmeden erişebilmesi için bir API’nin olması çok önemlidir.

Yerli Tepki – Daha Az Bileşen

Temel React Native çerçevesi yalnızca kullanıcı arayüzü oluşturma ve cihaz erişim API’leri sağlar. Yerel modüllerin çoğuna erişmek için, React Native üçüncü taraf kütüphanelerine güvenmek zorundadır. Tepki Yerli üçüncü taraf kütüphanelere çok fazla bağlıdır. Geliştirme bileşenlerinin tam listesi ve resmi API’ler burada bulunabilir.

Flutter – Bileşenler açısından zengin

Flutter framework, kullanıcı arayüzü oluşturma bileşenleri, cihaz API erişimi, navigasyon, test etme, durum bilgisi yönetimi ve çok sayıda kütüphane ile birlikte gelir. Bu zengin bileşen kümesi, üçüncü taraf kitaplıklarını kullanma gereksinimini ortadan kaldırır. Flutter çerçevesini alırsanız, mobil uygulamalar geliştirmek için gereken her şeye sahip olacağınız anlamına gelir. Flutter ayrıca, geliştiricilerin hem kullanıcı arayüzü hem de iOS platformunda kolayca kullanıcı arayüzü oluşturmasını sağlayan Material Design ve Cupertino için widget’lara sahip.

Analiz sonucu

Flutter, geliştirme API’leri ve UI bileşenleri bakımından zengindir, React Native ise üçüncü taraf kütüphanelere çok bağımlıdır.

Geliştirici Verimliliği

Geliştirici üretkenliği, uygulamaları daha hızlı oluşturmanın anahtarıdır. Bu bağlamda, herhangi bir bekleme veya dikkat dağıtıcı olmadan uygulama geliştirmeye odaklanabilmek çok önemlidir.

React Native

Geliştirici JavaScript konusunda uzmansa, bu becerileri platformlar arası uygulama geliştirme için kullanmak oldukça kolaydır. React Native, kullanıcı arayüzündeki değişiklikleri test ederken geliştiriciden çok zaman kazandıran sıcak bir yeniden yükleme özelliğine sahiptir. IDE desteği açısından, geliştiriciler istedikleri herhangi bir metin editörünü veya IDE’yi kullanmakta serbesttirler.

Flutter

Flutter ayrıca sıcak bir yeniden yükleme özelliğine sahiptir ve demo uygulamasına başlamak çok kolaydır. Ancak, uygulamaların karmaşıklığı arttıkça, geliştiricilerin yeni Flutter konseptlerini öğrenmeleri ve benimsemeleri gerekir. Ayrıca, Dart ortak bir programlama dili değildir ve birçok IDE’de ve metin editöründe bunun için destek eksikliği vardır.

Analiz sonucu

Olgun bir çerçeve olan React Native, IDE’ler ve dil özellikleri bakımından büyük geliştirici desteğine sahiptir. Flutter bu noktada oldukça yenidir ancak Flutter’ın çevresindeki topluluk büyüdükçe çok yakında yetişecektir.

Topluluk Desteği

Geliştiriciler bir teknolojiye ilgi göstermeye başladığında ve onu geliştirme sürecinde benimsediklerinde, bilgileri paylaşmak için bir topluluk oluştururlar. Güçlü bir topluluk, geliştiricilerin birbirlerinden öğrenmelerine ve karşılaştıkları sorunları çözmelerine yardımcı olur.

React Native

Tepki Yerli 2015 yılında başlatılan ve o zamandan beri popülerlik kazanmıştır. GitHub’da React Native geliştiricileri topluluğu ve dünya çapında birçok buluşma ve konferans var. Tepki Yerli Tepki konusundaki en son konferanslardan biri, Polonya’da düzenlenen Tepki Yerli AB tepkisi idi, ancak dünyanın hemen hemen her büyük şehrinde gerçekleşen buluşmalar var.

Flutter

Flutter bir süredir etrafta olmuştur ancak Google 2017’de Google I / O konferansında tanıtımını yaptığında çok dikkat çekti. Flutter topluluğu bugünlerde hızla büyüyor, toplantılar ve konferanslar çevrimiçi oluyor. Gelecek en büyük etkinlik Aralık ayında Flutter Live olacak. Kısacası, Flutter topluluğu hızla büyüyor; Ancak, geliştiricilerin ortak sorunları çözmesi için hala yeterli kaynak yoktur.

Analiz sonucu

Tepki Yerli toplum ve kaynaklar, çerçevenin başlatılmasından bu yana büyüklük kazanmıştır. Topluluk desteği hızla artmasına rağmen, Flutter hala oldukça yeni.

Test Desteği

Testler yazmak, kod hakkında hızlı geri bildirim almak için harika bir yoldur. Geliştiricilerin uygulamalar için birim, entegrasyon ve UI testleri oluşturmalarını sağlamak için her zaman olgun teknolojiyle ilgili bir test çerçevesi vardır.

React Native

React Native bir JavaScript çerçevesidir ve JavaScript’te kullanılabilen birkaç birim düzeyinde test çerçevesi vardır. Jest gibi araçlar anlık görüntü testi için kullanılabilir. Bununla birlikte, entegrasyon veya UI seviyesi testi söz konusu olduğunda, React Native’den resmi bir destek yoktur. React Native uygulamalarını test etmek için kullanılabilecek Appium ve Detox gibi üçüncü taraf araçlar var ancak resmi olarak desteklenmiyorlar.

Flutter

Flutter, uygulamaları ünite, widget ve entegrasyon düzeyinde test etmek için zengin bir test özellikleri kümesi sunar. Flutter uygulamalarını test etme konusunda harika belgelere sahiptir; Flutter uygulamalarının nasıl test edilebileceği hakkında ayrıntılı bilgi için Flutter uygulamalarını test etme üzerine Nevercode blogunu da okuyabilirsiniz. Flutter, kullanıcı arayüzünü test etmek ve birim testleri hızında çalıştırmak için widget testleri oluşturabileceğimiz harika bir widget test özelliğine sahiptir.

Analiz sonucu

React Native topluluğunun entegrasyon ve UI seviye testi için resmi bir desteği yoktur, Flutter mükemmel bir belgeye ve zengin bir test özelliklerine sahiptir.

Yap & Bırak Otomasyon Desteği

Mobil uygulamaları App Store’a veya Play Store’a bırakmak acı verici bir işlemdir. Diğer tüm uygulama kurulumlarını imzalamanın karmaşık kod görevini içerir. Çapraz platform mobil uygulama geliştirme söz konusu olduğunda, daha da zorlaşıyor.

React Native

React Native resmi belgelerinde, iOS uygulamalarını App Store’a dağıtmak için otomatik bir adım yoktur. Ancak, uygulamayı Xcode’dan dağıtmak için manuel bir işlem sağlar. Burada React Native uygulamalarını App Store’a nasıl dağıtacağınıza dair bir makale var, ancak tüm süreç el ile görünüyor. Ancak, iOS ve React Native ile yazılmış Android uygulamalarını dağıtmak için fastlane gibi üçüncü taraf araçlarını kullanabiliriz. React Native uygulamalarını göndermek için fastlane kullanma süreci bu makalede anlatılmaktadır. Bu, React Native’in otomasyon oluşturmak ve serbest bırakmak için üçüncü taraf kütüphanelere güvenmek zorunda olduğu anlamına gelir.

Flutter

Flutter güçlü bir komut satırı arayüzüne sahiptir. Komut satırı araçlarını kullanarak ve Android ve iOS uygulamaları oluşturmak ve yayınlamak için Flutter belgelerinde verilen talimatları izleyerek uygulamanın bir ikili dosyasını oluşturabiliriz. Buna ek olarak, Flutter resmi olarak fastlane ile dağıtım işlemini belgelemiştir.

Analiz sonucu

Flutter harika bir derleme otomasyonuna sahiptir ve uygulamaları komut satırından dağıtmak için kullanılabilir. React Yerel uygulamaların, kurulum otomasyonu için resmi olarak desteklenen CLI araçları için destek olmaması.

DevOps ve CI / CD Desteği

Sürekli Entegrasyon ve Sürekli Teslimat uygulamaları, sürekli geri bildirim almak ve buggy kodunu serbest bırakmaktan kaçınmak için herhangi bir uygulama için çok önemlidir.

React Native

React Native, CI / CD kurulumu hakkında resmi bir belgeye sahip değildir. Ancak, React Native uygulamaları için CI / CD’yi tanımlayan bazı makaleler var. 

Flutter

Flutter, Sürekli Entegrasyon ve Test üzerine harici kaynaklara bağlantılar içeren bir bölüme sahiptir. Ancak, Flutter’in zengin komut satırı arayüzü CI / CD’yi kolayca ayarlamamızı sağlar. Nevercode, Flutter uygulamaları için CI / CD desteği sunmaktadır. 

Analiz sonucu

Flutter uygulamaları, güçlü CLI araçlarını kullanarak CI / CD servislerine kurmak için kolay ve acısızdır. React Native, CI / CD uygulamaları için resmi bir talimat vermez.

Gerçekten çok yakındı, ancak Flutter bu yarışmanın galibi. Tepki Yerli sonuna kadar savaştı ama Flutter bugünün yarışında şampiyon!

Sonuç

React Native ve Flutter’in avantajları ve dezavantajları var, ancak Flutter bu maçta kazanan olarak ortaya çıktı. Endüstri uzmanlarından bazıları, Flutter’in mobil uygulama geliştirmenin geleceği olduğunu tahmin ediyor. Yukarıdaki karşılaştırmaya bakıldığında, Flutter’ın platformlar arası mobil geliştirme yarışına çok güçlü bir şekilde girdiği açıktır. Geleceği tahmin etmeyelim ama bekliyelim ve görelim.

Son olarak bu tablo Stack Overflow üzerinde etkilişim grafiğini göstermektedir.