HTML Academy · Ders

Modül Federasyonunun Temelleri

Modül federasyonunun mikro ön yüz paylaşımını nasıl sağladığını anlayın

Modül Federasyonunun Temelleri, CoddyKit'te ücretsiz bir HTML Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, HTML Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. HTML Academy kursu toplamda 4 dersten oluşur.

Modül Federasyonu Nedir?

Modül Federasyonu, bir JavaScript uygulamasının çalışma zamanında bağımsız olarak dağıtılmış başka bir uygulamanın kodunu yükleyip çalıştırmasını sağlar. Webpack 5'te ortaya çıkan bu desen artık yerel içe aktarma haritaları ve dinamik içe aktarma ile de uygulanabilir.

Kullanım Alanı

Büyük kuruluşlar, monolitleri bağımsız olarak dağıtılan birden çok "mikro ön yüze" böler: bir kabuk ana uygulama ve birkaç özellik uygulaması. Modül federasyonu, kabuk uygulamanın bu özellikleri derleme zamanında birlikte paketlemeden isteğe bağlı olarak yüklemesini sağlar.

Webpack Federasyonu

Webpack 5'te ana uygulama, kullanılacak diğer uygulamaları remotes olarak tanımlar; uzak uygulamalar ise sunduklarını exposes olarak bildirir. Çalışma zamanı başlangıçta her uzak uygulamadan küçük bir bildirim dosyası getirir ve ana uygulama bunları içe aktardıkça parçaları indirir.

Yerel Karşılıklar

Webpack olmadan da aynı fikir, uzak ESM paketlerini gösteren içe aktarma haritaları ve yükleme için dinamik içe aktarma kullanılarak uygulanabilir. Ana uygulamanın içe aktarma haritası "feature-cart": "https://cart-team.example.com/entry.js" der; import("feature-cart") en yeni dağıtılan sürümü yükler.

<script type="importmap">
{
  "imports": {
    "feature-cart": "https://cart.example.com/v1/entry.js",
    "feature-checkout": "https://checkout.example.com/v2/entry.js"
  }
}
</script>

Paylaşılan Bağımlılıklar

Eşgüdüm olmazsa her uzak uygulama kendi React kopyasını gönderir. Federasyon araçları, paylaşılan bağımlılıkları bildirmenize olanak tanır; React'i ilk yükleyen uzak uygulama onu diğerlerinin kullanımına sunar. Yerel yaklaşımlar, her uzak uygulamayı aynı React URL'sine yönlendirmek için içe aktarma haritalarını kullanır.

Bağımsız Dağıtım

Her ekip kendi uzak uygulamasının sorumluluğunu üstlenir ve istediği zaman dağıtım yapar. Ana uygulama hiçbir zaman yeniden derlenmez; sonraki sayfa yüklemesinde (veya önbellek geçersizleştirme yoluyla) yeni sürümleri alır. Bu, sürüm döngülerini tamamen birbirinden ayırır.

Sürümleme Stratejileri

Bir ana uygulamanın yükseltmesinin örtük değil bilinçli olması için uzak uygulamaları sürümlendirilmiş URL'lere sabitleyin (/v1/entry.js, /v2/entry.js). Bazı ekipler JSPM gibi araçlarla içe aktarma haritası düzeyinde semver eşleştirmesi kullanır.

Ödünleşimler

Federasyon, çalışma zamanı karmaşıklığı ekler: daha fazla ağ isteği, kaynaklar arasında hata ayıklamanın zorlaşması ve paylaşılan bağımlılıkların uyumsuz olma riski. Gerçekten bağımsız dağıtıma ihtiyaç duyduğunuzda kullanın; daha küçük projelerde tek bir derleme daha basit ve hızlıdır.

Hata Yalıtımı

Tek bir uzak uygulamanın çökmesi ana uygulamayı da durdurmamalıdır. Dinamik içe aktarımları hata sınırlarıyla (React) veya try/catch ile (yalın JavaScript) sarın ve bir uzak uygulama başarısız olduğunda geri dönüş arayüzü oluşturun. Bir özellik geçici olarak bozuk olsa bile kabuk çalışır durumda kalır.

Tür Güvenliği

Uzak dışa aktarımlar, ana uygulamada derleme zamanında tür bilgisine sahip değildir. Her iki tarafın da kullandığı ayrı bir pakette paylaşılan TypeScript türleri oluşturun veya federasyon sınırında çalışma zamanı doğrulaması (Zod, io-ts) kullanın.

Yerel Yaklaşım ve Araçlar

Yerel federasyon (içe aktarma haritaları + ESM) daha basit ve standartlara dayalıdır, ancak Webpack'in ortak bağımlılıkları koordine etme özelliğinden yoksundur. Çok sayıda ortak bağımlılığa sahip karmaşık uygulamalarda Webpack/Module Federation'ı; daha basit mikro ön uç kurulumlarında ise yerel yaklaşımı seçin.

Gelecekteki Yönelim

W3C, yerel federasyonu daha yetenekli hâle getirecek, daha zengin modül yükleme yapıtaşlarını araştırıyor; bunlara daha iyi ortak bağımlılık uzlaşması da dâhil. Bugün, içe aktarma haritalarını temel kabul edin ve federasyon araçlarınızı bunun üzerine katmanlayın.

Bilgi Kontrolü

Büyük bir uygulamada Module Federation kullanmanın temel amacı nedir?

Özet

Module Federation, bir ana uygulamanın bağımsız olarak dağıtılan uzak uygulamalardan çalışma zamanında kod yüklemesini sağlar. Webpack 5'in araçları, ortak bağımlılıkların uzlaşmasını ekler; yerel federasyon ise içe aktarma haritalarını ve dinamik içe aktarmayı kullanır. Birden fazla ekibin yer aldığı mikro ön uç mimarilerinde kullanın; bağımsız dağıtım özgürlüğü karşılığında ek karmaşıklığı kabul edin.

Sıkça Sorulan Sorular

“Modül Federasyonunun Temelleri” dersi ücretsiz mi?

Evet — “Modül Federasyonunun Temelleri” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve HTML Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. HTML Academy kursu toplamda 4 dersten oluşur.

“Modül Federasyonunun Temelleri” dersinde ne öğreneceğim?

Modül federasyonunun mikro ön yüz paylaşımını nasıl sağladığını anlayın HTML Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

HTML Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te HTML Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.

“Modül Federasyonunun Temelleri” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu HTML Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her HTML Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← HTML Academy Sayfasına Dön