Herkese merhaba!

Geçtiğimiz haftalarda House of Apps‘in Bahçeşehir Üniversitesi’nde düzenlediği React Native İstanbul etkinliğine katıldım. Şimdiye kadar mobil alanda sadece hibrit Cordova - Ionic ikilisiyle geliştirmeler yaptıktan sonra React Native’e bir fırsat vermeye ve daha MVP kıvamında olan, hali hazırda canlıda olan bir Ionic uygulamasını React Native ile yeniden yazmaya karar verdim. Burada sürecin tamamını anlatmayacağım, süreç boyunca karşılaştığım durumlardan bahsedeceğim ve karşılaştırmalar yapacağım.

Öncelikle, benim React Native ile tanışmam aslında çok yeni değil. 2016 mayıs civarındaydı, versiyonu da 0.26 idi sanıyorum. Daha o zaman Button component’i bile yoktu. 🙃 O dönemde çalıştığım şirkette Angular yazıyordum, React hype oluyordu ama kendimi geliştirmeye pek vakit bulamadığımdan yanaşmamıştım. Sonrasında uygulama fikirleri/istekleri geldiğinde de çoğunlukla 2-3 sayfalık uygulamalar olduğu için Ionic (ionic 1) ile yazmaya karar verdim, bu kararımdan da memnundum.

Başlangıç

House of Apps’in etkinliğinde aslında yapılanların ne kadar çok farkında olduğumu anladım, kısa da olsa bize uygulama çatısı oluşturma, geliştirme, navigasyon gibi temel kısımları ilettiklerinde geri kalanı zaten sürecin içine dalmaktı. Ben de yeni yazdığımız uygulamada daha fazla bug fix veya yeni geliştirme yapmadan, React Native ile yeniden yazmaya karar verdim. Uygulamada webview ile alakalı yaşadığımız bir sorun da bunun bir parçası.

Tüm bunların üzerine araştırmaya başladım. react-native-cliın yanında bir de create-react-native-app adında bir araç daha yayınlanmış. Farkları şu şekilde: react-native-cli size ios ve android projelerini başlangıçtan itibaren hazırlıyor ve süreç boyunca kullandığınız emülatörler bu proje içeriklerine bakıyor. Bu aracı kullanmanın riski, bazı içerikleri veya native kodları linklemeniz gerekmesi, onu da react-native link <smth> şeklinde kullanarak hallediyorsunuz. create-react-native-appte ise uygulama Expo adı verilen bir uygulamanın içerisinde çalışıyor. Siz herhangi bir ek kütüphane eklerken bir şey düşünmenize gerek kalmıyor, ta ki uygulamayı canlıya alana kadar. O zaman uygulamayı eject edip normal react-native-cli‘a dönüyorsunuz ve linklemeleri vs. unutmamanız gerekiyor. Anladığım kadarıyla da sonraki güncellemelerde yine react-native-cli ortamından devam etmeniz gerekli.

“Çok iyi! 👍🏻” Dediğim Anlar

İlk “çok iyi!” anım component.ios.js ve component.android.js adlı platform bazlı farklı iki component yazdığınızda ve ‘component’ şeklinde import ettiğinizde, dinamik olarak çalıştığı platform’a göre ilgili dosyayı çağırması. Ekstradan bir sürü kod yazmayı, debuglamayı bitiriyor, burada zaman size kalıyor.

İkinci “çok iyi!” ise tabii ki hala adamakıllı es6’ya geçememiş bir önyüzcü olarak benden kaynaklanıyor. es6 ve es7 syntax’ına bayılıyorum, ama bir türlü tüm gücüyle kullanmaya fırsatım olmadı. Bu projede tabii ki tüm özelliklerini kullanıyoruz. Hatta mobx ile state yönetimi yapsaydım decorator’lara falan girecektim 😍

Sürekli flex kullanmak! Stilleme tarafında yapılan en mantıklı şey olabilir. Gerçekten de minimum zahmet ile, webde yaptığınız gibi çok kolay bi şekilde elementlerin duruşlarını değiştirebilir, bölebilir, sağa sola yaslayabilirsiniz. Buna da bir “çok iyi!”!

