Uzak Uygulamalar Arasında Durum ve Yönlendirme Paylaşma

Her Module Federation uzak uygulaması bağımsız olarak derlenip dağıtılır. Durumu (React useState, Context, Zustand depoları) kendi JavaScript modül kapsamı içinde bulunur. Ana uygulama ile uzak uygulamalar durumu otomatik olarak paylaşmaz; paylaşımı açıkça tasarlamanız gerekir.

Durum paylaşmanın en basit mekanizması URL'dir: Her uzak uygulama, uzak uygulamalar arası iletişim olmadan URL parametrelerini, sorgu dizelerini ve karma değerlerini okuyabilir. Bu yöntem birincil gezinme durumu, filtre değerleri ve yer imi oluşturulup bağlantı yoluyla paylaşılması gereken her türlü durum için iyi çalışır.

Tarayıcının EventTarget'ı üzerinden CustomEvents, uzak uygulamaların doğrudan içe aktarma yapmadan iletişim kurmasını sağlar. Bir uzak uygulama window.dispatchEvent(new CustomEvent('cart:updated', { detail: cart })) çağrısını yapar ve başka bir modül (ana uygulama veya diğer uzak uygulamalar) window.addEventListener('cart:updated', handler) ile dinler. Paylaşılan bir modüle gerek yoktur.

Zustand veya Jotai deposunu dışa açan özel bir "durum uzak uygulaması" oluşturun. Hem ana uygulama hem de diğer uzak uygulamalar bu durum uzak uygulamasından içe aktarır ve aynı depo örneğini alır; bunun nedeni deponun paylaşılan bir tekil örnek olmasıdır. Bu yaklaşım karmaşık paylaşılan durumlar (kimlik doğrulama, sepet, kullanıcı tercihleri) için güçlüdür, ancak bir dağıtım bağımlılığı ekler.

Kabuk (ana uygulama) tüm paylaşılan duruma sahip olur ve bunu uzak uygulamalara özellikler veya Context aracılığıyla aktarır. Uzak uygulamalar onCartUpdate gibi geri çağırmaları alır ve yönlendirme işlemlerini özellik olarak kullanır. Bu yaklaşım durumu ana uygulamada merkezileştirir, ancak ana uygulamanın uzak uygulama API'lerini bilmesini gerektirerek sıkı bağlantı oluşturur.

React Router'ın geçmiş ve konum durumu bir Router bileşeni (BrowserRouter veya createBrowserRouter) tarafından sağlanır. Bir Module Federation kurulumunda tam olarak bir Router bulunmalıdır; her uzak uygulamaya bir Router yerleştirmek, birbiriyle yarışan birden çok yönlendirme bağlamı oluşturarak gezinme çakışmalarına neden olur.

Mimari kural şudur: Router'ı ana uygulama (kabuk) sağlar. Uzak uygulamalar yönlendirme özelliklerini ana uygulamadan alır (veya doğrudan URL'yi okur). Bir uzak uygulama hiçbir zaman kendi BrowserRouter'ını oluşturmamalıdır; bu, ana uygulamanın Router'ıyla çakışır ve tüm uygulamadaki gezinmeyi bozar.

React Context değerleri belirli bir React örneğine ve Context nesnesine bağlıdır. Bir Context'in ana uygulama ile uzak uygulama arasında çalışması için her ikisinin de aynı Context nesnesini aynı kaynaktan içe aktarması gerekir; bu kaynak genellikle paylaşılan durum uzak uygulaması veya paylaşılan yardımcı programlar paketidir. React tekil örneği, aynı Context'in tüm uzak uygulamalarda çalışmasını sağlar.

Temiz bir Module Federation mimarisinde kabuk (ana uygulama) şunlara sahip olur: HTML kabuğu, Router sağlayıcısı, kimlik doğrulama Context'i, tema/tasarım belirteci sağlayıcısı ve genel gezinme. Uzak uygulamalar kendi özellik alanlarının içeriğine sahip olur. Kabuk, uygulama ayrıntılarını bilmeden uzak uygulamaları düzene birleştirir.

Module Federation'daki en büyük anti-desen, ana uygulama ile uzak uygulama arasındaki sıkı bağlantıdır: Ana uygulama uzak uygulamadan türleri içe aktarır, uzak uygulama ana uygulamadan bileşenleri içe aktarır veya her ikisinin de aynı anda güncellemesi gereken ortak bir npm paketi paylaşırlar. Bu bağlantılar bağımsız dağıtımın amacını boşa çıkarır.

Ana uygulama ile uzak uygulamalar arasındaki açık sözleşmeleri tanımlayın: Uzak bileşenin kabul ettiği özellikleri, gönderdiği CustomEvents olaylarını ve okuduğu URL parametrelerini belirtin. Bu sözleşmeleri paylaşılan bir tür paketinde TypeScript arayüzleri olarak belgeleyin. Böylece ekipler, üzerinde anlaşılmış sözleşme kapsamında bağımsız olarak geliştirme yapabilir.

React Router sağlayıcısı (BrowserRouter), Module Federation mimarisinde nereye yerleştirilmelidir?

Module Federation uzak uygulamaları arasında durum paylaşımı; URL durumunu (en basit yaklaşım), CustomEvents olaylarını (gevşek bağlı), paylaşılan bir durum uzak uygulamasını (merkezî depo) veya özellik olarak aktarılan ana uygulama sahipliğindeki durumu kullanabilir. Tek Router sağlayıcısının sahibi ana uygulama olmalıdır; uzak uygulamalar hiçbir zaman kendi Router'larını oluşturmamalıdır. TypeScript arayüzleri aracılığıyla tanımlanan açık iletişim sözleşmeleri ekiplerin bağımsız kalmasını ve gerçek anlamda bağımsız dağıtımı sağlar.