Final step really depends on your setup, but since we are using React Navigation, we're just dropping each of those top-level navigators from federated modules as screens within the host application. So whenever we want to display one of those federated modules, we can just push the relevant module and it will be downloaded, loaded, and displayed. If you're interested to play around with this setup, you can scan the QR code. On our GitHub, we have exactly that setup up and running, so you can clone it, you can install dApps, and you're ready to go.
So far, we've been mostly talking about regular flow, but what's interesting is the flow for third-party developers, or maybe if you are a really large organization and you have so many teams that when you meet them in the kitchen, you're like, I haven't seen you before. In that case, this is also going to apply to you. Let's imagine we're really building an Uber application, and a very typical use case is that we're going to include rentals. But we're not going to provide the rentals, right? We will talk with one of those rental companies like Hertz, they will provide rentals from their API. Typically, what we do is we will talk with the third-party developer, we will ask Hertz about their API docs, about everything they have, and then we will go and implement everything. We will do error handling, we will do state management, we'll do UI integration, all sorts of things that are required, and then at the very end, we will make the actual integration which will be tightly coupled with our application.
But what if there was a different way to do this? Well, let's imagine a scenario where we do not implement it, but somebody else implements it for us, which is obviously the best case. So we provide an SDK that includes dev tools, API docs, standards, and everything that is provided by our environment, and then external developers implement actual features following our UI requirements, our standards, our security, our tooling, everything. What they have to create at the end of the day is just this mini application that is working standalone, meets requirements of their business, their business requirements, our requirements, it's standalone. It's a different departure, it's a significant departure from the previous approach because it is not coupled to our application. And what happens later is when they're ready, they're sending over to us through whatever is the system we've established, and that becomes part of our application automatically. And the good news is that this is exactly what Module Federation is about, and you can build it today in React Native with Reapak. So let's have a quick look how we can quickly implement things like SDK. This is based on the principle that React Context works across the boundaries of host and mini application. So on a high level first, we create an SDK package that we expose to external developers. SDK package is something like an interface declaration of what is provided in your environment, and one of the simplest ways to do this is to create React Context. Then the host application uses the context provider to inject the actual values, so a classical dependency injection. And then the mini app uses hooks or consumes the context, getting whatever is provided by the host at a given time as the actual value. So let's go over this step by step, looking at Payments Module for example. So like I said first, we create context. Elegant and simple abstraction, easy to get started. We can provide some error handling, just in case it is misconfigured, and potentially a hook so it's easier for people to work with it. Then we can create a SDK runtime provider, typically what I do myself is I create one and I just encapsulate everything inside so it's easier for me to follow. And this is the component that must be provided by the host to run all the mini apps. So it's kind of like a system environment if you want to run my mini app, you need to provide exactly this. And then host has to provide actual values for each property required by the SDK runtime provider, otherwise it is not going to be seen by the federated module.
Comments