- Bazı geliştiriciler, yüksek kaliteli uygulamalar geliştirmek için SPA framework'lerinin (React, AngularJS vb.) zorunlu olduğunu düşünüyor
- Ancak SPA'dan önce de MPA tabanlı uygulamalar harika bir kullanıcı deneyimi sunuyordu
- Ben de HTMX kullanarak veri odaklı, MPA tabanlı bir gözlem platformu geliştirmeyi denedim; uygun optimizasyonlarla sunucu tarafında render edilen MPA'lerde de üstün performans ve kullanıcı deneyimi sunmak mümkün
MPA ile ilgili yanılgılar ve gerçekler
Yanılgı 1: MPA'ler sayfa geçişlerinde yavaştır
- Sorun: Tarayıcı, varsayılan olarak her sayfa geçişinde JavaScript ve CSS'yi yeniden indirdiği için
- Çözüm:
- Yalnızca HTML
body'sini değiştirmek için PJAX, Turbolinks, HTMX Boost gibi kütüphaneler kullanılabilir
- Service Worker kullanarak sayfa önbellekleme ve istek işleme iyileştirilebilir
- Örnek: Service Worker uygulandığında
DOMContentLoaded süresi 2,9 saniyeden 500 ms'ye düşüyor
Service Worker nasıl uygulanır
sw.js dosyasını oluşturun: önbellekleme ve ağ isteklerini yönetecek script'i yazın- Önbelleğe alınacak dosya listesini tanımlayın: HTML, CSS, JS gibi temel varlıkları belirtin
- Önbellekleme stratejisini ayarlayın: statik varlıkları kalıcı olarak önbelleğe alın veya düzenli olarak yenileyin
Yanılgı 2: MPA'ler offline çalışamaz ve ağ geri geldiğinde istekleri saklayamaz
- Service Worker kullanılarak uygulama offline durumdayken de çalıştırılabilir
- Workbox kullanımı:
- Ağ hatası olduğunda istekleri önbelleğe alır ve en fazla 24 saat içinde yeniden dener
- Offline handler ayarlayarak istek sırasında alternatif içerik sunabilir
Yanılgı 3: MPA'lerde sayfa geçişlerinde ekran titremesi olur
- Çözüm:
- Service Worker ve preload API ile varlıklar hazır olana kadar ekranın çizilmesi geciktirilebilir
- 2019'dan beri tarayıcılar, aynı domain içindeki geçişleri titreme olmadan işliyor
Yanılgı 4: MPA'lerde gösterişli sayfa geçiş efektleri yapılamaz
- SPA'ler sayfa geçiş animasyonlarıyla tanınıyor olsa da tarayıcılar da bunu desteklemeye başladı
- Chrome 126 ile yalnızca CSS kullanarak belgeler arası geçiş animasyonları yapılabiliyor
- Demo bağlantısı
Yanılgı 5: HTMX veya MPA'de tüm kullanıcı işlemleri sunucuda işlenir
- HTMX, yalnızca bazı işlemlerin sunucuda işlenmesi için tasarlanmıştır
- Gerektiğinde WebComponents veya JavaScript framework'leriyle istemci tarafı interaktif özellikler eklenebilir
- Yalnızca belirli bileşenlerde SPA yaklaşımı uygulanabilir
Yanılgı 6: DOM manipülasyonu yavaştır; bu yüzden React/Virtual DOM gerekir
- Virtual DOM, yalnızca aşırı karmaşık uygulamalarda performans farkı gösterir
- Çoğu sıradan uygulamada DOM'u doğrudan manipüle etmek yeterince hızlıdır
- Kaynak: "Virtual DOM is pure Overhead"
Yanılgı 7: Küçük interaktif özellikler için bile JavaScript gerekir
- Modern tarayıcı teknolojileriyle JavaScript olmadan da çeşitli özellikler uygulanabilir
- HTML checkbox ve CSS ile toggle işlevi yapılabilir
- HTMX ile birleştirildiğinde tıklamayla veriler asenkron olarak yüklenebilir
Son yanılgı: SPA olmadan istemci tarafı kod spaghetti code'a dönüşür
- Spaghetti code döneminde de pek çok üretken yazılım geliştirildi
- Erken MVP aşamasında daha basit bir yapı daha avantajlı olabilir
Sonuç
- 2024 itibarıyla tarayıcılar, SPA devriminden öğrendiklerini içine alarak büyük ilerleme kaydetti
- Yalnızca temel tarayıcı araçlarıyla (HTML, CSS, JavaScript) interaktif ve offline çalışabilen uygulamalar geliştirilebilir
- Tarayıcının potansiyeline yeniden güvenip ondan tekrar yararlanmayı öneriyorum
8 yorum
Vasat geliştiricilerle geliştirmenin nasıl olduğunu biraz deneyince bunun ne kadar hayal dolu bir laf olduğunu hemen anlarsınız. Bunu yazan kişi ya dâhilerle çevrilidir ya da tek başına çalışıyordur gibi... (Eskimiş AngularJS'den hâlâ bahsetmesine bakınca da öyle.) Ayrıca geliştirme işi sadece dâhilerle yapılmıyor.
Birileri bunu "aynı tiplerin kendi aralarında toplanması" diye küçümseyebilir ama değişim her zaman sıradan insanlar tarafından gerçekleştirildi.
Böyle şeyleri görünce aklıma ilk gelen, htmx'in asla benimsenmemesi gerektiği oluyor.
Bu son zamanlarda durmadan gündeme gelen bir konu, Rich Harris'in birkaç yıl önce bu konudaki görüşünü anlattığı bir video var. https://www.youtube.com/watch?v=860d8usGC0o&t=635s
Yanlış hatırlamıyorsam, partial HTML tabanlı güncelleme yöntemlerinin ekran ile veri arasında tutarsızlık oluşma ihtimali olduğu şeklinde özetlenebilir.
Hâlâ tarayıcı spesifikasyonlarına inanıyor musun...?
Zorlasak, SPA’nin tarayıcı davranışına görece daha az bağımlı bir uygulama geliştirme yöntemi olduğunu düşünüyorum.
Tarayıcılar SPA’nin harika imkânlarına epey yetişti ve bunun HTTP’nin başlangıçta tasarlanmış iletişim biçimine daha uygun göründüğü doğru; ama bence bu biraz da Chrome’un tarayıcı dünyasında fiilen tekel konumuna gelmesiyle elinin rahatlamasından kaynaklanıyor olabilir... Bunun gerçekten ne kadar süreceğinden emin değilim. İster bu rahatlık olsun, ister pazar payı...
phoenix liveview gibi websocket tabanlı, sunucudan DOM manipülasyonu yapan bir yaklaşım söz konusuysa paradigma farklı.
htmx kullandığımda ise sunucudan parçalanmış HTML göndermek zorunda olmak pek hoş gelmemişti.
Özellikle CSS tarafında class belirleyip gönderdiğinizde, sunucu açısından ekranda kullanılan CSS’yi bilmek mümkün olmadığından fiilen ortak CSS’yi dayatan bir his veriyor.
Birkaç yıl önce Phoenix LiveView ile biraz karmaşık bir UI yapmıştım ama basit etkileşimleri uygulamak bile çok zahmetliydi ve tek bir LiveView tek bir Elixir process’i tarafından işlendiği için yan taraftaki bileşenle etkileşim kurmak çok zordu. Sonunda vazgeçip React’e geri döndüğümü hatırlıyorum.
Bence LiveView gelecek gibi görünüyor…
liveview de ağa fazlasıyla bağımlı olduğundan, sunucu uzaktaysa ping yüksek olduğunda ya da üçüncü dünya gibi internet altyapısının iyi olmadığı yerlerde zayıf yanı oldukça büyük oluyor.
Hacker News görüşleri
Tarayıcı önbelleği kullanılarak statik CSS ve JS varlıklarının nasıl yönetileceğinden yazıda neden bahsedilmediğini merak edenler var. Geçmişte bir alışveriş sitesini MPA yöntemiyle kurduklarında sayfa geçişlerinin neredeyse fark edilmediğini söyleyen bir görüş var
PHP ve jQuery dönemindeki web geliştirmenin en üretken dönem olduğunu savunanlar da var. React gibi modern teknolojilere kıyasla geçmişteki paradigmanın daha üretken olup olmadığını sorgulayan bir görüş bulunuyor. Amazon veya Steam gibi büyük siteler de hâlâ sunucuda HTML render edip üzerine JS ekleme yaklaşımıyla oluşturuluyor
Service Worker stratejisinin mevcut HTTP cache header'larına kıyasla hangi açılardan daha iyi olduğuna dair açıklama isteyen bir görüş var. Ağ gidiş-dönüşlerini azaltabildiği kabul edilse de, küçük bir optimizasyon için her şeyi yeniden icat etmek gibi hissettirdiği söyleniyor
"You Can't Build Interactive Web Apps Except as Single Page Applications... And Other Myths" başlığının atlanan kısmı nedeniyle tıklama almaya yönelik hissettirdiği belirtiliyor
Programlamadaki en tehlikeli şeyin geliştiricinin can sıkıntısı ve geçmişe dair bilgisizliği olduğu söyleniyor
Node.js web sunucuları çağında sunucu tarafı ile istemci tarafı (SPA) arasında neden böyle bir ikili ayrım olduğunu anlamadığını söyleyen bir görüş var. Sunucuda işin büyük kısmı başlatılıp istemciye serileştirilerek bunun SPA gibi çalıştırılıp çalıştırılamayacağı soruluyor
SPA ile MPA'nın birbirine karşıt iki kamp gibi görüldüğü, ancak bunun web stack'i doğal biçimde kullanmak ile "hack" yaklaşımı olarak ayırmanın daha doğru olduğu söyleniyor. SPA şu anda hack yaklaşımı gibi dursa da geçmişte CGI, Java applet'leri ve Flash vardı. Hack yaklaşımının, doğal yöntemin sınırlarını genişletme işlevi gördüğü ifade ediliyor
Teknoloji yığını kararından önce, geliştiricilerin çoğu zaman ne yazdıklarını yanlış anladıkları söyleniyor. Yüksek düzeyde etkileşim gerekmiyorsa çoğu durumda sunucu tarafı framework'lerin yeterli olabileceği belirtiliyor
"Tek sayfa uygulaması değilse etkileşimli web uygulaması yapılamaz" mitine karşı çıkan bir görüş de var. SPA'nın daha fazla kontrol sunduğu ve kodun bazı bölümlerini yeniden işleme olasılığını azalttığı söyleniyor
HN başlığının gerçek başlığa göre daha saldırgan olduğu belirtiliyor. Bunun, Tony Alaribe'nin BigSkyDevCon'da sunduğu bir denemeye dayandığı; SPA olmayan web uygulamalarını hızlı ve akıcı hâle getiren teknikleri ele aldığı ifade ediliyor. Yeni teknikler tanıttığı ve konferanstaki en iyi sunum olduğu düşünüldüğü de ekleniyor