JavaScript Module Federation: Çalışma Zamanı Bağımlılık Çözümlemesine Derinlemesine Bakış

Webpack 5 ile sunulan bir özellik olan Module Federation, mikro-ön yüz mimarileri oluşturma şeklimizde devrim yarattı. Ayrı ayrı derlenmiş ve dağıtılmış uygulamaların (veya uygulama parçalarının) çalışma zamanında kod ve bağımlılıkları paylaşmasına olanak tanır. Temel konsept nispeten basit olsa da, çalışma zamanı bağımlılık çözümlemesinin inceliklerine hakim olmak, sağlam, ölçeklenebilir ve sürdürülebilir sistemler oluşturmak için çok önemlidir. Bu kapsamlı rehber, Module Federation'da çalışma zamanı bağımlılık çözümlemesine derinlemesine dalacak, çeşitli teknikleri, zorlukları ve en iyi uygulamaları keşfedecektir.

Çalışma Zamanı Bağımlılık Çözümlemesini Anlamak

Geleneksel JavaScript uygulama geliştirme, genellikle tüm bağımlılıkları tek bir monolitik paket halinde toplamaya dayanır. Ancak Module Federation, uygulamaların çalışma zamanında diğer uygulamalardan (uzak modüller) modül tüketmesine izin verir. Bu durum, bu bağımlılıkları dinamik olarak çözümlemek için bir mekanizma ihtiyacını ortaya çıkarır. Çalışma zamanı bağımlılık çözümlemesi, bir modül uygulama çalışırken istendiğinde gerekli bağımlılıkları belirleme, bulma ve yükleme sürecidir.

İki mikro-ön yüzünüzün olduğu bir senaryo düşünün: ProductCatalog (Ürün Kataloğu) ve ShoppingCart (Alışveriş Sepeti). ProductCatalog, ProductCard adında bir bileşen sunabilir ve ShoppingCart bu bileşeni sepetteki ürünleri göstermek için kullanmak isteyebilir. Module Federation ile ShoppingCart, ProductCard bileşenini çalışma zamanında ProductCatalog'dan dinamik olarak yükleyebilir. Çalışma zamanı bağımlılık çözümleme mekanizması, ProductCard'ın gerektirdiği tüm bağımlılıkların (örneğin, UI kütüphaneleri, yardımcı fonksiyonlar) da doğru bir şekilde yüklenmesini sağlar.

Temel Kavramlar ve Bileşenler

Tekniklere dalmadan önce, bazı temel kavramları tanımlayalım:

• Host (Ana Uygulama): Uzak modülleri tüketen bir uygulamadır. Örneğimizde, ShoppingCart host'tur.
• Remote (Uzak Uygulama): Diğer uygulamalar tarafından tüketilmek üzere modüller sunan bir uygulamadır. Örneğimizde, ProductCatalog remote'dur.
• Shared Scope (Paylaşılan Kapsam): Host ve remote'lar arasında bağımlılıkları paylaşmak için bir mekanizmadır. Bu, her iki uygulamanın da bir bağımlılığın aynı sürümünü kullanmasını sağlayarak çakışmaları önler.
• Remote Entry (Uzak Giriş): Uzak uygulamadan tüketime sunulan modüllerin listesini içeren bir dosyadır (genellikle bir JavaScript dosyası).
• Webpack'in `ModuleFederationPlugin`'i: Module Federation'ı etkinleştiren temel eklentidir. Host ve remote uygulamaları yapılandırır, paylaşılan kapsamları tanımlar ve uzak modüllerin yüklenmesini yönetir.

Çalışma Zamanı Bağımlılık Çözümleme Teknikleri

Module Federation'da çalışma zamanı bağımlılık çözümlemesi için birkaç teknik kullanılabilir. Teknik seçimi, uygulamanızın özel gereksinimlerine ve bağımlılıklarınızın karmaşıklığına bağlıdır.

1. Örtük Bağımlılık Paylaşımı

En basit yaklaşım, `ModuleFederationPlugin` yapılandırmasındaki `shared` seçeneğine güvenmektir. Bu seçenek, host ve remote'lar arasında paylaşılması gereken bağımlılıkların bir listesini belirtmenize olanak tanır. Webpack, bu paylaşılan bağımlılıkların versiyonlamasını ve yüklenmesini otomatik olarak yönetir.

Örnek:

Hem ProductCatalog (remote) hem de ShoppingCart (host) uygulamalarında aşağıdaki gibi bir yapılandırmanız olabilir:

  
    new ModuleFederationPlugin({
      // ... diğer yapılandırmalar
      shared: {
        react: { singleton: true, eager: true, requiredVersion: '^17.0.0' },
        'react-dom': { singleton: true, eager: true, requiredVersion: '^17.0.0' },
        // ... diğer paylaşılan bağımlılıklar
      },
    })
  

Bu örnekte, `react` ve `react-dom` paylaşılan bağımlılıklar olarak yapılandırılmıştır. `singleton: true` seçeneği, her bağımlılığın yalnızca bir örneğinin yüklenmesini sağlayarak çakışmaları önler. `eager: true` seçeneği, bağımlılığı başlangıçta yükler, bu da bazı durumlarda performansı artırabilir. `requiredVersion` seçeneği, gereken bağımlılığın minimum sürümünü belirtir.

Faydaları:

• Uygulaması basittir.
• Webpack, versiyonlamayı ve yüklemeyi otomatik olarak yönetir.

Dezavantajları:

• Tüm remote'lar aynı bağımlılıklara ihtiyaç duymuyorsa gereksiz bağımlılık yüklenmesine yol açabilir.
• Tüm uygulamaların paylaşılan bağımlılıkların uyumlu sürümlerini kullanmasını sağlamak için dikkatli planlama ve koordinasyon gerektirir.

2. `import()` ile Açık Bağımlılık Yükleme

Bağımlılık yüklemesi üzerinde daha hassas kontrol için, uzak modülleri dinamik olarak yüklemek üzere `import()` fonksiyonunu kullanabilirsiniz. Bu, bağımlılıkları yalnızca gerçekten ihtiyaç duyulduğunda yüklemenize olanak tanır.

Örnek:

ShoppingCart (host) uygulamasında aşağıdaki gibi bir kodunuz olabilir:

  
    async function loadProductCard() {
      try {
        const ProductCard = await import('ProductCatalog/ProductCard');
        // ProductCard bileşenini kullan
        return ProductCard;
      } catch (error) {
        console.error('ProductCard yüklenemedi', error);
        // Hatayı zarif bir şekilde ele al
        return null;
      }
    }

    loadProductCard();
  

Bu kod, ProductCard bileşenini ProductCatalog remote'undan yüklemek için `import('ProductCatalog/ProductCard')` kullanır. `await` anahtar kelimesi, bileşenin kullanılmadan önce yüklenmesini sağlar. `try...catch` bloğu, yükleme sürecindeki olası hataları ele alır.

Faydaları:

• Bağımlılık yüklemesi üzerinde daha fazla kontrol sağlar.
• Başlangıçta yüklenen kod miktarını azaltır.
• Bağımlılıkların tembel yüklenmesine (lazy loading) olanak tanır.

Dezavantajları:

• Uygulamak için daha fazla kod gerektirir.
• Bağımlılıklar çok geç yüklenirse gecikmeye neden olabilir.
• Uygulama çökmelerini önlemek için dikkatli hata yönetimi gerektirir.

3. Sürüm Yönetimi ve Anlamsal Sürümleme

Çalışma zamanı bağımlılık çözümlemesinin kritik bir yönü, paylaşılan bağımlılıkların farklı sürümlerini yönetmektir. Anlamsal Sürümleme (SemVer), bir bağımlılığın farklı sürümleri arasındaki uyumluluğu belirtmek için standartlaştırılmış bir yol sağlar.

