How Microfrontends Communicate

[00:00:00]
>> Steve Kinney: So how do micro front ends communicate? Like we said, we talked about some options from everything like using stuff built into the browser to jamming stuff onto the global object and firing events. You got lots of choices here. But we're going to stick with the three we talked about before. One is a library called Nanostores. It's under 1 kilobyte. It is framework-agnostic. You could probably write it yourself.

[00:00:27]
You probably don't need to, but you could. It's simply an object that has, you know, some of that event listening like set up on it already and some nice abstractions for being able to both modify an object and then have it kind of like fire an event when it's modified that then like you can wrap in a React hook to do the rest of it, right? So you have this object, it can be passed around, kind of like a Redux store, right?

[00:00:54]
And use, except it's 1 kilobyte. And if you modify it, it fires an event, which can trigger stuff in all the different repositories. That's really it. There's not a lot to explain because it's a tiny library, but we'll see it in a second. The other one is Broadcast Channel, which is pretty cool. It's a browser API for sending messages between browsing contexts. This is interesting also, like, even if you don't use it for the purposes that we're talking about today, the ways that I have used it in the past is situations where maybe more than one tab is open.

[00:01:32]
Right, so when I worked on an email editor, for instance, right, there was like an auto update feature, right? But you probably didn't want to fire the auto update on tabs that nobody was looking at, right? Because that's a waste of resources, right, so you probably like only do it with the windows focused. But what happens if they have 3 tabs open with the same email? Well, the one that's open is going to get updated.

[00:01:58]
Then what if they go to another one, and what if they're offline? You know, all those weird edge cases that probably no one ever actually encountered, but you put enough engineers in a room and they start overthinking things. And so a broadcast channel is cool because it's every tab or context, so really tab or iframe, web worker, every context on the same origin, so domain. There's a whole web security course if you want to hear me riff about difference in origin and domain later, trust me.

[00:02:31]
Let's just do the basic version. Like, will receive the message. So it's nice if you have multiple tabs open on the same site, you can also coordinate across those as well. And so it works great for that. The problem is, is effectively like sending very, like ascending strings, effectively, right? Like, yes, I understand how JSON works as well. And, you know, you don't get any of the type safety or anything along those lines, but it's there for free and you can use it for all sorts of stuff.

[00:02:59]
Like we were mostly just triggering it, like to trigger a reload or stuff along those lines, but it exists and it's good. Another one is a library. If you've ever tried to do like the messaging between either web workers and the browser context or a service worker and the browser context or if you have ever gone 6 months down a very dark road of building a Chrome extension, which is effectively a service worker, and like 3 other like browser contexts.

[00:03:36]
Comlink is effectively an abstraction that like makes the messaging between all those things not awful, right? And we'll also use this as well. It basically takes all the post message stuff and it hides it. And you can talk to a web worker or some other context with an interface that, you know, seems a lot better. It will work for this case too because like you can post and receive the messages. We're going to use the Nanostores today because it's very lightweight, very easy to wrap your head around, framework-agnostic, it checks all the boxes as we go through it.