Trendyol GO - React Native

Yusuf Zeren
Oct 16, 2020 · 2 min read

Trendyol GO uygulamasında React Native’i kullanırken merak edilen ve dikkat ettiğimiz birkaç konuya değinmek istiyoruz:

  • State Yönetimi ve Hook’lar
  • Navigasyon ve Authentication Yapısı
  • Animasyonlar
  • Kullandığımız Açık Kaynak Kütüphaneler

State Yönetimi ve Hook’lar

State yönetimi için herhangi bir 3. parti kütüphaneye ihtiyaç duymadık. Context API tüm state yönetim gereksinimlerimizi karşıladı. Yine de global state kullanımını yapabildiğimiz kadar minimum seviyede tutmaya çalıştık. Böylece gereksiz render maliyetine girmedik.

Ayrıca Context içinde useMemo veya React.Memo fonksiyonlarını kullanarak Context Provider’ının sadece gerekli durumlarda render edilmesini sağladık.

Tüm uygulamamız fonksiyonel component’lerden oluşuyor. Class component hiç kullanmadık. Birden fazla component’in kullandığı benzer mantığa sahip fonksiyonları paylaşılabilir hook’lara taşıyarak kodun okunabilirliğini ve yönetilebilirliğini artırdık. (Uygulamamızda toplam 5 adet context ve onlarca hook var)

Şu an için api isteklerini axios ile yapıyoruz ama ilk fırsatta cache mekanizmasından faydalanmak için react-query ile api isteklerini yapmayı planlıyoruz.

Navigasyon ve Authentication Yapısı

Navigasyon kütüphanesi olarak react-navigation v5 kullanıyoruz. react-navigation gerçekten custom router ve navigator yazma konusunda oldukça esnek bir kütüphane. Tüm popup ve alert yapımızı react-navigation ile yönetiyoruz. Ekstra bir kütüphaneye ihtiyaç duymadık.

Authentication yapısında da auth bilgisini userContext’de tutuyoruz. User bilgisi Provider kısmında değişirse UI güncelleniyor ve ona göre giriş sayfası veya anasayfa render ediliyor.

const RootNavigator = () => {
const {user, loading} = useAuth();
if (!user) {
return (
<GoStack.Navigator>
<GoStack.Screen name="Auth" component={AuthNavigator} />
</GoStack.Navigator>
);
}
if (user) {
return (
<GoStack.Navigator>
<GoStack.Screen name="Main" component={MainNavigator} />
</GoStack.Navigator>
);
}
...

Animasyonlar

Animasyon kısımlarında React Native içindeki Animated API’ı kullanıyoruz. React Native Gesture Handler ile harmanladığımız birçok yer var. Animasyon kısımlarında en çok dikkat ettiğimiz şey tüm animasyon stil geçişlerini JS thread üzerinde değil UI thread üzerinde yapmak. Bunu da Animated API’daki useNativeDriver parametresini her zaman true yaparak gerçekleştiriyoruz. Böylece hem Android hem de iOS’da 60 fps animasyon performansı elde edebiliyoruz. Native Driver’ın desteklenmediği stiller olursa, , gibi temel bazı stiller desteklenmiyor, bu kısımlarda LayoutAnimation API’ını kullanıyoruz. (Ayrıca bu ayrımdan kurtulmak için Reanimated v2’yi sabırsızlıkla bekliyoruz; çünkü tüm stillerin UI thread’de çalıştırıldığı bir kütüphane bizi bu ayrımdan kurtaracak)

Kullandığımız Açık Kaynak Kütüphaneler

Kullandığımız kütüphaneler sayesinde native konfigürasyonlar hariç hiç native bileşen veya modül yazma ihtiyacımız olmadı. Memnun kaldığımız temel kütüphanelerin listesini aşağıda görebilirsiniz:

Kapanış

Trendyol GO uygulamasını geliştirirken edindiğimiz tecrübeleri 5 hafta boyunca sizlerle paylaşmaya çalıştık. Yeni serilerimizde görüşmek dileğiyle iyi okumalar :)

Trendyol Tech

Trendyol Tech Team

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store