`ModuleFederationPlugin`'in `shared` yapılandırmasında, bir bağımlılığın kabul edilebilir sürümlerini belirtmek için SemVer aralıklarını kullanabilirsiniz. Örneğin, `requiredVersion: '^17.0.0'`, uygulamanın React'in 17.0.0'a eşit veya daha büyük ancak 18.0.0'dan küçük bir sürümünü gerektirdiğini belirtir.

Webpack'in Module Federation eklentisi, host ve remote'larda belirtilen SemVer aralıklarına göre bir bağımlılığın uygun sürümünü otomatik olarak çözer. Uyumlu bir sürüm bulunamazsa, bir hata fırlatılır.

Sürüm Yönetimi için En İyi Uygulamalar:

• Bağımlılıkların kabul edilebilir sürümlerini belirtmek için SemVer aralıklarını kullanın.
• Hata düzeltmelerinden ve performans iyileştirmelerinden yararlanmak için bağımlılıkları güncel tutun.
• Bağımlılıkları yükselttikten sonra uygulamanızı kapsamlı bir şekilde test edin.
• Bağımlılıkları yönetmeye yardımcı olması için npm-check-updates gibi bir araç kullanmayı düşünün.

4. Asenkron Bağımlılıkların Ele Alınması

Bazı bağımlılıklar asenkron olabilir, yani yüklenmeleri ve başlatılmaları için ek süre gerektirirler. Örneğin, bir bağımlılığın uzak bir sunucudan veri alması veya bazı karmaşık hesaplamalar yapması gerekebilir.

Asenkron bağımlılıklarla çalışırken, bağımlılığın kullanılmadan önce tamamen başlatıldığından emin olmak önemlidir. Asenkron yükleme ve başlatmayı yönetmek için `async/await` veya Promise'leri kullanabilirsiniz.

Örnek:

  
    async function initializeDependency() {
      try {
        const dependency = await import('my-async-dependency');
        await dependency.initialize(); // Bağımlılığın bir initialize() metodu olduğunu varsayarak
        return dependency;
      } catch (error) {
        console.error('Bağımlılık başlatılamadı', error);
        // Hatayı zarif bir şekilde ele al
        return null;
      }
    }

    async function useDependency() {
      const myDependency = await initializeDependency();
      if (myDependency) {
        // Bağımlılığı kullan
        myDependency.doSomething();
      }
    }

    useDependency();
  

Bu kod önce `import()` kullanarak asenkron bağımlılığı yükler. Ardından, tamamen başlatıldığından emin olmak için bağımlılık üzerinde `initialize()` metodunu çağırır. Son olarak, bir görev gerçekleştirmek için bağımlılığı kullanır.

5. İleri Düzey Senaryolar: Bağımlılık Sürüm Uyuşmazlığı ve Çözüm Stratejileri

Karmaşık mikro-ön yüz mimarilerinde, farklı mikro-ön yüzlerin aynı bağımlılığın farklı sürümlerini gerektirdiği senaryolarla karşılaşmak yaygındır. Bu durum, bağımlılık çakışmalarına ve çalışma zamanı hatalarına yol açabilir. Bu zorlukların üstesinden gelmek için birkaç strateji kullanılabilir:

• Sürümleme Takma Adları (Versioning Aliases): Farklı sürüm gereksinimlerini tek bir uyumlu sürüme eşlemek için Webpack yapılandırmalarında takma adlar oluşturun. Bu, uyumluluğu sağlamak için dikkatli test gerektirir.
• Shadow DOM: Her mikro-ön yüzü bağımlılıklarını izole etmek için bir Shadow DOM içine alın. Bu, çakışmaları önler ancak iletişim ve stil karmaşıklıkları getirebilir.
• Bağımlılık İzolasyonu: Bağlama göre bir bağımlılığın farklı sürümlerini yüklemek için özel bağımlılık çözümleme mantığı uygulayın. Bu en karmaşık yaklaşımdır ancak en büyük esnekliği sağlar.

Örnek: Sürümleme Takma Adları

