React Native vs Flutter! Hangisi?seçmeli?

by erelcolak · Published 30 Ocak 2020 · Updated 30 Ocak 2020

Cross-Platform uygulama geliştirmek için kullanılan React Native ve Flutter arasındaki farklar, benzerlikler, hangisini seçmeliyim? React Native mi daha iyi yoksa Flutter mı? Projede React Native mi yoksa Flutter mi kullanmalıyım? Bu yazıda bu sorulara cevap bulmanız dileklerimle.

Flutter Hakkında

Cross-platform uygulama geliştirmeye olanak sağlayan, native çıktı verebilen (iOS, Android) bir yazılım geliştirme aracıdır. Google tarafından geliştirilmiş olup sektörde popülerliğini gitgide artırmaktadır. Ücretsiz ve open source olan Flutter; Google’nin 2018’de Q1’de tanıtıldı. Dart programlama dilini kullanmaktadır. Widget’lar ile birlikte native’ye çok yakın bileşenlerle iOS ve Android uygulamaları oluşturmamıza olanak sağlar. State yönetimi ile birlikte uygulama verilerini rahatlıkla kontrol edebilirsiniz.

Flutter ile Geliştirilen Popüler Uygulamalar

Google Ads, Xianyu (Alibaba), Hamilton, FlyDirekt vs.

Flutter’deki Yapılar ve Kavramlar

Object-Oriented bir yazım şekli bulunan Flutter’da her şey bir class olarak bizlere sunulmaktadır. Bu class’lar belirli property’ler alır ve bu property’ler de widget’lere bağlanır. Örneğin AppBar adında bir class’ın title adında bir property’si mevcuttur. title adındaki bu property’de Text adında bir widget’e bağlanarak uygulamanın başlık bölümünü oluşturabilirsiniz. AppBar, Container, Column, Row, Image, Text, Button gibi yüzlerce widget bulunmaktadır.

React Native Hakkında

Cross-platform uygulama geliştirmeye imkan sağlayan ve yine Flutter gibi native çıktı verebilen (iOS, Android) JavaScript tabanlı bir framework’tur. Facebook tarafından geliştirilmiştir ve 2013 Q3’ten beri sektörde popülerliğini korumaktadır. Yine Flutter gibi ücretsiz ve open source’dir.JavaScript ve JSX şeklinde yazımı mevcuttur. Component’ler ve state yönetimi ile birlikte iOS ve Android uygulamaları tek bir code-base ile yazabilirsiniz.

React Native ile Geliştirilen Popüler uygulamalar

Instagram, Facebook, Facebook Ads Manager, Uber, Walmart, Discord, Delivery, Salesforce, Pinterest, Skype, Bloomberg, Wix

React Native’deki Yapılar ve Kavramlar

React-native’de React’taki gibi component’ler aracılığı ile state-based bir yazım şekli mevcuttur. Her şeyin component olduğu (Flutter’daki widget ile aynı amaca hizmet etmektedir) bir yapıda props’lar ve state’ler aracılığı ile veri ve fonksiyon iletimi sağlanıyor. Örneğin View component’i HTML’deki Div etiketi gibi düşünülebilir. View içerisine Text adında React-Native’nin bizlere sunduğu component’i oluşturup etiket içerisine direk olarak dönmek istediğiniz değerleri girerek dilediğimizi elde edebiliyoruz. Hazır stil kütüphaneleri mevcut olduğu gibi; Flexbox ile CSS desteği sunmaktadır bizlere.

Süreçler ve Geliştirme Hakkında

Dökümantasyon

React Native

Dökümantasyonu senaryo bazlı ilerleyen React Native kurulum aşaması sonrasında bir çok konuda kullanıcıyı tümden gelim metodu ile yaratıcılığa yönlendiriyor ve deneyerek öğrenmesine vesile oluyor. Temel bazlı bir çok şeyin detaylı açıklandığı dökümantasyonda örneklendirmelerin ve preview app’ler sayesinde görsel açıdan da yazılan kodu öngörmenizi sağlıyor.

Flutter

Her şeyin detaylı bir açıklamasının yer aldığı Flutter’in dökümantasyonunda kullanıcıya her türlü bilgiyi en ince ayrıntısına kadar veriyor ve tüme varım metodu ile kullanıcıya yön veriyor. Örneklendirmelerin görselleştirilmesinin az olması ile bir çok fonksiyonun ne işe yaradığını temsil verilen kodlarla öngörmeniz gerekebiliyor. Ancak çok detaylı bir dökümantasyona sahip her aşamada size yardımcı oluyor.

Programlama Dilleri

iOS ve Android platformlara tek bir dil kullanarak WebView üzerinden uygulama geliştirmek React Native ve Flutter ile mümkün. Java ve Objective C dilleri ile native uygulamalar geliştirilirken; JavaScript ve Dart dillerini kullanarak native’e neredeyse çok yakın uygulamalar geliştirmek mümkün kılınmıştır React-Native ve Flutter ile.

React Native

React Native yazabilmek için bilinmesi gereken dil JavaScript’tir. Web development açısından en popüler dil olan JavaScript’i kullanan React-Native hem front-end developer’lerin hem de back-end developer’lerin günümüzde olmazsa olmaz ortak kullanım dilidir.

Flutter

Flutter yazabilmek için bilinmesi gereken dil ise Dart’tır. Object-oriented programming’e hakim herkesin rahatlıkla kavrayabileceği Dart yeni çıkmış bir dil olmasına rağmen popülerliği giderek artmaktadır.

Geliştirme

React Native

React’a aşina olanların herhangi bir yabancılık çekmeyeceği React Native özellikle olay kurgusu, state yapılandırması ve uygulama açısından React’tan bir farkı bulunmamakta denilebilir. Node JS, npm, yarn ve JavaScript ES6’ya hakim olan herkesin rahatlıkla geliştirme yapabileceği bir yapıya sahiptir. React Native component’lerden oluşmakta ve bu componentler tam olarak native odaklı çalışmakta.iOS ve Android’in native bir çok API’sini de (konum, kamera, geri butonu, titreşim, NFC, pil durumu, ekran parlaklığı vs…) içerisinde barındırıyor. Bunlar sayesinde bir çok farklı türde uygulamalar hazırlanabilmekte ve örneğin telefon şarjı %10’un altında ise gönderilen sorguların sayısını azalt gibi reaksiyon almak mümkün olmaktadır. CSS aşinalığı olan herhangi birisi stillendirme ile ilgili zorluk çekmeyecektir StyleSheet adlı React Native metodu sayesinde javascript içerisinde CSS yazılabilmektedir. Üstelik Flexbox sayesinde ekran üzerinde ilgili elementlerin yerleşimi kolaylıkla sağlanabilmektedir. State yönetimi ise tıpkı React’ta olduğu gibi Redux, Context API gibi yapılarla sağlanabilmektedir.

Flutter

Daha önce front-end development yapmış bir kişi açısından Dart dilini kullanmak ilk başlarda zor olsa da alışmakta zorlanılmamaktadır. Yazması okumasından daha kolay olan tek framework gibi görünen Flutter içerisinde kendi widget’lerini barındırıyor, kendi event’lerini barındırıyor, kendi stil yazma metodlarını barındırıyor. Yazımı gerçekten çok hızlı ancak; metodlar çok fazla ve bunların kullanımı ezber gerektirmektedir. Özellikle stillendirmelerin ezber gerektiren metodlarla yapılması elementlerin yerleşimlerini yapabilmek adına işi zorlaştırsa da CSS ile yapılabilecek her şeyi yapabildiğinizi bilmekte fayda var. iOS ve Android’in native bir çok API’sini de içerisinde barındırmaktadır. Yine React Native’de olduğu gibi bu API’lere erişim söz konusu. Özellikle Android ve iOS arayüzlerinin Material ve Cupertion tema şeklinde sunulması büyük kolaylık sağlamakta bu karışıklığı gidermek adına. State yönetimi ise React’a benzer şekilde bir yapıyla sağlanmakta. Yine tüm uygulamayı saran bir yapı ile diğer tüm bileşenlere state iletilmektedir.

Kurulum ve Ayarlar

React Native

Kurulum için Android Studio veya XCode platformlarının kurulmasıyla başlıyor serüven. Sonrasında ortam değişkenlerini ayarlayıp projeye CLI yardımıyla geçebiliyoruz. Dökümantasyonda Expo ve CLI ile yüklemeyi platform bazında bizlere sunuyor.

Flutter

Kurulum için Android Studio veya XCode platformlarının kurulmasıyla başlıyor. Ek olarak Flutter’ın kurulumu sağlanıyor ve ortam değişkenlerini ayarlayıp projeye CLI yardımıyla Flutter doctor adındaki kurulum sihirbazının bizlere feedback vermesini bekliyoruz. Bu sihirbaz ile birlikte nelere ihtiyaç duyabileceğimizi/eksik olduğunu görüntüleyebiliyoruz.

UI Bileşenler

React Native

React Native’de UI bileşenleri (component) sınırlı sayıda lakin; çok fazla ihtiyaca göre şekillendirilmiş 3rd party plugin’ler mevcut. Örneğin slider yapmanız gerekiyor diyelim. React Native’in kendi içerisinde bunu yapabileceğiniz bir component yok lakin; dilediğiniz şekilde yapılmış olan slide plugin’lerini projeye dahil edebiliyorsunuz. Temelde View, Text, Image gibi basit yapılarla genel arayüzün tasarlanması gerekiyor. Her component kendi içinde rahatlıkla CSS Flexbox teknolojisi kullanılarak stillendirilebiliyor.

Flutter

3rd party pluginler yerine Flutter kendi içerisinde zengin bir widget yapısı barındırıyor. Her widget’in çok fazla alışılagelmişin dışında ayarı var. Detaylı dökümante edilmiş olması artı gibi görünse de; bir zaman sonra ezber yapmanız gerektiğini gösteriyor. Örneğin metin hizalamak için CSS’ten alışageldiğimiz text-align yerine crossAxisAlignment gibi ifadeler söz konusu.

Destek ve Topluluklar

React Native

Uzun yıllardır hayatımızda olan React Native’nin stackoverflow gibi topluluklarda çok fazla desteği mevcut. Yaşanılacak olan herhangi bir hata/sorun ya da yapılacak olan bir geliştirmeyle ilgili geri dönüt sayısı çok fazla.

Flutter

Sektörde yeni olması nedeniyle çok fazla desteği bulunmayan Flutter’ın yaşanılacak herhangi bir hata/sorun karşısında ne gibi bir durumda kalınacağı bilinmiyor. Ancak gitgide artan popülerliği önümüzdeki yıllarda durumları değiştirebilir. Çok uç noktalarda sorun çıktığında çözüm konusunda zorlayabilir.

React Native ve Flutter’ın Avantajlar ve Dezavantajlar

React Native avantaj ve dezavantajları

Avantajlar

En yaygın dillerden birisi olan JavaScript ile yazılması

CSS Flexbox ile desteklenmesi

Yazım ve okunabilirlik kolaylığı

Destek ve toplulukların fazla olması, olası bir sorunda sorunun kolayca çözülmesi

Yaygın 3rd parti component

React developer’ları için kolay adaptasyon

Dezavantajlar

Component sayısı nedeniyle bazı HTML yapıların uyarlanması (Tablo, liste gibi)

Çıkan her paketin işletim sistemi güncellemesi sonrası güncellenmiyor olması

iOS ve Android’te sürüme göre bazen ek geliştirme yapılması (Çentikli ekran)

Flutter avantajları ve dezavantajları

Avantajlar

Çok zengin dökümantasyon

Kendi içinde bulunan Skia Graphic ile daha hızlı ve 120 FPS’de uygulamalar

Material ve Cupertino tasarıma sahip hazır widget’ler ile çok hızlı hazır tasarım kalıpları

iOS ve Android’te sürüm farkı olmaksızın neredeyse aynı görüntüyü elde edebilme seçeneği

Yazımı kolay ve hızlı

Makina dilinde derlendiğinden ötürü hızlı olması

Dezavantajlar

Yeni bir dil için adaptasyon (Dart)

Yazılan kodun devamlı iç içe yazıldığı için hiyerarşiyi kaybederek oluşan okuma zorluğu

Destek ve toplulukların az olması, olası bir sorunda sorunun çözülememe ihtimali

İhtiyaç anında hali hazırda olmayan widget’lerin bulunma ihtimali

Yaygınlığın az olması

Continuous Integration desteğinin henüz oturmamış olması olması

Google’ın platform desteğini her an çekebilme ihtimali

Minimum APK boyutunun fazla olması

Sonuç

Daha önce hiç mobil bir uygulama yazmayan bir Front-end developer olarak Flutter’ın önünün çok açık olduğunu söyleyebilirim. React Native karşısında git gide popüler hale geliyor. Yeni bir şeyler denemek ve de bunu güncel teknolojilerle yapmak istiyorsanız ve biraz risk alırım ben diyorsanız Flutter’i deneyebilirsiniz. Ama eğer ki JavaScript ve React’a çok aşinaysanız ve de farklı bir şeyler denemeye vaktiniz yoksa React Native ile girişebilirsiniz işe diyebilirim.