Kaynak: www.raywenderlich.com

Android ve iOS için native kod yazan arkadaşlar bilirler. Yazdıkları uygulama için şirket tarafından bir güncelleme istendiğinde hem iOS hem de Android ekibi meşgul edilir. Peki ya native UI sunan, web tabanlı bir geliştirme ortamı sağlayan bir çatı olsa ve bu çatı kullanılarak tek bir codebase üzerinden hem Android hem de iOS için yazılım geliştirilse nasıl olurdu?

Facebook, React Native ile bu durumu mümkün kıldı. React kod yazarak web uygulaması geliştiren yazılımcıların aynı zamanda mobil platformlar için de kod yazabilmesini sağladı. Bu sayede artık geliştiriciler zaten bildikleri React çatısını kolayca Android ve iOS platformuna port ederek performanslı uygulamalar yazabiliyorlar. Peki bu geliştirme nasıl gerçekleştiriliyor? Dilerseniz öncelikle React Native’in tarihçesini ele alarak yolculuğumuza başlayalım.

React Native’in Ortaya Çıkışı

Başarılı bir Facebook çalışanı olan Jordan Walke’nin yaptığı ReactJS, 2011 yılında Facebook’un haber kaynağına can verdi ve devam eden sonraki yılda ise instagram.com’un gönderi akışını süslüyordu. 2013 yılına gelindiğinde ise Amerika’daki JavaScript konferansında React’ın açık kaynak hale getirildiği duyuruldu.

Zaman içerisinde React’in hafif ve performanslı olması ile JS topluluğu tarafından benimsendi. Bu durumu fırsat bilen Facebook, elindeki gücü doğru kullanarak mobil uygulama geliştirimine yönelik React’in kullanılabileceği bir platform yapmak için kolları sıvadı. 2015 yılının Şubat ayında React.js konferansında React Native’i duyurdu. Zaten React’e aşina olan topluluk, React Native’i de aynı derecede benimsedi.

React Native Nedir?

React Native aslında adı üzerinde, ReactJS çatısını baz alarak Native arayüzler aracılığıyla mobil uygulama yazılmasını sağlayan bir geliştirme ortamıdır. Native arayüz bileşenlerini barındırdığı için klasik React’teki component yapısında kullanılan <div> bileşeni yerine Android ve iOS’teki arayüzü karşılığına dönüşecek olan <View> bileşeni, <img>yerine ise <Image> bileşeni kullanılır. Aslında <View> ve <Image> gibi bileşenler Facebook tarafından Android ve iOS karşılıklarının kodlanmasıyla oluşturulmuş yapılardır. Yani siz bu bileşenleri kullandığınızda, çalıştırılan işletim sistemine göre arka planda gerçekten de native karşılıklarına dönüştürülürler. Peki bu yapı tam olarak nasıl işliyor?

React Native’in Mimarisi

Apache Cordova yazımızda anlattığımız gibi WebView üzerinde görüntülenen HTML bileşenlerin aksine native olan bu yapılar tabi ki büyüsel bir şekilde oluşturulmuyor. Native tarafında eşleniklerinin üretilmesini sağlayan “bridge” dediğimiz React kodu ile native ortamı arasında bir köprü oluşturan bu yapı aslında React Native’in başrol oyunculuğunu üstleniyor.

React Native, JavaScript kodları ile bridge vasıtasıyla iletişimde bulunur. Kaynak: slideshare

Yazılan JSX kodu, uygulamanın çalışma zamanında Android ve iOS platformları için ayrı olarak tasarlanan köprüler yardımıyla ilgili platformun Native bileşenlerine dönüştürülüyor ve uygulamanın native olarak yazılmasıyla arasında bir fark kalmıyor. Bu olayın bir dezavantajı da var elbette, çalışma zamanında native bileşene render etme operasyonu aslında CPU tüketen bir işlem. Buna bağlı olarak React Native uygulamaları, native uygulamalara kıyasla biraz daha fazla pil tüketimine sahip olacaktır. Bu fark çok küçük olduğu için genel anlamda son kullanıcının hissedeceği bir etki oluşturmayacaktır.

Aslında React Native’in, sadece UI bileşenleri ve cihaz API’larına erişim için “Native” özellikler taşıdığını belirtmekte yarar var. Zira yazdığınız JS kodu aslında uygulamanın çalıştığı cihazın JS motoru tarafından çalışıyor ve Xamarin’de olduğu gibi native kodlara dönüştürülmüyor. Bu nedenle görüntü işleme ve oyun gibi daha spesifik uygulamalar oluşturacaksanız React Native yerine ilgili platformun native geliştiriminden devam etmek çok daha mantıkldır. Bu kullanım alanları haricinde, web servisten veri çekme, gelen veriyi UI’a basma ve çeşitli birtakım “basit” operasyonlarda React Native daha kullanışlı olacaktır.

Yazılan kodun JS kodu olmasının native koda göre en büyük avantajı belki de derleme gerektirmemesi. Bu özelliği çok iyi kullanan React Native, uygulamayı bir kez telefona atmanız halinde yapılan kod değişiklikleri “hot reloading” denilen yöntemle derleme gerektirmeksizin uygulamaya push edilebiliyor ve bu sayede yazılımcı için derle-çalıştır işleminden doğan süre kısalmış oluyor. Hatta daha önceki yazımızda anlattığımız CodePush sayesinde uygulamanızın güncellemesini store başvurusu yapmadan direkt olarak kullanıcılara yönlendirerek gerçekleştirebilirsiniz.

Web’e göre aslında React Native’in bir avantajı daha var. JS kodunun ayrı bir Thread’de çalıştığı bu sistemde, JS kodunun çalışma süresi uzasa dahi UI Thread’i çalışmaya devam ettiği için uygulama arayüzü bu durumdan etkilenmiyor ve takılmadan devam edebiliyor.

Bu kadar bilgiden sonra şimdi dilerseniz ilk React Native projemizi yazmaya geçelim.

Proje Gereksinimleri

React Native uygulaması geliştirmek için öncelikle sisteminizde Node‘un yanısıra Android ve iOS SDK’lerinin de kurulu olması gerekiyor. Daha sonrasında react-native-cli aracını npm üzerinden indirebilirsiniz:

npm install -g react-native-cli

İlgili bağımlılıklar kurulduktan sonra aşağıdaki komut ile ilk React Native projenizi oluşturabilirsiniz. Bu komut ile React Native projesi için gereken tüm npm kütüphanelerini yükleniyor ve bir başlangıç projesi oluşturuluyor. Bu süre biraz uzun olacağından kendinize bir kahve içimlik zaman ayırabilirsiniz.

react-native init ReactBaslangic

Bir şeyi de hatırlatmakta yarar var. Eğer iOS projesi derlemek istiyorsanız OSX işletim sistemine yani bir Mac bilgisayara ihtiyacınız var. Aksi takdirde Windows veya Linux işletim sisteminde iOS uygulaması geliştirmeniz şu an için mümkün değil.

Proje Yapısı

Öncelikle oluşturduğumuz proje dizininin içine girelim:

cd ReactBaslangic

React Native proje yapısı

Proje dizinine ilk baktığımızda bizi aşağıdaki dosya/dizinler karşılıyor:

• tests: Facebook’un JavaScript test aracı olan Jest ile test edilecek ilgili bileşenler bu kısımda yer alıyor.
• android/ios: Sırasıyla Android ve iOS platformları için ayrı ayrı proje dosyaları burada tutuluyor.
• node_modules: Projenin bağımlı olduğu ilgili npm paketlerini barındırıyor.
• .babelrc: Babel JavaScript derleyicisi ile ilgili yapılandırma dosyası olan .babelrc, "presets": ["react-native"] satırı ile node_modules dizininde yer alan babel-preset-react-native plugin’inin kullanılacağını belirtiyor.
• .buckconfig: Facebook’un Buck isimli build sistemi ile ilgili yapılandırma dosyası olan .buckconfig, Android uygulaması için build sürümü ve maven repo url’ini barındırıyor.
• .flowconfig: Yine Facebook’un Flow isimli statik tip konrolcüsü ile ilgili yapılandırma dosyası olan .flowconfig, React Native projesi ile ilgili çeşitli yapılandırma ayarlarını içeriyor.
• .gitattributes/.gitignore: Git versiyon kontrol sistemi ile ilgili yapılandırma dosyaları.
• .watchmanconfig: Facebook’un Watchman isimli dosya izleme aracı ile ilgili yapılandırma ayarlarını tutar.
• App.js: Örnek bir React Native uygulama dosyasıdır.
• app.json: Uygulama ile ilgili manifest dosyasıdır.
• index.js: Uygulamanın başlangıç noktasıdır diyebiliriz. İlgili bileşenler ve başlangıç bileşeni burada belirtilir.
• package.json: proje ile ilgili bağımlılıkların npm’e belirtildiği yapılandırma dosyasıdır. Proje adı, versiyonu, lisans bilgisi ve diğer ilgili ayarlar burada tutulur.

