Flutter vs React Native

Kısaca Flutter

Flutter, Google tarafından oluşturulan açık kaynak kodlu UI geliştirme kitidir. Yapısı object-oriented’ a dayanmakla birlikte Flutter’da işlenen her şey class’lar ve bu class’ların aldığı property’ler ve property’lerin bağlandığı widget’lar üzerinden ilerlemektedir. Class, property ve widget kavramlarına ilerleyen yazılarımızda ayrıntılı olarak değineceğiz. Ancak genel bir fikir oluşması adına bu terimleri kısaca inceleyelim.

• Class: Kodların daha sistematik bir düzende ilerlemesi için kullanılan fonksiyondur. Bu fonksiyon kullanıcı tarafından verilen parametreleri belirlenen kurallar dahilinde işleyip dönüştürmeyi sağlar.

Örneğin;

class Ogrenci {
  String? ad;
  String? soyad;
  int? sinif;
}

Yukarıda verilmiş olan örnekte karakterlerden oluşan ad ve soyad ile tamsayıdan oluşan bir sınıf değeri alarak değişkenlerin tiplerine göre bir sınıf oluşturulmuştur.

• Property: Belirlediğimiz sınıfın içinde tanımladığımız özelliklerdir.

class Ogrenci {
  String? ad; // property 1
  String? soyad; // property 2
  int? sinif; // property 3
}

• Widget: Uygulamayı kullanan kullanıcının gerçekleştirmek istediği işlevleri kullanmasını sağlayan bileşenlere widget diyoruz. Widget daha önceden Android Studio ile uygulama geliştirdiyseniz karşımıza component olarak çıkmış bir terimdir. Sürükle-bırak, text ve list box’lar widgetlara örnek olarak verilebilir. Ancak Flutter’ı kullanmaya başladıkça %99’unun widget’lardan oluştuğunu daha net görebileceksiniz.

Bu terimleri inceledikten sonra Flutter ile ilgili bilmemiz gereken en temel bilgilerden biri de eğer Flutter ile bir mobil uygulama geliştirmek istiyorsak Dart programlama dilini öğrenerek işe başlamaktır. İlerleyen yazılarımızda Flutter’ı keşfetmeye Dart programlama dilini öğrenerek başlayacağız.

Kısaca React Native

Bu noktada React Native’ e geçiş yapmadan önce React kütüphanesine değinerek geçiş yapmak sağlıklı olacaktır :) Bunun sebebi React Native’ in uygulamalar ve web siteleri oluşturmak için kullanan platformlar arası mobil çerçeve olarak React’ ı kullanmasıdır. Bu çerçeve hem ön yüzü hem de tarayıcıyı destekleyen bir JavaScript kitaplığıdır. Aynı zamanda React’ ın React Native uygulama geliştirmek için kullanılan bir önyüz kütüphanesi olduğunu söyleyerek React Native’ e geçiş yapabiliriz. React Native Facebook tarafından oluşturulan, açık kaynak kodlu Javascript temelli bir framework’ tür. React Native de Flutter gibi object-oriented yapısına dayanmaktadır. Burada props’lar ve state’ler vasıtasıyla veri ve fonksiyonların iletiminin sağlandığı component’lerin kullanıldığı bir yapıdan bahsedebiliriz. Gelin kısaca component, props ve state kavramlarını inceleyerek tanımı pekiştirelim.

• Component: Flutter’daki widget’a eşdeğer bir terim olarak karşımıza çıkmaktadır. Sistem tarafından daha önceki kullanıcıların yazdığı ya da hâlihazırda tanımlanmış ve geliştiricinin kullanımına hazır temel bileşenlerdir.

const MyComponent = () => {
  return <SafeAreaView>I am a simple component!</SafeAreaView>;
};

• Props: Componentlere verdiğimiz input değerleri ile görünümü (çıktıyı) özelleştirmemizi sağlayan yapıdır.

<MyComponent motherName="Julia" fatherName="Robert" />

• State: Uygulamada kullanılan değişkenlerin dinamik olması halinde bu değişkenleri içeren ve bunların default değerlerini component her çağırıldığında oluşturan bileşendir.

const [myState, setMyState] = useState();

React Native de Flutter gibi cross platform (Android ve IOS) olarak çalışmakta ve hot reload özelliği sayesinde kodda yaptığınız değişimleri anlık olarak tasarladığınız ekranda da görüntüleyebilirsiniz.

Dart programlama diline geçmeden önce React, React Native ve Flutter ile yazdığımız bir sayaç uygulaması üzerinden kod yazımındaki farklılıkları görelim.

React ile Sayaç Uygulaması

import { useState } from 'react';

export default Counter = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p> Count: {count} </p>
      <button onClick={() => {
        setCount(count + 1);
      }}>UP</button>
      <button onClick={() => {
        setCount(count - 1);
      }}>DOWN</button>
    </div>
  );
}

• Playcode üzerinden sayaç uygulamamızı veya farklı bir React kodunu online yazabilir ve görüntüleyebilirsiniz.

React Native ile Sayaç Uygulaması

import { useState } from 'react';
import { SafeAreaView, View, Text, Button } from 'react-native';

export default Counter = () => {
  const [count, setCount] = useState(0);

  return (
    <SafeAreaView>
      <View>
        <Text> Count: {count} </Text>
        <Button title="UP" onPress={() => {
          setCount(count + 1);
        }} />
        <Button title="DOWN" onPress={() => {
          setCount(count - 1);
        }} />
      </View>
    </SafeAreaView>
  );
}

• Snack.Expo üzerinden sayaç uygulamamızı veya farklı bir React Native kodunu online yazabilir ve görüntüleyebilirsiniz.

React ve React Native’i bu sayaç uygulamamız üzerinden karşılaştırdığımızda birbirlerine oldukça benzer fakat bazı küçük farklılıklar olduğunu görüyoruz. Bu farklılık web ve mobil geliştirmeler arasındaki farklılıktan kaynaklı. Fonksiyon tanımları, state, prop vb. kullanımlarında değişiklik gözlemlemezken, kullanıcı arayüzünü oluşturan kısımlarda gözlemliyoruz. React ile web arayüzü oluşturduğumuz için, HTML ve JavaScript’i bir arada barındıran JSX syntax’ını kullanırken; React Native ile mobil arayüz oluşturduğumuz için, React Native’in kendi kütüphanesinde bulunan componentleri kullanıyoruz. HTML elementleri ve React Native componentlerinin farklı olması nedeniyle, attribute/prop kullanımlarında da değişiklikler görülüyor.

Flutter ile Sayaç Uygulaması

class Counter extends StatefulWidget {
  Counter({Key? key}) : super(key: key);

  @override
  State<Counter> createState() => _CounterState();
}

class _CounterState extends State<Counter> {
  int count = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(children: [
        Text(count.toString()),
        ElevatedButton(
            onPressed: () {
              setState(() {
                count += 1;
              });
            },
            child: Text("UP")),
        ElevatedButton(
            onPressed: () {
              setState(() {
                count -= 1;
              });
            },
            child: Text("DOWN")),
      ]),
    );
  }
}

• Flutlab üzerinden sayaç uygulamamızı veya farklı bir Flutter kodunu online yazabilir ve görüntüleyebilirsiniz.

Bu makalemizde genel hatlarıyla React Native ve Flutter teknolojilerinin karşılaştırmasını yaptık. Bir sonraki makalemizde Dart programlama dilini öğrenmeye başlayacağız…😊