HTML ve Web Bileşenleriyle Uyumlu SPA Yönlendirme Çözümü
HTML ve Web Bileşenleriyle SPA Router iddiası ne anlatıyor? Bir yönlendirici oluşturmak için yola çıkmadım. HTML ve Web Bileşenleri ile oluşturulmuş bir projem vardı. İşe yaradı ve bu yığından memnun kaldım. Daha sonra birkaç bölümde istemci…
HTML ve Web Bileşenleriyle SPA Router iddiası ne anlatıyor?
Bir yönlendirici oluşturmak için yola çıkmadım. HTML ve Web Bileşenleri ile oluşturulmuş bir projem vardı. İşe yaradı ve bu yığından memnun kaldım. Daha sonra birkaç bölümde istemci tarafında gezinmeye ihtiyaç duyuldu. SEO ve ilk oluşturma için çoğu sayfanın HTML öncelikli kalması gerekiyordu, bu nedenle sitenin tamamını React’ta yeniden yazmak mantıklı değildi. O bölümlere sadece React’ı ekledim.
Yönlendirme problemini çözdü ama artık aynı projede React ve Web Components vardı. Her iki yığının da bakımını yapmak yeni sorun haline geldi. Sorun React değildi; kombinasyondu. Bir noktada daha basit bir soru sormaya başladım: Tarayıcının zaten bir bileşen modeli varsa, SPA navigasyonunu elde etmek için neden ikinci bir modele ihtiyacım olsun ki?
HTML ve Web Bileşenlerini, değiştirilmeyi bekleyen eski işaretleme olarak değil, uygulama olarak ele alan bir yönlendirici istedim. Aklımdaki modele uygun bir şey bulamayınca Aura Router’ı kurmaya başladım. Kullanım senaryosu netti: ikinci bir bileşen modeli eklemeden mevcut bir HTML veya Web Bileşenleri projesine SPA navigasyonu eklemek.
Tasarım ve teknik ayrıntılar
Atmak istemediğim kısım, mevcut HTML ve Web Bileşenleri yığınıydı. Yönlendiricinin bu yığına uyması gerekiyordu, onu değiştirmesi değil. Pratikte şu kurallar öne çıktı:
- Her genel URL sunucudan veya statik hosttan eksiksiz, dizine eklenebilir HTML döndürmeli.
- Rotalar HTML içinde Custom Element olarak bildirilmeli.
- Gezinme, JavaScript olmadan da çalışan sıradan
<a href>bağlantılarını kullanmalı. - Paylaşılan düzendeki Web Bileşenleri, yalnızca alt rota değiştiğinde bağlı kalmalı.
- Yönlendirici çerçeveden bağımsız olmalı.
Bu gereksinimler basit bir modele yol açtı: Ana bilgisayar sayfaları eksiksiz sunmaya devam eder. Aura, ekranda zaten bulunan HTML’yi yeniden kullanır ve işaretli bağlantıları yeni belge yüklemeden işler. İşaretlenmemiş bağlantılar normal tarayıcı davranışını korur.
Bugünden bakınca ne kadar güvenilir?
Canlı demoda “Canlı navigasyon kanıtı” şeridi, geçerli belgeye bir Yük Kimliği atar ve istemci geçişlerini sayar. “Nasıl çalışır”a tıkladığınızda URL ve başlık değişir, istemci geçiş sayacı artar; Yük Kimliği aynı kalır. Sayfayı yenilediğinizde Yük Kimliği değişir. Yani Aura görünümü değiştirmiştir ama tarayıcı yeni bir belge yüklememiştir.
JavaScript kapalıyken aynı gezinme sıradan sayfa yüklemelerine düşer; sayfalar ve bağlantılar yine çalışır. “Sayfa kaynağını görüntüle” ile de içerik zaten yanıtta görünür — demo boş bir kabuk değildir.
Kod tarafında mevcut bağlantılar href değerlerini korur. İstemci navigasyonu istenen bağlantıya bir özellik eklenir:
<a href="/about/" data-link>Hakkında</a>Rotalar HTML’de Custom Element olarak bildirilir. path hangi URL ile eşleşeceğini, view o rotanın ne yükleyeceğini tanımlar:
<aura-route path="/" view="/pages/home.html"></aura-route>
<aura-route path="/about/" view="/pages/about.html"></aura-route>
<aura-route path="/workspace/*" view="/layouts/workspace.html"></aura-route>Okuyucu için pratik anlamı
Aktif görünüm için hedef alan şöyle kalır:
<main id="content">
<h1>Ana Sayfa</h1>
</main>Paketi yüklemek için:
npm install --save-exact @auraui/router@0.1.0JavaScript’te Aura’nın Custom Element’lerini kaydedin:
import { AuraRouter } from "@auraui/router";
AuraRouter.install();Görünüm bir HTML sayfasına işaret ettiğinde isteğe bağlı ayıklama seçicisi yanıtı tek bir öğeye daraltır. İlk yüklemede Aura, eşleşen #content öğesini yeniden indirmek yerine belgede zaten bulunanı benimser.
Paylaşılan Web Bileşenlerinin alt rota değişiminde yeniden bağlanmasını önlemek için Aura, ortak arayüzü ana düzende tutar ve alt rotaları kendi çıkışına (outlet) yazar:
<aura-layout path="/workspace/*">
<workspace-sidebar></workspace-sidebar>
<aura-outlet></aura-outlet>
</aura-layout>Navigasyon /workspace/ içinde kaldığında eşleşen ana düzen bağlı kalır; yalnızca yuvalanmış çıkış değişir. İç içe demoda Düzen Kimliği sabit kalırken alt içerik değişir — Web Bileşenleri için kritik nokta budur.
Sınır da net: sunucu veya statik host ilk yanıtın sahibidir. Doğrudan iç içe bir URL açıldığında ana düzen + outlet + alt içerik sunucudan gelmelidir; Aura bu arka uç işaretlemesini üretmez.
Aura Router şu an 0.1.0. Çekirdek navigasyon, ilk boyanın benimsenmesi ve iç içe yerleşimler çalışıyor; genel API 1.0 öncesi değişebilir. Tam sürümü sabitlemenizi öneririm. Bu yazı modelin nedenini ve temel akışı anlatıyor; API oturdukça daha derin bir kılavuz gelecek.
Denemek için: canlı demo, StackBlitz, GitHub ve npm üzerindeki @auraui/router paketi. Mevcut bir HTML / Web Bileşenleri projesinde denerseniz geri bildiriminiz API’yi 1.0’a taşırken çok değerli olur.
Ek okuma: MDN Web Docs
İlgili yazılar
- Pinterest’in AWS Güvenliğinde Merkezi Terraform Çözümü
- Astro 7 ile Web Projelerinizde %61’e Kadar Daha Hızlı Derleme
Editörün Notu
HTML ve Web Bileşenleri kullanarak SPA yönlendirmesi, karmaşık kütüphane bağımlılıklarını azaltır ve projede daha tutarlı, sürdürülebilir bir yapı sağlar; bu yaklaşım, modern tarayıcıların sunduğu yerel özelliklerden maksimum verim almayı mümkün kılar.
