Series for React Architecture
React Örnek Proje Mimarisi — 6 (Sunucu İletişiminin Mimariye Etkisi)
Bu blog yazısında Web Uygulamasının Sunucu İletişiminin basitten karmaşığa nasıl evrildiği, nasıl geliştiğini ve bunun mimariye etkisini anlatmaya çalışacağım. ReactQuery , Apollo Client gibi Server State Management kütüphanelerini nasıl mimarimize ekleyeceğiz ?
Genelde piyasada ToDO app tarzında bir çok örnek ve uygulama bulunuyor. Peki gerçekten SaaS olarak kullandığımızı uygulamalar bu kadar basit mi ? Bileşen sayısı arttıkça sunucu ile iletişim kurup bir çok kişinin aynı uygulamada çalışmasını sağlattığınızda verilerinin üzerindeki güncelleme yapmayı ve bu güncellemerin doğru şekilde kullanıcılara aktarılmasını nasıl sağlayacağız.
MİMARİ — 1
Önceki React Örnek Proje Mimarisi blog yazılarımı okuyanlar Aşağıdaki Container, Store, Component yapılarını daha iyi anlayacaklardır. Aşağıdaki grafikte Bileşenler → Container yapısı üzerinden yani (Uygulama İş Kurallarına göre) Sunucu ile iletişim kuracaklar.
Bu iletişim yönteminde XMLHttpRequest, Fetch veya GraphQL gibi yöntemleri Axios, ApolloGraphQL Client vb kütüphaneler üzerinden veya direk çağrımlar ile veriyi elde edip, bu veriyi GlobalClientStore iletecekler. Buradan da bu bilgiler ilgili bileşenlerde güncellenecektir.
Bu iletişim aslında temelde 3 şekilde gerçekleşiyor
- HTTP Request/Response
- WebSocket
- Server Sent Events
A. İstek Cevap (Request — Response)
Bizim HTTPRequest dediğiniz kısım İstek — Cevap üzerine kurulu AJAX isteği atılıp bunun üzerinden JSON ile haberleşme kavramı üzerinden kurgulanmış XMLHTTPRequest yöntemi , Web sayfalarının tümden yenilenmesi yerine şu an ki Web uygulamalarında olduğu gibi sadece ilgili parçaların güncellenmesini sağlayarak SPA(Single Page App) ortaya çıkmasına olanak sağlamıştır.
Bunun ile birlikte dünyadaki API’lerin büyük bir kısmının dışarıya açılmaya başladığı Twitter API, Facebook API vb.. başlayan API furyası tüm dünyada yayılmış, Web uygulamaları bu teknoloji üzerine kurgulanmış REST API’leri çağırarak işlerini gerçekleştirir olmuştur. Daha sonra geliştirilen bir teknolojide GraphQL’dir. REST’in bir çok aksiyonu yerine (Post, Get, Put, Patch vb..) Frontend çağrımlarının sadece Post ile yapan ama aslında giden gelen Body objesinde Şemalar ile Query(Sorgularımız) ve Mutation(Değişikliklerimizi) daha dinamik yapılabildiğimiz bir iletişim yöntemi olan GraphQL geliştirilmiştir.
Ekstra Okuma Linkleri:
- REST konusunu bilmeyenler REST Nedir ? (Richardson Maturity Model) yazısını okuyabilirler.
- Internet Ağ Kavramları 5.3 bölümü olan REST vs GraphQL okuyabilirsiniz.
- React State Management Yöntemleri -2 blog yazısının 4. bölümü Apollo-Client ve GraphQL kullanımı bakabilirsiniz.
B Sunucu’daki Veriyi Client Side Güncelleme
Sunucu’daki herhangi bir veriyi belli güncelliğini sorgulayıp ekranda göstermek istediğiniz durumlar olabilir. Mevcut Mesaj sayısı, Oyunun son durumu, Borsanın Son durumu gibi. Bu verinin ClientSide güncellenesi için 3 yöntem kullanırız.
Long Polling: Belli aralıklar ile sunucundan Request/Response mantığı ile REST veya GraphQL ile veriyi sorgularız, ve Client’e gelen veriyle sürekli mevcut State güncelleriz
Web Socket: 2 yönlü bir iletişim kurmayı sağladığı için Socket üzerinden ilgili verinin güncel halini alabiliriz.
Server-Sent Events: Sunucudan gelen eventlerin tek yönlü Client gelmesi ve burada verinin güncel halini kullanmak şeklinde gerçekleşir.
C. Karşılıklı İletişim
Sunucu ile Client’lar arasında sürekli canlı bir iletişimin olduğu oyun, chat, collobrative çalışma örneğin (Whiteboard üzerine ortak bir şeyler geliştirme) , Birlikte kod yazma vs… Bu tarz yöntemler için genelde Web Socket tercih edilir.
Not: Global Store nasıl çalıştığı konusunda bir çok blog yazım bulunuyor. Bu blog yazılarına State Management listesinden erişip kullanabilirsiniz.
MİMARİ — 2 (React Query ve Apollo Client)
Bazı durumdarda Server State yönetimi kısmında bir çok ekstra iş yapmamız gerekir. Bunlar fetching, caching, synchronizing and updating server state. Her bir fonksiyonalitenin kendi içerisinde ayrı ayrı bir çok detayı bulunmaktadır. İşte bu konuların soyutlanması durumunda ortaya çıkan grafik bu şekilde.
Fakat bu işleri gerçekleştiren React Query ve Apollo Client mimari bu işi daha fazla üzerine alarak genelde Global/Client Stores Client işleri hariç devreden çıkan bir yapı haline getirip sadece UI içerisindeki iletişimleri yani bir düğmeye basıldı, bir bileşenin gösterilmesi, gizlenmesi, onun bir noktaya Scroll etmesi gibi işlere odaklanması gerektiğini düşünüyorlar.
Zaten Sayfa veya Nested Sayfa dediğimiz veya Scrolling ile bir content ulaşmak istediğimiz UI etkileşimlerinide Global State değilde URL üzerinden yani React Router gibi Route üzerinden işleyen mekanizmalar üzerinden kurguluyoruz. Bu durumda Global/Client Stores dediğimiz kütüphanelerin işlevi oldukça küçülüyor. Mimari biraz daha aşağıdaki yapıya dönüşüyor. Hatta şu anda React Router sayfa yönlendirmelerinde Data Fetching işlemlerine girdiği için ReactQuery katmanına da yaklaşmış oluyor.
- React Query
- Apollo Client
- SWR, vb… kütüphaneler kullanılıyor.
Günümüzde Hook’ların kullanımının artması HoC (High Order Component) Container ve Component daha az kullanılması sonucu HoC sadece Class Component özgü olmasada bileşen içerisinden direk use… kullanımları haline gelmiştir. Bu durumda yeni mimari yapı direk bileşenler üzerinden ortak kullanılan kütüphanelere, oralardan da direk ilgili bileşenlere aktarım şeklinde gerçekleşmektedir.
Yukarıda bulunan şekilde AppLogic/Container kavramına artık gerek kalmadı. Tabi bunun getirdiği bazı dezavatanjlarda var (Bileşenin Tekrar kullanılabilirliği anlamında) ama yeni yaklaşımlar bu şekilde. Artık bileşen lerimiz dışarıdan çağrılan logicleri daha çok biliyorlar. Bu durumda bileşenlerimiz biraz daha zekileşmiş oldu. Ya bu durumu
- ServerState Management
- ClientSide State Management
- Routing Management
için hiç bir kütüphane kullanmadan React Context ve WebAPI ve kendi useEffect içerisinde Axios vb.. kendi Cache yapılarımızı kurgulayacağız.
Veya bunlar için ServerState → (React Query, Apollo Client, SWR) , ClientState → (Redux, Mobx, Signal, Jotai, Zustand) , Routing için → (React Router, TanStack Location) benzeri kütüphaneler kullanacağız.
Bunlar sizin veya projenizin ihtiyaçlarına göre belirleyeceğiniz tercihler.
Okumaya Devam Et 😃
Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.