Son “çok iyi!” ise Component’lerin çok çok azının default stil kodu içermesi. Çünkü eğer ionic projesi geliştirdiyseniz (bu webde de geçerli), bir sürü css kodu eziyorsunuz. !important yazmaktan eliniz yoruluyor. React Native’de Text, Button ve listeleme elementleri dışında default stilleri olan çok az element var. O yüzden bütün alan sizin, tüm ui geliştirmelerini istediğiniz gibi yapıyorsunuz, herhangi bir arayüz kütüphanesi gibi bir şey yok.

Garipsediklerim

Gelelim garipsediklerime. İlki, hemen logoyu projeye eklemeye çalışırken yaşadığım SVG durumu. SVG default olarak desteklenmiyor (iOS tarafında çalıştığım için de olabilir, Android tarafını test etmedim). Başka başka componentler yazıp, kütüphaneler, eklemeler vs. yapmanızı, hatta belki de svg’nizi json’a aktarıp uğraşmanızı bekliyorlar. Biz web geliştiriciler için vektörel görseller işin olmazsa olmazı. Orada svg uzantılı logo mükemmel parlayacak, ötesi yok! Ama tabii ki React Native bridge üzerinden componentleri çizdirdiği için, orada bir webview yok, Native elementler var 😄. Bu yüzden de “Svg’yi koydum çalıştı” yok maalesef. Onun yerine Apple diyor ki, görsellerinizi farklı çözünürlüklerde png olarak export edin ve adlarına @2x.png, @3x.png gibi uzatmalar koyun. Sketch gibi araçlar bu kısımları zaten sizin için yapıyor. Sonuç olarak da SVG kalitesinde görselleri uygulamanızda parlatabilirsiniz ✨

İkincisi, flex: 1 yapsam bile, bazı componentleri layout’a fixlemek için Dimensions.get(“window”).width kullandığım oldu. Bu benim kendi eksikliğimden de olabilir tabii 😅, ancak gerektiği yerler olduğunu düşünüyorum. Bunu css’teki gibi “100vw” gibi değil de Dimensions objesi kullanarak çözmek, bir layout işlemi için kod yazmak insana garip gelen kısmı.

Bir sonraki, eğer live reload’u uzun süre kullandığımda, bir süre sonra response sürelerinin gereğinden fazla uzadığını ve şiştiğini farkettim. Bu, başka uygulamaların da çalıştığından dolayı olabilir, ama packager’ı, simulator’u ve hatta browser’ı restart ettiğimde pek değişen bir şey olmadı.

En büyüğüne gelelim: mobil geliştirici gibi düşünmek ve gereksinimleri bilmek. Sanırım en büyük eksikliğim bu kısımdan geldi. Ionic’te bir webview içerisinde web sitesi yapmanın tüm kolaylıklarını yaşıyorsunuz. fontları @import ile eklemek, svg, ajax için http sıkıntısı yaşamamak (iOS’te http olan domaininiz varsa Exception olarak eklemeniz gerekiyor) gibi. Ancak mobilde de platformları tanımak, bilmek lazım. Yapabileceklerinizin bir sınırı olabilir. Ionic uygulamalarının mobil uygulama geliştirici gibi düşündüren belki tek kısmı uygulamanın paketlenip mağazaya konulması kısmı olabilir. Ancak React Native ile platform bazlı zorunlulukları bilmeniz ve yerine getirmeniz gerek. Örneğin font mevzusu. Özel font yüklemek ve kullanmak istediğimde şu linkte gayet basit anlatsa da asset’lerin linklendiğinden emin olabilmek için 3 farklı yere bakmam gerektiğini öğrendim 😅.

Sonuç

Sonuç olarak, React Native’in mobil uygulama geliştirmedeki gücü aşikar. Kesinlikle Cordova tarzı hibrit uygulamaların yanında native performansı kendini belli ediyor, ve tüm bunları alışık olduğunuz biçimde, React ile yazıyor olmak gerçekten işleri çok kolaylaştırıyor. Benim bundan sonra kendim için hedefim uygulamayı tamamlayıp gelecek bütün mobil uygulamalarımı React Native ile yazmak.

Ps: Henüz uygulama ile ilgili tüm süreçleri tamamlamadığım için bir yazı daha gelebilir. 🤔

Keyifli kodlamalar!