HTML ve Web Bileşenleriyle Uyumlu SPA Yönlendirme Çözümü
HTML ve: 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…
HTML ve: 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 Tepki değildi. Kombinasyon şöyleydi. 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. Bir tane aradım. Aklımdaki modele uygun hiçbir şey bulamadım bu yüzden Aura Router’ı kurmaya başladım. Aura’nın kullanım durumu bu oldu: 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.
Uygulamada bu şu anlama geliyordu: Her genel URL’nin yine de sunucudan veya statik ana bilgisayardan eksiksiz, dizine eklenebilir HTML döndürmesi gerekir; rotalar HTML’de Cust olarak bildirilmelidir om Elementler; gezinme, JavaScript olmadan da çalışan sıradan bağlantılarını kullanmalıdır; Paylaşılan düzenlerdeki Web Bileşenleri, yalnızca alt rota değiştiğinde bağlı kalmalıdır; Yönlendirici çerçeveden bağımsız olmalı ve Özel Öğelerin çalıştığı her yerde kullanılabilir olmalıdır.
Bu gereksinimler basit bir modele yol açtı: Ana bilgisayar, sayfaları eksiksiz olarak sunmaya devam ediyor. Aura, ekranda zaten mevcut olan HTML’yi yeniden kullanabilir ve ardından yeni bir belge yüklemeden işaretli bağlantıları işleyebilir. İşaretlenmemiş bağlantılar normal tarayıcı davranışlarını korur. Fikir buydu. Ancak yine de tarayıcının sayfayı yeniden yüklemediğini kanıtlamanın bir yoluna ihtiyacım vardı.
Bugünden bakınca ne kadar güvenilir?
Bu yüzden demoyu tam olarak ne olduğunu gösterdim. Doğrulayabileceğiniz bir demo Canlı demoyu açın ve Canlı navigasyon kanıtı etiketli şeride bakın. Geçerli belgeye bir Yük Kimliği atar ve istemci geçişlerini sayar. Nasıl çalışır’ı tıklayın. URL değişir. Başlık değişir. İstemci geçiş sayacı artar. Yük Kimliği değişmez. Şimdi sayfayı yeniden yükleyin. Yük Kimliği değişir.
Küçük bir deneydeki tüm fikir budur: Aura sayfayı değiştirdi ancak tarayıcı yeni bir belge yüklemedi. En az benim kadar önemsediğim bir sınav daha var. JavaScript’i devre dışı bırakın, demoyu yeniden yükleyin ve aynı gezinmeyi kullanın. Geçişler sıradan sayfa yüklemeleri haline gelir ancak sayfalar ve bağlantılar çalışmaya devam eder. Sayfa Kaynağını Görüntüle’yi de kullanabilirsiniz.
İçerik zaten yanıtta; demo boş bir uygulama değil işlenmeyi bekleyen kabuk. Bunun kodda nasıl göründüğü Mevcut bağlantılar hreflerini korur. Bir bağlantının istemci navigasyonunu kullanması gerektiğinde bir özellik ekleyin: Hakkında Rotalar HTML’de bildirilir. path, bir rotanın hangi URL ile eşleştiğini tanımlarken view, o rotanın ne yüklemesi gerektiğini tanımlar.
Okuyucu için pratik anlamı
aktif görünüm için hedefi sağlar: Ana Sayfa
İlk sayfa yüklemesinde aynı ayıklama seçicisi kullanılır: Aura, geçerli görünümü yeniden yüklemek yerine, zaten belgede bulunan eşleşen #content öğesini benimser. Çalıştırılabilir örneğin tamamı StackBlitz’de ve 10 dakikalık izlenecek yolda mevcuttur. Bir sayfayı değiştirmek yalnızca ilk testti. Düz örnek, temel gezinmeyi çözer.
Ancak aynı zamanda paylaşılan Web Bileşenlerinin alt rota değişikliklerinden etkilenmemesini de istedim. Bir çalışma alanının yerel durum, olay dinleyicileri veya pahalı kurulum içeren bir kenar çubuğuna sahip olduğunu varsayalım. eğer o yalnızca alt URL değiştiğinde, kenar çubuğunun yeniden bağlanması bileşen örneğinin ve durumunun silinmesine neden olur.
Yeniden bağlanmayı önlemek için Aura, paylaşılan kullanıcı arayüzünü ana düzende tutar ve alt rotaları kendi çıkışına dönüştürür: Navigasyon /workspace/ içinde kaldığında, Aura eşleşen ana düzeni bağlı tutar ve yalnızca yuvalanmış çıkışı değiştirir.
Bunu iç içe demoda görünür hale getirdim. Açın, Düzen Kimliğini not edin ve ardından Ayarlar’a tıklayın. Alt içerik değişir ancak Düzen Kimliği değişmez. Web Bileşenleri için önemli olan kısım budur: Gezinme yalnızca alt görünümü değiştirirken örnekleri canlı kalabilir. Geçerli bir sınıra değinmeye değer: sunucu veya statik ana bilgisayar hala ilk yanıtın sahibidir.
Bugün, doğrudan iç içe geçmiş bir URL’nin ana düzeni, iç içe çıkışı ve alt içeriği döndürmesi gerekir; Aura bu arka uç işaretlemesini oluşturmaz. Neden 0.1’de yayınlamalısınız? Aura Router şu anda 0.1.0’da. Çekirdek navigasyonu, ilk boyanın benimsenmesi ve iç içe yerleşimler uygulanmış ve test edilmiştir, ancak genel API 1.0’dan önce hala değişebilir. Tam sürümü sabitlemenizi öneririm. C’yi test ettim biliyorum işte.
Şu anda önemsediğim boşluklar, oluşturmadığım projelerde ortaya çıkan boşluklardır: garip sunucu kurulumları, entegrasyon uç durumları ve HTML öncelikli modelin uymadığı yerler. Artık yayınlamak, bu geri bildirime API’yi 1.0’dan önce şekillendirme şansı veriyor. Bu yazı Aura’nın neden var olduğuna ve temel modelinin nasıl çalıştığına odaklanıyor.
Kılavuz, bugün mevcut olan API’yi belgelemektedir; 1.0’a doğru stabil hale geldikçe daha derin bir API kılavuzu yayınlamayı planlıyorum.
Aura Router’ı deneyin: Canlı demo — navigasyon davranışını doğrulayın StackBlitz — çalıştırılabilir projeyi keşfedin GitHub — kaynak, dokümantasyon ve sorunlar npm — @auraui/router yükleyin Aura’yı mevcut bir HTML veya Web Bileşenleri projesinde denerseniz, neyin işe yaradığını ve yolunuza neyin çıktığını bilmek isterim. Deneyiminizi yorumlarda veya GitHub Tartışmalarında paylaşın.
İ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
Ek okuma: MDN Web Docs
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.
