Dependency & Global State

[00:00:00]
>> Steve Kinney: We had the remote. We had the host. We didn't talk about our third friend here, shared. So what do we have shared? We've got some of the stuff that the other pieces we're pulling in as shared pieces, right? This is where like, we've got React and you're like, React 18, aren't we using React 19? About to. And like this is kind of those things are shared by both the host and all of the remotes in this case, right?

[00:00:36]
And this one is more of just a more of traditional, and this one again, you could break these out. This could be the design system team's repo, right? And then you have the, you know, those could be three repos because none of this matters if it's in the same repo or not. It's just about like, we're going to pull it from either localhost 3001 or we're going to pull it from wherever. This one is more of a at build time kind of thing as well.

[00:01:03]
So like even if we went into the host, you can see that like it is a dependency. If that's confusing to you, wait one more section and we'll talk about it. But imagine it is a dependency either published npm so on and so forth, right? Like if you have private repos then you gotta play another game. It's a long story, but we have this repo that we kind of pull in, so on and so forth, and this is kind of all of our shared assets.

[00:01:34]
So then, like, what happens if let's go into the remote and we'll go find its RS build config. We're going to add a few more options in here. We'll say that the required version is, let's say that like, no, we did it like the dashboard team was really excited about React 19 and they decided to upgrade to React 19 and they're very adamant about this, right? And so, they're saying like, we only support React 19 and higher.

[00:02:17]
We're the dashboard team. We're kind of like the product that people logged into this thing for, so like, get with it. Let's go check on our app. Oh no. It's gone. Let's go into my console. So to your question on versioning and dependencies, right, like there is capabilities in the module federation plugin for helping you navigate this, right? And with that, if used on the happy path, is great because then you know what can and will compile.

[00:03:00]
And if one team goes rogue, we also see how this could end up poorly for us, you know, and so it's saying like, hey, there's an error pulling this in. We've got version 18.3, shared single to module, so on and so forth, but like, it does not meet the requirement of 19 or higher, right? And so like you can begin to figure out the versions, but again, now you've got to navigate that. Like, obviously, doing a major version bump and then throwing on strict version is true at the same time is a choice, right?

[00:03:36]
And so that was actually the remote one here. You can see because the shared version was a different version. I do at least have a failure state here to like contain the blast radius. So like, the remote totally crashed. The host, if we look at the host code, and again, if you don't know React, every framework has the concept of an error boundary, right? So we have an error boundary that like caught it and dealt with that, but like, you know, each, the blast radius is contained, but now you do have to play this game of like how do we upgrade dependencies, right?

[00:04:17]
If it was a monolith, it won't build. If you're not, there's only one version of React, so like, here you go. But now you do have to like navigate these things now. You know, that's where being a human and coordinated across teams, that's why managers have jobs, right? Like it's to make sure that like, you know, things don't get to pure chaos, and this isn't even the most helpful. This could have also been the bucket going down, right?

[00:04:43]
Like, obviously, when we talk about observability and logging and all those things, we'll figure out how to get more nuanced signals around this, but it is now additional complexity that you need to navigate. So I'm just going to take out that intentional strict version check. The nice part is, should the remote team fix their very hardline stance on only supporting React 19, the app show also doesn't have to do anything to update it, right?

[00:05:17]
Again, so that's the nice part. We still have the communication problem, right? And you're like, what communication problem? Well, again, like if we look over the sidebar, we're logged in as Grace Hopper, but the other app has no concept of that because that's not how the context API works across two different apps, right? So we need to like where we solved some autonomy problems and that was great and cool, and now we have created more than one piece, and those more than one pieces need to talk to each other, right, and like, ideally, in most of the architectures you're going to find, yeah, like the job of the app shell is probably to handle stuff like authentication state, right, like, I have yet to work on an application where the most cursed API calls plural is like getting the current user, right, for reasons like I've worked at a company where it's like I believe 11 calls to like actually put together the user model like, you know, because like, well, you know, who is the user, what authorization have?

[00:06:34]
Are they part of a team, you know, like which organizations are they in? Like, what billing plan are they on, so on and so forth. Are they currently suspended? Like, it has always been more than one API call, less than 17. So, but the idea that like you don't want to have that the responsibility of every piece of your federated system makes sense and that should belong to the app system, right, we can probably like come up with fictitious ways that one remote might need to tell something else.

[00:07:08]
Like for instance, let's say, you know, in that hypothetical example from earlier, that you have a team that is working solely on the nav, right, like, you know, you could probably do some clever stuff with the routes, but then how do the routes get registered? Do you have to put that in the app, or do you find some way to have some kind of like global event bus so that the different pieces can talk to each other?

[00:07:32]
Hint, you should have some kind of global event bus so the different pieces can talk to each other. That's the answer, right? I could come up with a bunch of like ridiculous alternatives for funsies, ones that both I would just make up and some that I've seen. But let's assume that, you know, storing stuff in local, you know, all sorts of stuff. But let's say that we would love to get the communication in place.

[00:08:00]
Now, my goal here is, yes, this application is written in React. My goal is not, this is not a course about React. Everything we're doing should be somewhat agnostic, so we will acknowledge the context API exists. We'll acknowledge that its purpose is it takes some amount of data and passes it down the tree without having to like thread it through every single component, and that is pretty like I, like I said, I also use Svelte a lot.

[00:08:31]
There's a concept called the context API and the way that it works is you create the context in a higher level component and it passes the state through the tree without you having to pass the prop through. So like, I feel comfortable enough that like for every framework I've touched, there's some kind of equivalent and with the same restrictions, right? And we need a way to be able to have an object that we can kind of pass around or, you know, either through global state or something along those lines, right, that we can use to communicate to different parts of the application.

[00:09:04]
So we can either have like, you know, we were talking before about like a singleton object, right, an object that can get passed to both apps or get pulled in because they are all running in the same browser window. If they were in iframes, this could get more complicated, right? Not meaningfully so, but you'd have to like leave the iframe and come back in. While these are totally separate repos, and they are totally, you know, effectively separate deployments, it is one browser app, right?

[00:09:38]
Those are those kind of topologies we're talking about before, right? They are all kind of at runtime, they share state, they just don't share the same React tree, right? So we have objects that we can pass around to both and pull in, so on and so forth, we've just got to figure out a way to do that.