React Native ile Mobil Uygulama Geliştirme, Teknik Detaylar ve HttpLive

Bu makale; her hangi bir sunucuya gerek duymadan Spotify benzeri prototip bir mobil uygulamanın HttpLive aracı ile iOS ve Android için geliştirilmesini konu alıyor. Makalenin somut çıktılarına isterseniz hızlıca aşağıdaki GitHub adresinden ulaşabilirsiniz ama ben önce okumayı bitirmenizi öneririm.
Yazılarımda çok fazla kod örnekleri bulundurmak istemiyorum. Bu kısmı GitHub çözüyor daha doğrusu bu kısımla ilgilenenlerin oradan gerekli çıkarımları yaptığını düşünüyorum. İşin kavramsal sürecine de katkı sağlamak gerektiğini düşünüyorum. Benim için kavramsal süreç; bir işin teknik detaylarından arındırılmış kısımlarının sebep-sonuç ilişkileri kapsamında anlaşılması olarak ifade edilebilir. Tercih edilen mimari, yöntem ve kütüphanelerin nerede ve ne şekilde kullanıldığını derinleştirmek gerek. Bu sebeple makalenin bazı bölümlerini Kavramsal Süreç – [KS] kısaltması ile işaretleyeceğim.
Teknik altyapı ve geliştirme ortamı tercihlerimiz için neyin, ne zaman, nerede kullanılacağı sorularına vereceğimiz cevaplara hazırlanmış olmamız önemlidir. Bu hazırlık aşamaları; geliştiricilerin farklı araç, programlama dilleri ve ortamları bizzat deneme yanılma yöntemleriyle tecrübe ettiği anları ifade eder. İşte bu makalenin örnek uygulaması böyle bir anın ürünü.
React Native ile mobil uygulama geliştirirken birçok hazır kütüphane ve bileşen sayesinde uygulama görsel arayüzünün kolaylıkla oluşturulabildiğini gözlemledim. Bu sebeple prototip mobil uygulama ekran çıktılarını çok kısa sürede elde etmiştim. Bu noktada dikkatime çeken bir husus oldu. HTTP servislerinin mobil uygulama ile asenkron ve basit şekilde etkileşimi, veri alma – gönderme ve hata yönetimi işlemlerinin hiçte kolay olmadığını gözlemledim. Bu kısım tabii ki göreceli lakin önceliğim her zaman bir kurala olan bağlılık, basitlik ve sürdürülebilirlik.
[KS]
İş kuralları ve proje kapsamı, müşteri istekleri ile genişleyip karmaşıklaşırken bu durumun etkilerini en aza indirmek, yazım kurallarımızı ve uygulamayı daha kolay sürdürülebilir kılmak amacıyla Type-Safe desteğine başvurmak istedim.
Burada HTTP servislerini ve model bağımlılıklarını TypeScript ile geliştirdim. React Native in “component” ve SDK uyarlamalarını JavaScript (ES6) ile sürdürdüm çünkü burada TypeScript’ in arayüz (interface – type definitions) tanımları güncel ilerlemiyordu zaten ekran tasarımı ve bileşenleri için TypeScript’ e ihtiyaç duymadığımı belirtmek isterim.
EcmaScript 2015 (ES6) ile “async-await” (Promise) ve “fetch” kavramları JavaScript’e kazandırılmış durumda ve React Native en güncel ES6 özelliklerini çok çabuk uyarlayıp destekliyor. Böylece tüm bu özellikleri kullanarak uygulama içerisinde bir HTTP Proxy geliştirdim. Bağımlılık yönetimi (DI – InversifyJS) aracılığıyla HTTP çağrılarını basitçe yönetebildiğim bir katman oluşturdum.
TypeScript Proxy ile birlikte; mobil uygulama ekranlarının kullandığı model ve tiplerin işlenmesi, asenkron HTTP çağrıları, geri-çağırımlar (callback) ve durum yönetimi için Redux ve Redux-Thunk isimli kütüphaneleri kullandım.
[KS]
Belirli bir geliştirme kalıbı benimsemiş olan Redux; aksiyon (action), redüksiyon (reducer) ve bağlantı (connect) üçlüsü ile mobil uygulamanın geliştirme tarzını bir standarda bağlıyor. Böylece geliştirici yeni bir süreci veya servisi geliştirirken bu üçlü kuralı takip ediyor. Bu kurala alışmak biraz zor olsa da bana şöyle bir artısı oldu. Uygulamanın hangi ekranında ne olup bittiğini, servislerin işleyişini ve bağımlılıklarını kolayca gözden geçirebiliyor, değişiklik (refactoring) anlarında çok daha hızlı gözlemler yapabiliyordum.
Neden React Native’i tercih ettim?Aynı kod temeli (same codebase) ile iOS ve Android’ e geliştirme,Performans,JavaScript [ES6] ve TypeScript ile kodlayabilme,Hızlı geliştirme ortamıReact Stili ve Topluluk (Community)
Bazen bir framework çıka gelir ve oyunu baştan yazar. Apple her ne kadar açık kaynak olarak geliştirilen yeni nesil programla dili Swift’ e odaklanmış olsa da, topluluğun React Native e olan ilgisi artarak devam ediyor. Bunun için her iki projenin GitHub aktivitelerini incelemenizi öneririm.

Bu mobil uygulamayı geliştirirken HTTP servis – backend yazmadım bunun yerine HttpLive kullandım. HttpLive; servis – backend kodlamasını prototip uygulama geliştirme sürecinden çıkarıp belirli HTTP adresleri için yapılan isteklere dosya, video veya JSON tiplerinde cevaplar verebiliyordu. Böylece TypeScript Proxy ile kullandığım HTTP servis ve kaynaklar, mobil uygulamanın gerçek sunucu ortamından beklediği gibi çalışmasını sağlıyordu.

Prototip geliştirme adımını tamamlandıktan sonra uygulamanın test ve dağıtımının sağlanabilmesi için App Center ile React Native derleme ve dağıtım (Build – CI – Release) entegrasyonunu kullandım.
​​Faydalı olması dileğiyle…​

GitHub – Kaynak Kodlar
HttpLive