Diyelim ki A Mikro-ön yüzü React sürüm 16'yı, B Mikro-ön yüzü ise React sürüm 17'yi gerektiriyor. A Mikro-ön yüzü için basitleştirilmiş bir webpack yapılandırması şöyle görünebilir:

  
    resolve: {
        alias: {
            'react': path.resolve(__dirname, 'node_modules/react-16') //React 16'nın bu projede mevcut olduğunu varsayarak
        }
    }
  

Ve benzer şekilde, B Mikro-ön yüzü için:

  
    resolve: {
        alias: {
            'react': path.resolve(__dirname, 'node_modules/react-17') //React 17'nin bu projede mevcut olduğunu varsayarak
        }
    }
  

Sürümleme Takma Adları için Önemli Hususlar: Bu yaklaşım titiz testler gerektirir. Farklı mikro-ön yüzlerden gelen bileşenlerin, paylaşılan bağımlılıkların biraz farklı sürümlerini kullanırken bile birlikte doğru çalıştığından emin olun.

Module Federation Bağımlılık Yönetimi için En İyi Uygulamalar

Module Federation ortamında bağımlılıkları yönetmek için bazı en iyi uygulamalar şunlardır:

• Paylaşılan Bağımlılıkları En Aza İndirin: Yalnızca kesinlikle gerekli olan bağımlılıkları paylaşın. Çok fazla bağımlılık paylaşmak, uygulamanızın karmaşıklığını artırabilir ve bakımını zorlaştırabilir.
• Anlamsal Sürümleme Kullanın: Bağımlılıkların kabul edilebilir sürümlerini belirtmek için SemVer kullanın. Bu, uygulamanızın farklı bağımlılık sürümleriyle uyumlu olmasını sağlamaya yardımcı olacaktır.
• Bağımlılıkları Güncel Tutun: Hata düzeltmelerinden ve performans iyileştirmelerinden yararlanmak için bağımlılıkları güncel tutun.
• Kapsamlı Test Yapın: Bağımlılıklarda herhangi bir değişiklik yaptıktan sonra uygulamanızı kapsamlı bir şekilde test edin.
• Bağımlılıkları İzleyin: Güvenlik açıkları ve performans sorunları için bağımlılıkları izleyin. Snyk ve Dependabot gibi araçlar bu konuda yardımcı olabilir.
• Net Sahiplik Belirleyin: Paylaşılan bağımlılıklar için net bir sahiplik tanımlayın. Bu, bağımlılıkların düzgün bir şekilde korunmasını ve güncellenmesini sağlamaya yardımcı olacaktır.
• Merkezi Bağımlılık Yönetimi: Tüm mikro-ön yüzlerdeki bağımlılıkları yönetmek için merkezi bir bağımlılık yönetim sistemi kullanmayı düşünün. Bu, tutarlılığı sağlamaya ve çakışmaları önlemeye yardımcı olabilir. Özel bir npm registry veya özel bir bağımlılık yönetim sistemi gibi araçlar faydalı olabilir.
• Her Şeyi Belgeleyin: Tüm paylaşılan bağımlılıkları ve sürümlerini açıkça belgeleyin. Bu, geliştiricilerin bağımlılıkları anlamasına ve çakışmalardan kaçınmasına yardımcı olacaktır.

Hata Ayıklama ve Sorun Giderme

Çalışma zamanı bağımlılık çözümlemesi sorunlarını ayıklamak zor olabilir. Yaygın sorunları gidermek için bazı ipuçları:

• Konsolu Kontrol Edin: Tarayıcı konsolundaki hata mesajlarını arayın. Bu mesajlar sorunun nedeni hakkında ipuçları verebilir.
• Webpack'in Devtool'unu Kullanın: Kaynak haritaları oluşturmak için Webpack'in devtool seçeneğini kullanın. Bu, kodu ayıklamayı kolaylaştıracaktır.
• Ağ Trafiğini İnceleyin: Ağ trafiğini incelemek için tarayıcının geliştirici araçlarını kullanın. Bu, hangi bağımlılıkların ne zaman yüklendiğini belirlemenize yardımcı olabilir.
• Module Federation Visualizer Kullanın: Module Federation Visualizer gibi araçlar, bağımlılık grafiğini görselleştirmenize ve potansiyel sorunları belirlemenize yardımcı olabilir.
• Yapılandırmayı Basitleştirin: Sorunu izole etmek için Module Federation yapılandırmasını basitleştirmeyi deneyin.
• Sürümleri Kontrol Edin: Paylaşılan bağımlılıkların sürümlerinin host ve remote'lar arasında uyumlu olduğunu doğrulayın.
• Önbelleği Temizleyin: Tarayıcı önbelleğini temizleyin ve tekrar deneyin. Bazen bağımlılıkların önbelleğe alınmış sürümleri sorunlara neden olabilir.
• Belgelere Başvurun: Module Federation hakkında daha fazla bilgi için Webpack belgelerine başvurun.
• Topluluk Desteği: Yardım için çevrimiçi kaynaklardan ve topluluk forumlarından yararlanın. Stack Overflow ve GitHub gibi platformlar değerli sorun giderme rehberliği sağlar.

Gerçek Dünya Örnekleri ve Vaka Çalışmaları

Birçok büyük kuruluş, mikro-ön yüz mimarileri oluşturmak için Module Federation'ı başarıyla benimsemiştir. Örnekler şunları içerir:

• Spotify: Web oynatıcısını ve masaüstü uygulamasını oluşturmak için Module Federation kullanır.
• Netflix: Kullanıcı arayüzünü oluşturmak için Module Federation kullanır.
• IKEA: E-ticaret platformunu oluşturmak için Module Federation kullanır.

Bu şirketler, Module Federation kullanmaktan önemli faydalar bildirdiler, bunlar arasında:

• İyileştirilmiş geliştirme hızı.
• Artan ölçeklenebilirlik.
• Azaltılmış karmaşıklık.
• Geliştirilmiş sürdürülebilirlik.

Örneğin, birden fazla bölgede ürün satan küresel bir e-ticaret şirketini düşünün. Her bölgenin, ürünleri yerel dilde ve para biriminde görüntülemekten sorumlu kendi mikro-ön yüzü olabilir. Module Federation, bu mikro-ön yüzlerin ortak bileşenleri ve bağımlılıkları paylaşmasına olanak tanırken, bağımsızlıklarını ve özerkliklerini korumalarını sağlar. Bu, geliştirme süresini önemli ölçüde azaltabilir ve genel kullanıcı deneyimini iyileştirebilir.

Module Federation'ın Geleceği

Module Federation hızla gelişen bir teknolojidir. Gelecekteki gelişmelerin şunları içermesi muhtemeldir:

• Sunucu tarafı oluşturma (server-side rendering) için geliştirilmiş destek.
• Daha gelişmiş bağımlılık yönetimi özellikleri.
• Diğer derleme araçlarıyla daha iyi entegrasyon.
• Geliştirilmiş güvenlik özellikleri.

Module Federation olgunlaştıkça, mikro-ön yüz mimarileri oluşturmak için daha da popüler bir seçenek haline gelmesi muhtemeldir.

Sonuç

Çalışma zamanı bağımlılık çözümlemesi, Module Federation'ın kritik bir yönüdür. Çeşitli teknikleri ve en iyi uygulamaları anlayarak, sağlam, ölçeklenebilir ve sürdürülebilir mikro-ön yüz mimarileri oluşturabilirsiniz. İlk kurulum bir öğrenme eğrisi gerektirse de, Module Federation'ın artan geliştirme hızı ve azalan karmaşıklık gibi uzun vadeli faydaları, onu değerli bir yatırım haline getirir. Module Federation'ın dinamik doğasını benimseyin ve geliştikçe yeteneklerini keşfetmeye devam edin. Mutlu kodlamalar!