Küçük HTML Parçalarını Birleştirerek Dev Uygulamalar Kurmak

Selamlar, Ben Alper. Bugün Web’in "Yapboz" Tarafını Konuşuyoruz

Yazılım dünyasında yıllardır süregelen bir tartışma var: Her şeyi devasa bir Single Page Application (SPA - Tek Sayfalı Uygulama) içinde mi toplamalıyız, yoksa eski usul ama modern dokunuşlara sahip Multi-Page Application (MPA - Çok Sayfalı Uygulama) yapısına mı dönmeliyiz? Bugün size bu ikisinin ortasında duran, "küçük parçaları birleştirerek büyük bir bütün oluşturma" sanatından bahsetmek istiyorum. Yani teknik tabiriyle Micro-frontends veya Hypermedia-driven yaklaşımları konuşacağız.

Bir projeye başlarken her şey çok güzeldir. Ancak proje büyüdükçe o devasa JavaScript dosyaları (bundle) şişer, derleme süreleri uzar ve ekip içindeki herkes birbirinin koduna basmaya başlar. İşte tam bu noktada, uygulamayı küçük HTML parçalarına (fragments) bölmek ve bunları dikişsiz bir şekilde birleştirmek (stitching) hayat kurtarıcı olabilir.

Neden Parçaları Birleştiriyoruz?

Büyük bir gemiyi tek parça inşa etmek yerine, modüler bölmeler halinde üretip limanda birleştirmek gibidir bu iş. Peki, bize ne sağlar? Modülerlik (Modularity) sayesinde her ekip kendi sayfasından veya bileşeninden sorumlu olur. Bir yerdeki hata, tüm sistemi çökertmez. Ayrıca Performans (Performance) açısından bakarsak, kullanıcı sadece o an ihtiyacı olan küçük HTML parçasını yükler; mega baytlarca JavaScript’in inmesini beklemez.

• Hızlı Geliştirme: Küçük parçalar üzerinde çalışmak her zaman daha kolaydır.
• Teknoloji Bağımsızlığı: Bir sayfa düz HTML/CSS iken, diğeri React veya Vue ile yazılmış olabilir.
• Bakım Kolaylığı: Hata ayıklama (debugging) süreci çok daha hızlı ilerler.

Küçük Sayfaları Birleştirme Yöntemleri

Peki, bu küçük parçaları nasıl bir araya getireceğiz? Birkaç farklı yolumuz var. Eskiden bu iş için IFrames kullanılırdı. Hala geçerli bir yöntem olsa da, SEO ve kullanıcı deneyimi açısından bazı zorlukları var. Bugün daha modern yaklaşımlara odaklanalım.

1. Sunucu Tarafında Birleştirme (Server-Side Stitching): Bu yöntemde, ana sayfanız sunucuda oluşturulurken diğer küçük parçalar (örneğin bir menü veya sepet özeti) farklı servislerden çekilir ve ana şablonun içine yerleştirilir. Edge-Side Includes (ESI) veya Server-Side Includes (SSI) bu işin atasıdır.

2. İstemci Tarafında Birleştirme (Client-Side Composition): Tarayıcı ana sayfayı yükler, ardından JavaScript yardımıyla belirli bölgelere (div'lere) diğer HTML dosyalarını veya bileşenlerini çeker. Burada en popüler yöntemlerden biri Micro-frontends mimarisidir.

Modern Bir Oyuncu: HTMX ve Turbo

Son zamanlarda benim de çok sevdiğim bir akım var: HTMX. Bu araç, "Neden sadece JSON dönüyoruz, neden doğrudan HTML dönmüyoruz?" diye soruyor. Bir butona tıkladığınızda tüm sayfayı yenilemek yerine, sadece değişmesi gereken kısmın HTML'ini sunucudan isteyip (AJAX ile) mevcut sayfanın içine "enjekte" ediyorsunuz. Bu, kullanıcıya bir SPA hızı verirken, geliştiriciye düz HTML sayfalarıyla çalışma rahatlığı sağlıyor.

Aynı şekilde Basecamp ekibi tarafından geliştirilen Turbo (Hotwire) da benzer bir mantıkla çalışıyor. Sayfalar arası geçiş yaparken sadece değişen kısımları güncelleyerek, navigasyon (navigation) işlemlerini inanılmaz akıcı hale getiriyor. Bu yöntemle, aslında birbirinden bağımsız bir sürü küçük HTML sayfasını birer etkileşim makinesine dönüştürebiliyorsunuz.

Etkileşim ve Navigasyon Nasıl Yönetilir?

Küçük sayfaları birleştirirken en büyük sorun "durum yönetimi" (state management) ve navigasyondur. Kullanıcı bir butona bastığında adres çubuğu değişmeli mi? Geri tuşuna basınca ne olacak? İşte burada Browser History API devreye giriyor. Modern araçlar, siz arka planda HTML parçalarını değiştirirken, kullanıcının ruhu duymadan adres çubuğunu da güncelleyebiliyor.

İletişim (Communication): Parçalar birbirine nasıl haber verecek? Örneğin, "Sepet" parçası, "Ürün Listesi" parçasındaki bir tıklamadan nasıl haberdar olacak? Bunun için Custom Events (Özel Olaylar) kullanıyoruz. Tarayıcının kendi olay sistemini kullanarak parçalar arasında hafif bir mesajlaşma ağı kurabiliyoruz.

Sonuç Olarak

Her proje devasa bir React veya Angular kurulumu gerektirmez. Bazen en iyi çözüm, işi küçük, yönetilebilir ve kendi başına çalışan HTML sayfalarına bölmektir. Bu sayfaları akıllıca birleştirerek hem geliştirme sürecinizi hızlandırabilir hem de kullanıcılarınıza yağ gibi akan bir deneyim sunabilirsiniz. Unutmayın, en iyi kod, en kolay yönetilebilen koddur.

Bir sonraki yazımda bu parçaları Docker üzerinde nasıl dağıtabileceğimizi konuşuruz. O zamana kadar, kodunuz temiz, kahveniz taze kalsın!