React Native ile Hürriyet E-gazete Uygulaması
H ürriyet Dünyası’nı takip ediyorsanız son yıllarda kullanılan teknolojilerin değişim ve gelişiminden haberdarsınızdır. Bu değişim noktalarından en önemlilerinden biri de şüphesiz Hürriyet Gazetesi’nin dijital alandaki karşılığı olan Hürriyet E-gazete uygulamasıdır.
2017 itibariyle E-gazete uygulamasını tamamen yenilendi. Bu yazıda E-gazete gibi indirme sayısı on milyona yaklaşmış bir uygulamanın günümüzün en popüler teknolojilerinden olan React Native ile nasıl geliştirildiğine değineceğiz.
Öncelikle Hürriyet e-gazete uygulamasını nedir tanıyalım.
Kullanıcılar tarafından bakıldığında E-gazete, üyelerin Hürriyet gazetesi ve eklerine günlük olarak ulaşabildikleri, son dakika haberlerini takip edip Hürriyet arşivinde gezinebildikleri uygulamadır. Yani basılı gazetenin dijital olarak karşılığı olarak düşünebiliriz.
Geliştirici tarafından bakıldığında ise, içerisinde 1Mb civarında onlarca gazete sayfası görselini barındıran, uygulama içi satın alma, çevrimdışı çalışma (dolayısıyla sürekli IO işlemleri) ve abonelik yönetimi gereksinimlerinin uygulama geliştirme sürecinde ana hatlarını oluşturduğunu söyleyebiliriz.
Bu yazı daha çok E-gazete uygulaması geliştirme sırasında karşılaşılan problemler ve React Native ile uygulama geliştirmeye yaklaşımımızı anlatacaktır. Bunun dışında RN’in genel özelliklerinden bahsettiğim React Native öğrenmek için 10 neden yazıma da göz atabilirsiniz.
Öncelikle React Native’i neden tercih ettiğimizi maddeler halinde özetleyip sıralayalım:
1. Geliştirme Sürecini hızlandırır.
Geliştirme süreçleri Native tarafta kod geliştirme ile kıyaslandığında RN’in bir çok yönden üstün olduğunu söyleyebiliriz. Hot Reload, Live Reload özellikleri, platformlar arası (iOS ve Android) paylaşılan kod miktarının ciddi oranda artması ve UI tarafında Flexbox kullanmamız gibi onlarca etmen sebebiyle bizi oldukça hızlandırıyor.
2. Paylaşılan kod miktarını artırır
React Native yapısı gereği Android ve iOS tarafında ortak kullanılan TextView, Image gibi komponentleri otomatik olarak ilgili platformun UI yapısına dönüştürmektedir. Bunun yanında RN sunduğu API ile uygulama içerisinde kullandığımız bir çok gereksinimi ortaklaştırmaktadır. Böylece ortak olarak kullanılabilecek kod satırı miktarı artmaktadır.
3. Markete Çıkma sürecini kısaltır.
Mobil uygulamaları geliştirmesinin yanında yayınlanma süreçleri de gerçekten bir dert. Her ne kadar Google Play üzerinde yayınlandıktan sonra birkaç saat içerisinde yayınlansa da AppStore için bekleme süresi özellikle yayında olan uygulamada istemci taraflı kritik bir hatanız varsa, büyük bir problem olabiliyor. Ek olarak güncellemenizin kullanıcı tarafından yüklenmesi de ayrı bir problem (Çünkü kullanıcı uygulamayı güncellemeyi yapmayabiliyor). React Native’in yapısı gereği remote update’i desteklemesi sayesinde güncellemelerimizi kullanıcılara daha hızlı bir şekilde ulaştırabiliyoruz.
4. Güçlü Community desteği var.
Bir teknolojiyi kullanmayı düşünüyorsanız şüphesiz en önemli başlangıç noklarından biri, community desteğidir. Bu durum herhangi karşılaştığımız bir problemin hızlı bir şekilde çözümünün sağlanmasında ve projenin sürdürülmesi bakımından en önemli faktörlerden biri. Bu noktada Github’ın en popüler kütüphanelerinden biri olması açısından bizi tetikledi. Bunun yanında oldukça aktif bir issues sayfası ile yaşadığımız pek çok problemin çözümü olduğunu görüyoruz.
5. Flexbox ile daha esnek kullanıcı arayüzü geliştirilebiliyor.
Flexbox, yazdığımız farklı cihaz ekranlarında stabil olarak uyum sağlaması için geliştirilmiş bir layout tipidir. Container içerisindeki itemlerin en iyi biçimde yerleşmesini sağlamaktadır. Bu sayede belirsiz çözünürlüklerde uygulamanın kullanıcı arayüzünün kararlı bir şekilde yerleşmesini amaçlamaktadır. Web domain’inde de şu an bir çok alanda kullanılmaya başlanmıştır (Bootstrap 4 gibi). Ancak web sayfalarında Internet Explorer (Ve bazı tarayıcıların eski versiyonları) desteği belli versiyonlar için olmadığından henüz gerçek anlamda webde aktif olarak kullanılabildiğini söyleyemeyiz. Ancak RN ile birlikte Flexbox’ı rahatlıkla kullanabiliyoruz.
Native tarafta Facebook tarafından geliştirilen Yoga gibi alternatifleri de (https://github.com/facebook/yoga) flexbox modeli üzerinde çalışmak için kullanabilirsiniz. Zaten RN’nin Flexbox modeli aslında Yoga üzerinde çalışmaktadır.
6. Ecmascript 6 desteği sunuyor.
RN, Javascript’in son versiyonu olan Ecmascript 6 ile kod geliştirmemize izin veriyor. Ecmascript 6'da Javascript dili oldukça ilerleme kaydettiğini söylemeliyim. Arrow functions, Class kullanımı (Syntax Sugar olsa da), yeni collection tipleri ve bir çok yeni özelliği ile dilin oldukça gelişmesini sağladı. ES6 kullanımı şu an için pratikte performans anlamında direkt olarak bir fayda sağlamasa da (çünkü hala üretim için ES5'e dönüştürüyoruz) kodları ciddi oranda kısalttığını söyleyebilirim. Geliştirilen Javascript kodlarını üretim ortamı için bundle ettiğimizde main.jsbundle dosyasının incelediğimizde kodların ES5'e transpile edildiğini göreceğiz. Yani ES6 kod yazımı şu an için hala geliştirme ortamında katkısını sunmaktadır.
7. Stateleri Redux ile yönetin.
Son yıllarda React ile uygulama geliştirirken ismini sıkça kullandığımız bir başka teknoloji de Redux. React projelerinde uygulamalar büyüdükçe en büyük problemlerden biri de statelerin yönetimi oluyor. Redux Github üzerinde geliştirilen bir proje ve Redux is a predictable state container for apps olarak kendini tanımlıyor.
8. Sky is the limit
React Native ile uygulama geliştirken sınırımızın olmadığını bilmek belki de onu iyi yapan özelliklerin en önemlisi. Javascript API de bulunmayanlar büyük ihtimalle Github’da bol yıldızlı bir proje üzerinden alabiliyor ya da hemen Native tarafa geçip Java, ObjC veya Swift ile kodlarımızı yazıp bir köprü ile uygulamamızın kullanımına sunabiliyoruz.
Ana hatları ile E-gazete Uygulaması
Yazının ilk bölümünde kısa kısa React Native ile kod geliştirmenin avantajlarına değindik. Şimdi ise Hürriyet E-gazete uygulamasını geliştirme sırasında karşılaştığımız — karşılaşabileceğimiz önemli problemleri nasıl çözdük onlar üzerinde duralım.
React Native, performans konusunda oldukça iyi ve dokümantasyonunda yeralan prensiplere uygun kod geliştirildiğinde vaad ettiği Native Performans’ı tek başına ciddi oranda sağlıyor. Ancak uygulamalar büyüdükçe yardımcı teknolojilerle RN’ye destek vermemiz gerekiyor. Bunlardan şüphesiz en önemlisi state’lerin yönetimi. Burada Mobx gibi çok iyi alternatif karşımıza çıkmakla birlikte, Redux pek çok teknoloji gibi RN’in yanında en iyilerin başını çekiyor. Redux ile uygulama içerisindeki bazı state’ler uygulama açık olduğu sürece kullanılırken bazı state’ler persistent olarak yaşamaya devam edebilmekte.
Uygulamadaki sayfalar arasındaki navigasyonu sağlamak için, hem React Native’in hem de community’nin sunduğu pek çok çözüm vardı. Hem performanslı hem de uygulama akışı içerisinde event’lerle yöneteceğimiz bir yapı olarak RN ExperimentalNavigator’u tercih ettik. Her ne kadar deneysel olsa da halihazırda olan bir kaç özelliğini extend ederek state container’ımızla bağladık. Aynı uygulamadaki diğer state’lerde olduğu gibi uygulamanın hangi state’de olacağını redux contain’era event göndererek sağladık.
React Native Experimental şu an için deprecated olmuş durumda ve community büyük oranda React Navigation’a geçiyor. Şu an için performans ve çalışmasından çok memnun olsak da RN’nin yeni sürümleri ile beraber destek kalkacağı için React Natigation’u uygulamaya dahil edeceğiz.
Uygulama en az 1MB olan imajlardan oluşmaktaydı. Ve bu imajların gösterilmesi düzgün bir yapı oluşturulmadığında OOM hatalarına çok açık bir uygulama olacaktı. Halihazırda pek çok benzer uygulama ve E-gazetenin eski versiyonunun en muzdarip olduğu basamaklardan biriydi. Bunun yanında React Native’in imajların gösterimi (aslında decode) için ayrı bir thread’i otomatik olarak açıyor olması da bizim için çok önemli fayda sağladı.
Teorik olarak codebase’in tek olması React Native’in sağladığı bir avantaj olarak gözükse de, pratikte sadece yazılım teknolojileri yanında bir de tasarım ve UX pattern’leri mevcut. E-gazete uygulaması da tasarım tarafında bu tasarım şablonlarını uygularken bazı durumlarda tasarım anlamında da Android ve iOS ciddi oranda ayrıştı. Onboarding ekranı iOS’da ve Android’de tamamen farklı tasarlandı. Geliştirme sürecinde ise, bu tasarım farklılıkları component seviyesinde kalarak uygulamanın akışının yine tek bir codebase’den yönetilmesini sağlandı. Ayrıca aşağıdaki ekran görüntüsünde olduğu gibi, bazı komponentler birebir aynı geliştirilip stil tanımlaması yapılırken cihazın tipine göre farklı özellikler belirtildi.
RN packager uygulaması yazdığımız her kodu local ortamda bundle ederek, RN’nin yorumlaması için hazırlıyor. Sonrasında kodumuzun çalışır halini hemen görebiliyoruz. Uygulamanızı sadece Native tarafta eklediğiniz bir kod varsa tekrar build etmeniz gerekiyor, onun dışında yazdığınız her kodu iOS simulator, Android emulator veya test cihazlarınızda otomatik olarak güncellenen (Hot Reloading ve Live Reloading seçenekle) ekranlarla geliştirme sürecimizi hızlandırabiliyoruz.
Mobil uygulamaları web uygulamalarından ayıran özelliklerden biri de Gestureler. Kullanıcılar pek çok gesture ile uygulama ile etkileşime geçebiliyor. React Native’in en iddialı olduğu alanlardan biri de kullanıcı ile gesturelar üzerinden oldukça efektif olarak etkileşime geçmek. Çünkü artık üçüncü boyutun, yani z ekseninin girdiği bir durumda kullanıcının hangi katman ile etkileşime geçtiğini anlamak pek çok hibrit mobil teknolojisinde hala ciddi bir sorun teşkil ediyor.
Hürriyet dünyası medya sektörünün heyecanını ve hızlı hareket etme isteğinin yaşandığı önemli hublar’dan biri. Agile metodolojilerle geliştirilen uygulamaların bekletilmeden kullanıcıya ulaştırılması amaçlanıyor. Burada 2 problem ortaya çıkıyor. Birincisi geliştirme süreci biten uygulamanın hemen yayına alınamaması ve milyonlarca kullanıcınız olduğu durumda markete göndermeniz bile kullanıcılarınızın o uygulamayı güncelleyeceği anlamına gelmiyor. Bu durumda kullanıcıyı rahatsız edecek force update gibi çözümler yerine, kullanıcıyı rahatsız etmeden hem de onu bilgilendirerek güncelleme yapmayı en iyi çözüm olarak kullanıyoruz. Microsoft tarafından geliştirilen Codepush ile remote update gerçekleştirerek kullanıcıların güncellemeleri markete girip indirmesine gerek kalmadan conditional (şarta bağlı) olarak yapabiliyoruz. Bunun yanında production, stage ve test ortamları ile sadece son kullanıcı değil, test kullanıcıları içinde uzaktan güncelleme yapabilir duruma geldik. Bunun yanında Codepush bize güncellemeleri kullanıcılara belli bir oranda çıkmaya da izin vermektedir. Zaten hali hazırda Google Play’de olan özellik AppStore’da bulunmamaktadır. Böylece Native platformlardan ekstra olarak, incremental güncellemede yapabilir duruma geldik.
React Native’i tanımlarken “sky is the limit” sloganını kullanmıştık. Aynı sloganda olduğu gibi alışılagelmiş şekilde RN ile diğer Native’de alternatif teknolojilerde olduğu gibi herhangi bir limitimiz yok. Native ile yapabildiğiniz her şeyi React Native ile de yapabilirsiniz. RN(E-gazete için) ile geliştirilmiş uygulamada Acceptance testlere dönük UI test otomasyonunu inceleyebilirsiniz.
Hürriyet e-gazete uygulamasını Google Play’den ve App Store’dan indirebilirsiniz.