Bu kadar bilgiden sonra dilerseniz örnek proje üzerinden uygulamayı inceleyelim.

React Native Bileşenleri

Önceden de belirttiğimiz gibi uygulama dosyası App.js olarak yer alıyor. React Native de temelinde bir React projesi olduğu için bu dosyayı da incelediğimizde bir React projesi ile hemen hemen aynı yapıda olduğunu görüyoruz. Tek fark HTML bileşenleri olan <div> ve <p> elemanlarının yerini, Android ve iOS karşılıkları olacak şekilde <View> ve <Text> bileşenleri almakta. Bu bileşenlerin kullanımının da React projesi ile hemen hemen aynı şekilde bulunuyor.

export default class App extends Component<{}> {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit App.js
        </Text>
        <Text style={styles.instructions}>
          {instructions}
        </Text>
      </View>
    );
  }
}

Eğer daha önce ReactJS ile ilgili kodlama yapmadıysanız bu kısım size biraz karmaşık gelmiş olabilir. Fakat bu yazının ilerleyen kısımlarında bu kafa karışıklığın da giderileceğine eminim. Şimdi isterseniz stil işlemlerimize gelelim.

Stil ve Biçimlendirme

React Native’de bileşenlerin stillendirilmesi için CSS yerine stil özelliklerin CSS’imsi JavaScript karşılıkları bulunmaktadır. Bu sayede platform bazlı tasarım yapmak yerine tek bir stil dosyasından ilerlenebilir. Aşağıdaki şekilde görüldüğü gibi syntax CSS’e oldukça benzemektedir:

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

Stilin uygulanması için ise styles nesnesinden yararlanılabilir:

<View style={styles.container}>
	...
</View>

React Native’deki stillendirme CSS ile oldukça benzer olduğu için bu kısma kolayca adapte olabileceğinizi düşünüyorum. Şimdi lafı daha fazla uzatmadan uygulamanın mobil cihaz üzerinde çalıştırılmasına geçebiliriz.

Projenin Çalıştırılması

Projenin Android cihazında çalıştırılabilmesi için öncelikle ANDROID_HOME ortam değişkeninin C:\Users\KullaniciAdi\AppData\Local\Android\sdk şekilde atanmış olması gerekiyor. Bu sayede Gradle Android SDK’ini bulabilecek ve uygulamayı ilgili şekilde derleyecektir.

Uygulamayı Android üzerinde çalıştırmadan önce Android cihazın bilgisayara bağlı olması ya da Android emulator çalıştırılması gereklidir. Eğer bir emulator oluşturmadıysanız, Android Studio içerisinde Tools > Android > AVD Manager’ı çalıştırıp kendimize bir emulator oluşturabilirsiniz.

Şimdi React Native uygulamasını aşağıdaki şekilde çalıştıralım:

react-native run-android

Yukarıdaki komut Gradle ile projeyi derleyerek aynı zamanda JavaScript dosyalarının değişip/değişmediğini kontrol ederek Android cihaza ilgili değişikliklerin yansıtılmasını sağlayan Metro Bundler‘ı çalıştıracaktır.

Örnek React Native uygulaması

Şimdi App.js dosyası içerisinde aşağıdaki şekilde değişiklikleri yapalım.

export default class App extends Component<{}> {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Ilk React Native Projem!
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#3F51B5',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
    color: '#FFFFFF',
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

Üstteki değişiklikleri uyguladıktan sonra emulator üzerinde iki kere R tuşuna basınca yaptığınız değişikliklerin herhangi bir apk derlemesi olmaksızın cihaza push edildiğini göreceksiniz.

Kod değişikliği sonrası emülator ekranı

Sonuç Olarak

CRUD temelli küçük çaplı uygulamalar için React Native tam bir biçilmiş kaftan oluyor. Fakat direkt bir CSS desteği olmadığı için dışarıdan bulup edindiğiniz Admin panel gibi hazır şablonları React Native projesine giydirmeniz herhangi bir Apache Cordova projesine göre biraz meşakatli olabilir. Bunun haricinde React Native, gücünü React’ten alarak düzgün bir kod yapısı sağlıyor. Bu sayade daha az kırılgan uygulamalar elde edebilirsiniz.

Eğer sizin de React Native hakkında sorularınız veya görüşleriniz varsa yorum kısmından bize yazabilirsiniz. Bir sonraki yazımızda görüşmek üzere.