"The Modern Monolith" sloganı ile duyurulan Inertia.js, ortaya koyduğu yeni yaklaşım ile SPA (Single Page Application) geliştirme sürecindeki bazı zorluklara çare bulduğu iddiasında.
SPA nedir?
Single page application tabirinin kısaltması olarak kullanılan SPA da temel yaklaşım; html, CSS ve Javascript paketini tek bir yükleme ile kullanıcıya sunmak ve kullanımda ihtiyaç duyulacak veri akışını, ihtiyaç duyulduğu zaman sunucudan arka planda gerçekleştirmektir. Bu yaklaşımda kullanıcı ile etkileşim sırasında tam sayfa yüklemesi yapılmadığından dolayı kullanıcı kesintisiz bir uygulama kullanma deneyimi yaşar. İyi tasarlanmış bir SPA, uygun görsel işaretlerle birlikte kullanıldığında kullanıcı deneyimini bir üst seviyeye taşırken, yalnızca ham veri aktarımı için sunucu ile iletişim kurulduğundan dolayı internet bant gereksinimi de azalmaktadır. Bu, aynı zamanda sunucu yükünü de azaltır.
Eğer web application geliştirme süreçlerine aşina iseniz, SPA uygulamalarında genel olarak backend (arkayüz) ve frontend (önyüz) modüllerinin birbirinden ayrılarak soyutlandığını bilirsiniz. Bu yaklaşımda klasik session state bazlı geliştirme terkedilmekte ve önyüz ile arkayüz arasında genelde api token bazlı stateless bir iletişim sağlanmaktadır. Bu durumda iki temel zorluk ortaya çıkar. Bunlardan ilki kullanıcı oturumunun yönetimi, diğeri ise route ve endpoint'lerin bakımıdır.
Kullanıcı oturumu ile ilgili zorluğu, önyüz için kullanılan çatıya uygun bir state management aracı ile çözmek mümkündür. İlk giriş sırasında sunucudan api token alınır, state değişkeni olarak saklanır. Sunucuya yapılacak sonraki talepler bu token kullanılarak yapılır. Eğer sunucudan token ile ilgili bir hata dönerse, state den token silinir, ve kullanıcı tekrar oturum açmaya yönlendirilir.
Route ve API endpoint'ler ise dikkatle ele alınması gereken bir konudur. Eğer SPA yöntemi tercih edilmişse, klasik anlayışa göre routing yine önyüzde yapılır. Route pattern ler belirlenir, bu patternlere göre ilgili önyüz bileşenleri (component) yüklenerek kullanıcıya sunulur. Bu bileşenler yüklendikten sonra kendi iç metodları ile gerekiyorsa sunucuya talep yaparak veri akışını başlatırlar. Sunucuya yapılacak veri çekme ve itme talepleri için arka yüzde de API route'ları oluşturulur. Bu durumda geliştiricilerin route bakımını hem önyüz hem de arkayüz için yapması gerektiğinden bahsedebiliriz.
Inertia ne için kullanılır?
Inertia yukarıda bahsedilen route'lar ve API oluşturma ile ilgili karmaşıklığı azaltmayı vaadediyor. Öncelikle belirtmek gerekir ki, Inertia ne arkayüz (backend) ne de önyüz (frontend) çatılar için ikame bir çözüm değil. Daha ziyade önyüz ve arkayüz arasında iletişime müdahalede bulunarak, SPA geliştirme sürecinde önyüzden kaynaklanan zorlukları giderme, ve arkayüz çatılarının kuvvetli olduğu route yönetimini önyüz içinde kullanabilme imkanı sağladığından bahsetmek mümkün.
Inertia hangi framework'leri destekliyor
Bu yazı hazırlandığı sırada Inertia, arkayüz için Laravel ve Rails çatılarını desteklerken, önyüz için ise React, Vue.js ve Svelte çatılarını destekliyordu. Community ile geliştirme sürecinde yeni adaptörlerin hazırlanması ve bu listenin genişletilmesi mümkün.
Inertia nasıl çalışır
Inertia, route yönetimini büyük ölçüde arkayüze bırakıyor. Bunu yaparken de oldukça akıllıca bir yöntem kullanılıyor:
- Eğer SPA uygulamada bir adresi ilk defa çağırıyorsanız, arkayüz size tüm html, css ve js paketini hazırlayıp gönderiyor. Tabii ki arkayüzde bunu yapan inertia'nın arkayüz adapter'ları. Bunu yaparken, yazdığınız adrese karşılık gelen rotada hangi bileşenin yüklenmesi gerektiği bilgisi ve bu bileşenlere aktarılacak veriler bir paket halinde istemciye gönderiliyor. İstemci tarafındaki Inertia bileşenleri burada gerekli önyüz bileşenlerini oluşturup, sunucudan iletilen verileri bu bileşenlere aktarıyor.
- Eğer siz uygulama içerisinde bir linke tıklarsanız, inertia önyüz bileşeni bu tıklamaya müdahil olarak, tam sayfa talebini, hedef adrese gerçekleştirilecek bir XHR request'ine çeviriyor. Bunu yaparken mevcut uygulama ile ilgili gerekli bazı bilgileri de bu request'e header bilgisi olarak ekliyor.
- Arkayüz kendisine gelen talepte eğer Inertia spesifik headerları görürse, istemciye HTML, CSS ve Javascript lerden oluşan paketi göndermek yerine sadece yüklenmesi gereken sayfa bileşeninin ismini ve bu bileşene aktarılacak bilgileri json olarak iletiyor.
- Önyüz'de request'e yanıt olarak gelen veriler inertia tarafından işlenerek gereken sayfa bileşeni yükleniyor ve veri paketi bu bileşene aktarılıyor.
Bu dört adım neticesinde kullanıcı ilk tam sayfa yüklemesinin ardından sonra bir daha tam sayfa yüklemesi yapmadan uygulamayı kullanmış ve SPA deneyimi yaşamış oluyor. Ayrıca bu kullanım sayesinde uygulamaya özel durumlar haricinde API endpoint geliştirme ihtiyacı ortadan kalkıyor. Fakat routing tamamen arkayüz'de yapıldığından dolayı standart SPA uygulamalarına göre sayfa geçişlerinin az da olsa daha uzun sürebileceğini unutmamak gerek.
InertiaJS resmi sayfasındaki demo uygulamaya şu adresten ulaşabilirsiniz: