Aslında bu yazı, modern geliştirme süreç ve araçlarının bana tam anlamıyla ideal gelmemesi, ancak eski usul geliştirme yöntemlerinin de modern standartlara göre yetersiz kalmasından duyduğum hayal kırıklığından doğdu. Inertia.js’i keşfettikten sonra bu hayal kırıklığı yerini, web geliştirme konusunda yeniden heyecan duyduğum bir sürece bıraktı.
Inertia.js gerçek zamanlı web uygulamarı geliştirmek için en iyi araçlardan birisi ve her ne kadar ölçek olarak büyük gerçek bir uygulamada kullanmamış olsamda web geliştirme için en uygun araçlardan biri olduğu inancına sahibim ve umarım Inertia.js olmasa bile benzer araçlar ve teknolojileri daha çok görebiliriz. Bu yazıda aslında Inertia.js’i neden tercih ettiğimi ve belki sizin içinde neden doğru tercih olabileceğinden bahsedeceğim. Ama Inertia.js’e gelmeden önce hangi aşamalardan geçerek bu noktaya geldiğimizden bahsetmek yerinde olabilir.
Table of contents
Open Table of contents
Web Geliştirme Yolculuğum
2000’lerin başında tasarımcı olarak başlayan kariyerimle birlikte hızlı bir şekilde frontend geliştirmeye geçiş yaptım.Yolculuğum HTML ile başladı, CSS’in yaygınlaşmasıyla birlikte web geliştirme bence ileri yönde sıçramalarından birini yaşamış oldu.
O dönemde JavaScript, bugünkü popülaritesinden çok uzaktaydı; dinamik sayfalar geliştirmek için o zamanlar da kullanılıyor olsada günümüze kıyasla çok kısıtlı bir kullanım alanı vardı. Açıkcası JavaScript geliştiricileri gerçek geliştirici olarak bile kabul görmüyordu.
JavaScript’in Yükselişi
JavaScript’in potansiyeli, bence jQuery’nin çıkışıyla ortaya çıktı. jQuery’den önce, moo.fx gibi prototype.js eklentileriyle işleri daha dinamik hale getirmeye çalışıyordum. Ardından mootools geldi, ancak jQuery kadar popüler olamadı. Server-side rendered sayfalarla jQuery kullanmak eskiye nazaran gerçekten harika bir deneyimdi.
2014 yılları civarında Vue.js ile tanıştım. O dönemler Vue.js sadece sayfasının belirli bir kısmına entegere edebildiğiniz ve dinamik hale getirebildiğiniz bir araçtı. Aynı sayfa içerisinde değişik kısımlara minik Vue.js uygulamarınızı mount edebiliyordunuz. Açıkcası harika bir deneyimdi. Bu, Laravel kullandığım dönemde oldukça kullanışlı bir yöntemdi ve Vue.js’in popülerliğinin artmasında Laravel ekosisteminin adaptasyonunun büyük etkisi oldu. Bu süreçten sonra JavaScript’in çılgınca yükseldiği döneme tanık olduk. Node.js, sonrasında React ve Vue gibi kütüphanelerle birlikte, bir zamanlar küçümsenen JavaScript, günümüzün en popüler ve tercih edilen dillerinden biri haline geldi. Tabi bundan önce angular.js, emberjs ve benzer birçok frameworklerin katkısı olsada benim için yükselişini temsil eden şeyler yukarıda bahsettiğim süreçler oldu.
SPA Eğemenliği & Alternatifler
Günümüzde web uygulamaları denilince genelde akla SPA’lar geliyor. Server-side rendered sayfalar, geçmişe kıyasla popüleritisini yitirdi. Bu da genellikle backend API geliştirme ve üzerine SPA yapısında bir frontend kurmanız gerektiği anlamına geliyor. Routing ve oturum yönetimi yine SPA’ler üzerinden yürütülüyor.
Alternatifler olarak, Alpine.js, Livewire veya htmx gibi araçlar doğdu. Bu araçlar, server-side rendered uygulamalara dinamik özellikler kazandırmada harika iş çıkarıyor. Ancak büyük kuruluşlar tarafından tercih edilmediği için çok fazla geliştiriciye ulaştıkları söylenemez ve bu nedenlede çok popüler değiller.
Hibrit yaklaşım: Inertia.js
SPA geliştirme süreçleri, genellikle iki ayrı uygulama geliştirmeniz gerektiği anlamına gelir; backend API ve frontend SPA. Hatta bazı durumlarda, bu yapılar üzerinde farklı ekipler bile çalışabilir. Ancak, özellikle küçük takımlar için bu yapı pek verimli olmayabilir. İşte bu noktada hibrit bir çözüm olarak Inertia.js karşımıza çıkıyor. Inertia.js, Rails veya Laravel gibi backend framework’lerinin standart view’lerini SPA view’leri ile değiştiren bir yapı sunuyor. İlk istek sırasında, backend SPA’nin ana HTML dosyasını render eder ve gerekli verileri sağlar. Eğer istek bir Inertia isteği ise backend, JSON formatında yanıt döner.
Inertia.js Nedir ve Nasıl Çalışır?
Inertia.js, modern uygulamalar geliştirmek için bir framework değil, bir adaptördür. React, Vue veya Svelte gibi frontend framework’leri ile Rails veya Laravel gibi backend framework’leri arasında bir köprü görevi görerek, tam bir SPA deneyimi sağladığını söyleyebiliriz. Geleneksel server-side uygulama yapısını bozmadan SPA’ya benzer bir kullanıcı deneyimi sağlar.
Kısaca Inertia.js:
- SPA olmadan SPA deneyimi sunar.
- React, Vue veya Svelte gibi modern framework’lerle sunucu tarafı framework’ler arasında geçiş yapmanıza olanak tanır. Laravel veya Rails gibi backend framework’lerin view’lerini kullanırmış gibi, frontend tarafında SPA view’leri oluşturabilirsiniz.
- SEO dostudur ve indekslenebilirliği artırır.
Her ne kadar Laravel veya Rails’ten bahsetmiş olsam da, kullanabileceğiniz backend yapısının bir sınırı yok. Kullandığınız backend’in mutlaka resmi bir Inertia.js adaptörüne sahip olması gerekmez; bunu kendiniz de entegre edebilirsiniz. Özellikle Vite kullanıyorsanız HMR desteği ile bir SPA geliştirmekten farksız bir geliştirme deneyimine sahip olabilirsiniz.
Vite’ın bu rehberini okuyarak istediğiniz backend’e entegre edebilirsiniz.
Şu sıralar Axum ile Rust backend geliştirirken Inertia.js ile frontend geliştirmeyi deneyimliyorum ve harika bir deneyim olduğunu rahatlıkla söyleyebilirim.
pub async fn dashboard(inertia: Inertia) -> impl IntoResponse {
inertia.render("Home", json!({}))
}
Aslına bakılırsa bu render methodunun yaptığı çok özel bir iş değil. Eğer yapılan istek asenkronsa ve X-Inertia header’ına sahipse JSON response vermekte ve json!({"mykey": "myvalue"}) methodu içerisinde tanımladığımız JSON ile cevap vermekte eğer değilse SPA için tanımladığımız index.html’i render ederek yukarıdaki JSON’ı bir data attribute’ü olarak index.html içerisine eklemekte.
Bu sayede routing, authentication, session yönetimi gibi kısımları tamamen backend’e bırakıp sevdiğim frontend framework’ü ile geliştirme yapabilirim. Hızla değişen frontend dünyasında özellikle routing, authentication gibi kısımların backent tarafında olması bence çok büyük bir avantaj.
Bu temel avantalar yanında size sunduğu birçok avantaj ve özellik bulunmakta. Dilerseniz backend adaptörünüz üzerinden paylaşılan veriler veya her sayfa yüklendiğinde belirli verileri her zaman frontend gönderebilirsiniz. Örneğin session veya kullanıcı bilgileri bunun için güzel örnekler ama spesifik bir patern izlemenize gerek yok ve sizi dikte etmiyor. Bu yüzden dilerseniz frontend katmanında da state’lerinizi yönteleyebilirsiniz.