Cross Platform Mobil Geliştirme: React Native VS Flutter

Mobile Developer Yol Haritası: Android Platformu ve iOS Developer Yol Haritası: iOS Dünyası isimli yazılarımızda iOS ve Android platformları için uygulama geliştirme imkanı sunan dillerden ve IDE’lerden bahsettik. Bu programlama dilleri ve IDE’ler vasıtasıyla, sadece yazıldığı platform için çalışabilecek uygulamalar oluşturulabileceğini gördük. Yani siz Xcode IDE’si vasıtasıyla Swift dilinde uygulama geliştirdiğinizde, bu uygulama iOS platformunda çalışabilir. Peki bir çatı altında kodları web tabanlı olarak yazsak ve bu çatı, yazılan kodları iOS ve Android platformlarının her ikisi için de kullanılabilir hale getirse nasıl olurdu? Tabii ki bu çok kullanışlı, zaman ve kaynak tasarrufu sağlayan çok yenilikçi bir atılım olurdu. İşte “Cross Platform Mobil Geliştirme” konusunu farklı bir boyuta taşıyan React Native ve Flutter tam olarak bu saydıklarımızı ve daha fazlasını sağlayan birer framework olarak ortaya çıktı.

Cross Platform Mobil Geliştirme: React Native Nedir?

cross platform mobile development

React Native, iOS ve Android platformları için web tabanlı olarak mobil uygulama geliştirme imkanı sunan bir Javascript framework’üdür. Facebook’un kullanıcı arayüzü oluşturmak için temel aldığı React kütüphanesini kullanırken tarayıcılar yerine mobil uygulamaları odağına alır.

Web geliştirme tarafında React kütüphanesinde olduğu gibi, React Native uygulamaları da “JSX” olarak bilinen Javascript ve XML karışımı bir söz dizimi ile yazılır. Arka tarafta ise React Native bir köprü vazifesi görerek iOS için Objective-C, Android için Java kodlarına çevrilir. Bu köprü vazifesi sayesinde, siz kodlarınızı web tabanlı olarak yazsanız dahi çıktı olarak gerçek bir mobil arayüzü elde etmiş olacaksınız. Aynı zamanda ilgili platformalara ait API’ları da kullanarak sizlerin telefonun kamerası, konumu gibi özelliklerine erişiminizi de sağlar.

React Native, <div> etiketi yerine Android ve iOS arayüzü tarafına dönüşecek <View> etiketini; <img> yerine <Image> etiketini ve <span> yerine de <Text> etiketini kullanarak platforma özgü kullanıcı arayüzü oluşturmanızı sağlar. Örneğin siz bir iOS uygulaması geliştiriyorsanız, React Native  <Text> etiketini sizin için UIView’e çevirecektir.

Cross Platform Mobil Geliştirme: Flutter Nedir?

Flutter, kendi resmi sitesinde “Google tarafından geliştirilen, tek bir kod tabanından web, masaüstü ve mobil için güzel ve yerel olarak derlenebilen uygulamalar geliştirmeyi sağlayan bir kullanıcı arayüzü” olarak tanımlanır. Öne çıkan özellikleri ise yine aynı sitede şöyle listelenir:

  • Hızlı geliştirme imkanı
  • Etkileyici ve esnek kullanıcı ara yüzü
  • Yerel performans

Yani Flutter tek bir kod yazarak sizin hem Android hem de iOS için native(yerel) olarak uygulama geliştirmenizi sağlayan bir framework olarak tanımlanabilir. Flutter için iki önemli bileşenden oluşur diyebiliriz:

  • SDK(Software Development Kit): Dilimize “Yazılım Geliştirme Kiti” olarak geçen SDK, uygulamanızı geliştirmek için kodlarınızı yazacağınız ve bunları makine diline çeviren derleyicilerin olduğu ortamdır.
  • Framework: Kullanıcı ara yüzü oluşturmanızı sağlayan buton, text girişi, slider vb. nesneleri içeren ve kendinize özgü ihtiyaçlara göre şekillendirebileceğiniz araçları içeren bir çatıdır.

Flutter’ın öne çıkan özelliklerinden birisi de kullanıcılarına birçok widget (ekran aracı) sunması. Yani en baştan kodlama yapmanıza gerek kalmadan kullanıcı arayüzü olarak hazır widget kullanabilirsiniz.

Peki Flutter ile geliştirme yaparken kodlarınızı hangi dil ile yazacaksınız?

Dart Nedir?

cross platform fluuter dart

Dart, 2011 yılında yine Google tarafından tasarlanan ve Javascripte alternatif olarak düşünülmüş nesne tabanlı bir programlama dilidir. Tabiki arkasında çok büyük bir destekçi kitlesi barındıran Javascript ile yarışması şuan düşünülemez.

Dart, kullanıcı taraflı bir dildir. Yani sunucularda herhangi bir işlem yapmaz. Platform bağımsız olarak çalışabilir. Aynı zamanda açık kaynak kodludur. En önemli özelliği “asenkron” bir programlama dili olmasıdır. Yani aynı anda birden çok işlem yaparak kullanıcı arayüzünün donmasını engeller. İşlemlerden birisi bittiğinde ise kullanıcı ara yüzü otomatik olarak yenilenir. Ayrıca “hot reload” özelliği sayesinde kodda yaptığınız bir değişiklik anında arayüzde kendisini gösterir.

 Flutter ve React Native’den Önce

Flutter ve React Native tabii ki bir kez kodla her yerde kullan anlayışını benimseyen ilk framework’ler değil. Öncesinde 2013 yılında tanıtılan “Ionic” bu anlayışın önemli bir temsilcisiydi. Ionic de yine Javascript kullanan, web tabanlı geliştirme yapan bir framework olarak karşımıza çıkmıştı. Peki o zaman React Native ve Flutter neden ortaya çıktı?

Ionic kullanıldığında, web sitesi ile uygulamanın haberleşmesi için gereken ekstra katman performans sorunu oluşturuyordu. React Native ve Flutter ile birlikte performans anlamında iyileşme sağlanması bu iki framework’ün öne çıkmasını sağladı. Örneğin React Native framework’ünde buton, metin ve resim gibi ara yüz bileşenlerinin tümü native kod kullandığı için performans olarak Ionic’ten daha verimli oluyor.  

Flutter Vs React Native

  • Her iki platform da web tabanlı geliştirmeye imkan sağlıyor. Web geliştirme ile uğraşan insanlar ise genellikle Javascript diline hakimdir. Bu durum kodları Javascript ile yazılan React Native’i, Dart gibi yeni bir dil öğrenmeyi zorunlu kılan Flutter’a karşı bir adım öne çıkarıyor.  
  • Flutter tarafından sağlanan kullanıcı arayüzleri widgetlar vasıtasıyla daha renkli ve zengindir.
  • React Native’in piyasaya daha erken sürülmüş olması onun arkasında daha güçlü bir kullanıcı desteği oluşmasını sağlamış durumda.

Sonuç olarak iOS ve Android platformlarına ayrı ayrı uygulama geliştirme zahmetinden kurtulmak büyük bir kaynak tasarrufu sağlayan bir durumdur. Bu yüzden her iki framework, piyasaya çıkışıyla beraber büyük bir ilgi görerek mobil geliştiricilerin hayatını kolaylaştıran teknolojiler olarak öne çıktı.

Teknoloji'den geri kalmamak için e-posta listemize abone olun!

30'undan sonra Yazılım Mühendisliği öğrencisi...