Thoughts on using CustomEvents in a micro frontend application

This is a rough outline of my thoughts to find sensible guidelines for working with CustomEvents across multiple micro frontends.

Jonas Duri
2 min readNov 3, 2022
AI generated image.. no idea what this is supposed to be

As you are reading this I assume that you already learned about micro frontends. If this is a topic that you want to learn more about, please let me know.

What do you want to achieve?

Do you want to offer an API that other micro frontends can use or, do you want to trigger a specific action on some other micro frontend API?

Let‘s look at some examples to clarify things.

I have a shopping bookmark widget and I want to offer an API where others can bookmark products.

  • Good use case for CustomEvents.
  • Define a domain-specific event name that is scoped to your team or micro frontend bookmark:add
  • Add a listener for this event and document the public API.
  • Act each time your widget receives the bookmark:add event

I have a product card and I want to add it to the bookmark widget when a user clicks the “bookmark” button.

  • Look up the public API for the bookmark:add

--

--

Jonas Duri

Platform Architect working on frontend & UI solutions for distributed e-commerce systems | https://jduri.com/