0Pricing
Micro Frontends Architecture with Module Federation · Lekcja

Komunikacja za pomocą niestandardowych zdarzeń DOM

Dowiedz się, jak używać natywnego dla przeglądarki API CustomEvent jako lekkiego, niezależnego od frameworka kanału komunikacji między micro frontendami.

Komunikacja za pomocą niestandardowych zdarzeń DOM to bezpłatna lekcja Micro Frontends Architecture with Module Federation na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Micro Frontends Architecture with Module Federation, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Micro Frontends Architecture with Module Federation zawiera 4 lekcji w sumie.

Części tej lekcji nie zostały jeszcze przetłumaczone i są wyświetlane po angielsku.

Why Native Events?

The browser already has a built-in pub/sub system: the DOM event model. Using it for MFE communication needs no library and works across any framework.

The CustomEvent API

CustomEvent lets you create your own named events carrying a detail payload, dispatched on any DOM element including window.

const evt = new CustomEvent("cart:add", {
  detail: { productId: 42, qty: 1 }
});

Dispatching an Event

Any micro frontend can broadcast an event on a shared target such as window. Others do not need a direct reference to the sender.

window.dispatchEvent(new CustomEvent("cart:add", {
  detail: { productId: 42 }
}));

Listening for Events

A consuming MFE subscribes with addEventListener and reads the payload from event.detail.

window.addEventListener("cart:add", (e) => {
  updateCart(e.detail.productId);
});

Naming Conventions

Namespace event names to avoid collisions, for example cart:add or auth:login. A shared naming convention is part of your communication contract.

Cleaning Up Listeners

When a micro frontend unmounts, remove its listeners to prevent memory leaks and duplicate handling.

const handler = (e) => updateCart(e.detail);
window.addEventListener("cart:add", handler);
// on unmount:
window.removeEventListener("cart:add", handler);

Two-Way Communication

For request/response style flows, one MFE dispatches a request event and another replies with a separate response event, keeping each direction explicit.

window.dispatchEvent(new CustomEvent("user:request"));
window.addEventListener("user:response", e => show(e.detail));

Strengths of DOM Events

Native events are appealing because they are:

  • Framework-agnostic
  • Zero-dependency
  • Familiar to all web developers
  • Naturally decoupled (no shared references)

Limitations to Know

They also have downsides:

  • No type safety on detail
  • Easy to misspell event names
  • Hard to trace who listens to what
  • Not ideal for large or frequent payloads

Wrapping Events in a Typed Helper

To reduce mistakes, wrap dispatch and listen in a small typed module shared across MFEs, centralizing event names and payload shapes.

export function emit(name, detail) {
  window.dispatchEvent(new CustomEvent(name, { detail }));
}

When to Choose This Pattern

Custom DOM events shine for simple, occasional notifications between loosely coupled MFEs. For complex shared data, prefer a dedicated event bus or shared store.

Quick Check

Test your custom-event knowledge.

Recap

You learned native event communication:

  • CustomEvent carries data in detail
  • Dispatch on window; listen with addEventListener
  • Namespace names and clean up listeners
  • Great for simple, decoupled notifications
  • Wrap in a typed helper to avoid mistakes

DOM events are a zero-dependency MFE channel.

Często zadawane pytania

Czy lekcja „Komunikacja za pomocą niestandardowych zdarzeń DOM” jest bezpłatna?

Tak — pełny tekst „Komunikacja za pomocą niestandardowych zdarzeń DOM” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Micro Frontends Architecture with Module Federation, przejdź na CoddyKit PRO. Kurs Micro Frontends Architecture with Module Federation zawiera 4 lekcji w sumie.

Co nauczysz się w „Komunikacja za pomocą niestandardowych zdarzeń DOM”?

Dowiedz się, jak używać natywnego dla przeglądarki API CustomEvent jako lekkiego, niezależnego od frameworka kanału komunikacji między micro frontendami. Ćwiczysz Micro Frontends Architecture with Module Federation z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Micro Frontends Architecture with Module Federation?

Nie wymagamy żadnego doświadczenia. Micro Frontends Architecture with Module Federation w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.

Ile czasu zajmuje lekcja „Komunikacja za pomocą niestandardowych zdarzeń DOM”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Micro Frontends Architecture with Module Federation?

Tak. Każda lekcja Micro Frontends Architecture with Module Federation zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Magistrala zdarzeń do komunikacji między aplikacjami
  2. Zarządzanie współdzielonym stanem
  3. Niestandardowe rozwiązania komunikacyjne
  4. Komunikacja za pomocą niestandardowych zdarzeń DOM
← Powrót do Micro Frontends Architecture with Module Federation