İçeriğe geç
JSkelet
EN

Bir isteğin yolculuğu

Sunucudan ekrana, beş net durak.

Kara kutu yok. Her adım okunabilir, değiştirilebilir ve tek başına anlaşılabilir.

  1. İstek kapıdan girer

    Express 5 güvenlik başlıklarını, yönlendirmeleri ve statik dosyaları belirli bir sırayla işler. Akış görünür ve belgeli; gizli sihir yok.

  2. Sıcak HTML aranır

    HIT ise hazır sayfa anında döner. TTL'e yaklaşınca arka planda yenileme başlar, ziyaretçi yine HIT alır; TTL sonrası mevcut HTML STALE gider ve yeniden üretim arkada koşar.

  3. Veri tek yerde toplanır

    Düz bir async controller görünümü, veriyi ve metadata'yı döndürür. Okuması kolay, framework töreni yok.

  4. Sayfa birleştirilir

    EJS gövdeyi ve layout'u eksiksiz HTML'e dönüştürür. Küçük fonksiyon bileşenleri sayfalarda ve fragment'larda aynı şekilde kullanılabilir.

  5. Gereken parça canlanır

    Tarayıcı yalnızca görünen island'ın modülünü indirir ve davranışı bağlar. JavaScript hiç gelmese bile içerik okunabilir kalır.

Island sözleşmesi

Sayfayı değil, ihtiyacı olan parçayı canlandır.

Sunucu görünümü tamamlar. Island küçük bir davranış katmanı ekler. Bağlantı kopsa bile içerik yerinde kalır.

  • Varsayılan strateji görünürlük: gözlemci 200px önceden indirmeye başlar.
  • Bir attribute island'ı global davranışlar için hemen bağlar, bir diğeri tarayıcı boşalana kadar erteler.
  • Props işaretlemede JSON olarak taşınır; sunucu verisi ikinci kez çekilmez.
  • Bir mount fonksiyonu temizleme fonksiyonu döndürebilir.
views/pages/pricing.ejs
<div
  data-island="pricing-calculator"
  data-island-props='{"currency":"USD"}'
>
  <!-- the pricing table HTML came from the server -->
  <table data-seats-table>...</table>
</div>
client/islands/pricing-calculator.js
import { on, qs } from "jskelet/client";

export function mount(element, props) {
  const input = qs(element, "[data-seats]");

  return on(input, "input", () => {
    // The table markup came from the server;
    // the island only updates the number.
    paint(element, Number(input.value), props.currency);
  });
}

Karşılığı

Bu üç karar pratikte ne getiriyor

Minimal ve hızlı

Tam HTML sunucudan. React runtime yok, hydration şelalesi yok — yalnızca bir içerik sayfasının ihtiyaç duyduğu baytlar.

Modüler

Menü, sayaç veya grafik kendi island'ında yaşar. Modülü yalnızca görünür olunca iner.

Geliştirici odaklı

Düz async controller, EJS şablon ve küçük bir API. Tören olmadan okunur, drama olmadan değiştirilir.

Kıyasla ve ölç Belgeleri oku