Video details

Angular and Module Federation In-Depth | Manfred Steyer


Manfred Steyer

The implementation of micro frontends has not been easy so far. Module Federation, offered by Webpack 5, changes all this. It allows you to load separately compiled applications at runtime and share libraries between them.
In the first half of this session, Manfred teaches us how to use this module federation to create micro frontends with Angular. You will learn about the default scenarios, dynamic Module Federation, sharing libraries, and dealing with version mismatches. In the second half, Manfred teaches us about Plugin-based architectures. By developing a workflow designer, individual workflow tasks can be exposed via separate applications hosted on different origins and loaded into the workflow designer. This allows one to easily extend the designer without the need to recompile it. By the end of this episode, you will know what module federation is and how to use it in your projects together with the Angular CLI.


Hey, everyone, welcome to this third episode of MGB Life and this episode, we have Manfred Steier, who will be taking us on a journey through Module Federation with ANGULAR. Welcome man Fred. Hi, thanks for having me. So this is a very special episode because normally we have two speakers with two talks, Munford, however. You submitted to sorry, I have an audio echo here, um, let me fix that first. I can't I am constantly hearing myself, so I'll fix that first. Uh. Or there we go. So sorry, so much as a bit of two awesome talks and we reached out to Munford to see if he could make it one big in-depth session and he agreed. So thank you so much for that, Manfred. Really looking forward to learning more today. But before we take off, let's meet our panelists for today. We have a unique Holbrook's we have a math Mascheroni Atto. We have Martin Thibeault and we have some blueberries. Oh, look. Well, thanks for joining us. So if you have ever been to an annual conference before, you have probably already met Manfred's. Is the gentle giant with the Austrian accent that always comes up with fascinating topics and answers all of our questions with a smile. Munford as a trainer, a consultant, a programming architect with a focus on Angular. He's also a Google developer, expert and author and a conference speaker. The implementation of Micro Fronton has not been easy so far because common frameworks and build tools were not aware of the concept at all. Module Federation, which is now introduced with Barpak five, changes all of this. It allows you to load separately, compiled applications at runtime and share library libraries between them and the first half of this session, Munford will teach us how to use this module federation to create micro content Wetangula. We will learn about the default scenarios, about the Dynamic Module Federation, about sharing libraries between them and dealing with a version mismatches. If that's not enough. In the second half of this section, Manfred will teach us about the plugin based architectures, so he will take us on a workflow designer with individual workflow tasks that can be exposed via separate applications, hosted on different origins and loaded into workflow design. Or if you already work with loading stuff across origins, you know how hard that can be. And this will allow us to easily extend the designer without the need to recompile any of its parts. So we'll be awesome. By the end of the episode. We will all know what Module Federation is and how we can use it in our projects. Together with the angler's CLI, Manfred has agreed to taking questions after his talk. So if you have any questions, please leave them in the YouTube life chat on the YouTube page and if you like what you hear, please don't always hesitate to upload there as well. With that, please give it up for Manfred Steier. Thank you. OK, let's get started. So this will be about mutual federation, as mentioned before, which is quite a new topic. And I want to start with this very picture here. Perhaps you have seen this picture before. It's the helicopter from Leonardo da Vinci. This crazy guy, Leonardo Da Vinci, designed the helicopter in fourteen hundred something. Fourteen hundred something. He only designed it because he didn't have the right material for building it. But the thing is, scientists tried to build it several years ago and they found out that it really flies. How cool is that? And this story reminds me somehow the microphone, this because the idea has been around for several years, but there was not the right material for building it. But what do I think when talking about the micro from the inside? Well, I think about a big software system which is subdivided in tiny parts, and those parts are individual applications. That means you can assign one theme to all of those applications. For instance, one theme to the booking application, one theme to the application, one theme to the boarding application, one theme to the chicken application. You don't go with a big overall flight management system, as you might call this, but you have a lot of tiny applications. And so they can work individually. They don't need to coordinate much with each other and they can do their own decisions, technology wise and architecture. So this brings back a lot of flexibility, a lot of it agility. But the big question that arises when doing something like this is how to integrate all those tiny applications that have been developed and deployed separately, how to integrate them into a bigger solution because but they also want to have is one big solution like this here in the middle, like like I call it a shell, a shell which is capable of loading this micro front end loading that's micro from then from a given location. So at the end of the day, it should look like an integrated solution for the user. But from our perspective, from the perspective of programmers, it is just a bunch of little tiny applications. This was not really possible before. I mean, yeah, it was possible, but you'll need a lot of workarounds for doing this. But this is changing now because Modular Federation gives you an official way to load separately compiled stuff, separately deployed stuff into your ship. And this is what this talk will be about in this talk. I will tell you about several things. We will start with module federation in general. I will show you what Module Federation is about and how we can use it. We will also look into how to combine it with Angela. We will also talk about something I'm calling Dynamic Mutual Federation, that means we don't know about our micro from the up front. We only know about them at runtime. They get some data, some meta thought about it, and then we can load this or that micro front in a very dynamic way. We'll talk about the worse version mismatches, but we'll talk about the communication between micro from drones and about what I'm calling Marty Framed or Komaki version microenvironments. This is a perennial topic and I've got that a lot of questions about this recently. And that's why I decided to incudes this topic on short notice in the stock. And at the end, I will also give you an overview about the possible roadmap. But first, let me introduce myself a month. I'm doing a lot of trainings and workshops, for instance, this workshop here, which is about Angola in the enterprise environment, which is my main topic, how to use Angola for big enterprise scale architectures. And besides, there's some also provides connectors to the Angola community. I live in Austria. This is also my accent comes from. I'm doing a lot of stuff in Germany and I'm always happy if I can work together with people from the for instance, in Belgium. So let's get started with that back in general, the main question, Bapak, Commercial Federation is answering is this one here, how to load separately compiled codes. And perhaps you will say no, hey, man, Fred, come on, that's cannot be that difficult, because why not just they can dynamic import? Why not use this dynamic import to point over to another application? Why not to load this application on demand? Well, in theory, this works perfectly in practice, this does not work at all because of the limitations of current bundlers like Bapak, for instance, and we all know this client is using Bapak underneath the covers. And so the C and I also have the same limitations. Why do we have these limitations? Well, all those Spangler's, including Bebek, assume that everything is there as compiled on everything needs to be known at compile time. Everything is compiled together. Everything is optimized together. Think about tree shaking, for instance. And then and only then it is cut into pieces. Falaise. But this is too late because we don't know everything up front when going with microphone, that's everything is separately compiled, everything is separately deployed. And so the first time we know our stuff is that random. This was a big issue in the bust, of course, as always, we found some 30 workarounds to bypass those limitations, but there hasn't been a sound solution for this. And this is changing now with that Big five and modular federation to make this possible, Modular Federation introduces two roles. The first role is to host, and the second role is the remote. I am calling to host Michel on my micro from the shell and I'm calling the remote to my microphone. Then that is loaded into the middle of the show. The marshal federation, we can configure both roles, for instance, we can say, hey, the shell knows this, your LD is your L that is called PMF Ibom, which stands for Micro Front and Fun. It's very creative and always been using this. Your L police point over to this, separate the copilots micro microphone. And by the way, what's called PMF Iran here, it's also called PMF Ibom over there. This would allow me to define and Elia's here it is a non allow us to be more precise because I'm saying, hey, it's called PMF Ibom here and it's also called WMF Iran over whatever. Over there, we can expose funds, they can say, hey, let's expose this IAB component or dysfunction or this angle, the module, you can expose everything. You can also import or export with TypeScript or ECMAScript. In this case, I'm exposing a component under this very name, CMB. And then something beautiful happens, I guarantee you you'll love it, then you can use this very dynamic inboard using the map tops the map, tops from the left side, the map to Bopp's from from the right side. And with this dynamic inboard, you can grip over to the microphone then and loads the exposed components from the. The best thing about this is that Angola does not even recognize this for Angola. This is just traditional easy loading. Angola does not know about mutual federation and it does not know about Microfit around this. It is just doing what it is doing all the time. It is displaying an application and sometimes it's performing lazy loading. That's really beautiful because that means you don't need to meet the framework for loading different single page applications. Called My Reference Map back underneath the covers is taking care of all that heavy lifting, of loading separately compiled stuff and giving it to ÀNGEL. Of course, we need some other than about the micro then. And that's why Marchal Federation is generating a special file, then building the remote. This file is called the remote entry points, and this remote entry points needs to be loaded up front into your shell. It should be loaded up front into the shell so that the shell knows about this microphone then so that the shell knows about all the meta data and so that the shell is capable of loading its ondemand. You can do this with a dynamic script that, as we will see in the course of this talk, there are even some more dynamic solutions for this. You don't need to hardcoded. The best thing of this is that you can even share libraries, so let's say we have Angola on the left side, let's say we have Angola on the right side. We can trust Shiites. And in this case, Angola is only loaded once because obviously then we have 10 Micra and then we do not want to load Angola 10 times. That would be quite an overhead, wouldn't it? And so the ability of sharing stuff is really a review by the. So this is the foundation and the theory behind modular federation, of course, now the big question that arises for us angular developers is how can we use these Tokarev if the Seelie? This is a bit of a challenge, not at all a big challenge, but a big of a challenge, Rick. Developers don't have this challenge because most of them are using Bapak directly. I think they have the same situation in the world of you, but you'll have to angle Azulai and the good messages to Seelie is using Bapak. That's fine. That Fatma's such is that the Seelie is shielding Bapak for us. Normally this is also a good message because no one wants to get in touch with all the details of that back with its huge configuration file. It's not that much fun if you ask me, but in this very case we want because in this very case we have a mutual federation config and somehow we want to squeeze it into the Bapak configuration, which is shielded from us. That means we need to find a way to tap into the inner workings of the Seelie and to tell Bapak underneath the covers that it needs to use this module federation config. But here we are lucky because since the classics we have custom builders and builder is something like an exchange of Triva, a builder takes care of building an application. For instance, if you build a traditional application, then by default, the Seelie is using a backpack builder. If you are building a library, the Seelie is using an entry Kuchera based builder. And what we can do now is we could create a custom builder, which is taking the Molcho Federation config, which is passing it to Bapak underneath the covers. And then everything we need to do is to delegate to the default builder, the default builder that is always telling Angola Seelie to build this or that application using Bapak. So they could write this by hand. Of course, it would be a matter of, let's say, 50 lines of code, give or take, but you don't need to build it by hand because I already did this for you. You can download it. The name is Angela Architect's Module Federation. You can even and she ate it. And this will enable module federation in your Seelie 11. This library is doing three things for you. First of all, it generates the skeleton for your module federation configuration. That means you don't need to learn it by heart. You'll get your skeleton. You just need to fill in the lacking parts of the skeleton. Then it installs a custom built up, which is in the building module federation underneath the covers, and it assigns a new board for End-user. This is more of cause for debarking, this allows you to run several application side by side, which is normally he's been going this module federation. Their usage of it is quite straightforward, if you ask me, you can, and she added. After that, you need to adjust that rate, that configuration, and then you can and she saw fit to try that. And this is what I want to show you here in my first demonstration. So let's switch to my brother. And let's open an application I have prepared this, here is my application. It should be capable of loading separately compiled micro frampton's at least after we are done with it and unload three thousand finds my microphone that this is my rats' micro front end, as I call it. You can notice it by looking at the dashboard red lines. And now what I want to accomplish is I want to load the microphone and into my shell then clicking here. So let's try it out. Let's click on flights and we see. Nothing, we see nothing because this hasn't been implemented yet. This is now our job during this first life coding demonstration. So if we look into the source code for this here, it is just a mono repository, it does not need to be vulnerable. But for the sake of simplicity, everything is here within my mono. Everything is part of my project folder. There is my microphone one and there is Michelle. But before we look into the source codes, let's have a look into the package, Chazen, if we scroll down here, we see I'm using Angolite 11 plus I'm using the CLIA 11. And that batsmen's such as the SEAL 11 is still using Bapak four, which is quite a pity because we need that back five for multiple for the reason it is the bad message. The good message is that the SEAL 11 allows us to opt in to Bapak five, the Angola team, especially the SEAL Edem and some contributor's did some efforts. They made sure it works more or less if we use that back five to it. This is still experimental so that we can start trying it out for protection use case that it was cases it still uses that for. To force the Seelie into Bapak fire, which just needs those lines of code here, those lines of code force, each and every dependancy into using Bebek five, then will see see young. That means we need to use young here, this does not work with NPM out of the box battle for MBM, there is some special additional bycatch which respects this. But if you want to have out of the box solution a turnkey solution, then go with. This is what I did here. I already installed my dependencies, Vivian. And so I'm forced into that Bc5. OK, now let's switch to the console here. I have one that for Michel and another that for my microphone. And first of all, let's enable my microphone round then for my actual federation and at Angola, our key facts module federation. Now the package is downloaded and then it will ask me two questions, namely, which project do you want to enable for module federation? You know, we have a mono ripple, so there are several possible projects. And the second question is, which parts do you want to use? So here I'm saying, hell, please, let's enable the microphone from the front. And I want to use Borderfree. Now, a lot of stuff is generated for me, I'm getting the skeleton of my backpack configuration, you don't need to worry. This is not a fully blown backpack configuration. Is this just a partial one? It only contains what we need for my actual federation. The rest is still generated by Dangol Azulai. Within Angola, Chazen, we get the board number assigned and also our special, our special builder, which is enabling module federation underneath the covers and somehow the main file is changed. Let's have a look into the new main fun. You will be surprised if Maine gets fired and now looks like this. So I know this looks a bit special, but this is a common pattern in the world of mutual federation. The thing is, the main file is the Nemacolin bought another file, the bootstrap file, and this file is taken care of, bootstrapping to angle application. So everything they would expect with a name is now within bootstrap. And this is on purpose because this dynamic import is, as you know. Asynchronous and because it's asynchronous, it gives Marchal Federation some time, some time for performing some other asynchronous operations in between, and those operations are deciding upon which dependencies to load shell and loads the shared dependency from here or there. Perhaps several other roles are sharing Angola core. And now the big question is, do we take mine or do we take yours? This is what they happen here. And I'm also calling this the negotiation of Shiite libraries. As we will see in some minutes, those different roles, those different applications negotiate about which Shiite library to take my angle. Your angle. There's something like this. OK, is this just a bad you will recognize this bad in lots of modular federation based applications. OK, so what we did so far is NC adding this to our microphone. Then let's do the same for the shell. The shell gets to board five thousand now when everything is generated for us, the Bapak config and the Angola Cheesiness updated and we get our main bootstrap. It's trick. OK, now we can start using it, and for this, I'm switching to my source code and here I'm starting with my microphone. But then here we seem I have my that Bapak config, but you don't need to worry, it is just about everyone. See how tiny it is, only two pages long with this font size. And the main part of this is within the modular federation blocking. This is what activates marginal federation within Bapak. Here we have two sections, both of them are commanded out, the first section are is for remotes for our micro frampton's. The second one is for hosts for. Here we are talking about M.F. Yvonne Micrograph, Brandon's mom, and so let's go with that first section, which is about configuring the micro from my microphone that gets a local name. There is a name for the remote entry points, which contains the metadata about this very micro from that, the meta thought that the shell needs to know for loading it. And here I can expose stuff. So let me expose a module. It's called my flight's module for lights. That module. Yes. I don't read this section, but I want to share stuff. I mean, yeah, I'm a lonely child, but nevertheless I like to share stuff. And that's why I'm saying, hey, I want to share my angle with you. Before on the slides, you've seen the shorthand version of this. It was just an array and array that looked like this, that sheer angular core and angular common and so on and so forth. It is the easy version here, I'm using the more advanced version, this more advanced version allows me to configure each of those shared libraries here. I'm saying, hey, Angle Lacau is a singleton. That means here we are going with the Hylan. The principle, I guess you know the Hylander principle. There can only be one. That means if there are two different versions of Angola, two different non compatible versions, we will get that one. Let's say the shell is using Angola eight and the micro from end is using Angola eleven. Because of the Singleton restriction, we would get a one. And strict version to rule is telling us, hey, don't just provide a warning, provide an exception instead. So this is the very strict version of doing it, saying, no, this is forbidden. It is Fabletown. You don't allow us to use two different versions of Angella without this. This would be Arata, the Austrian kind of doing things. You know, I'm Austrian. That's why I'm allowed to pronounce it that way. To put it that way, it's something like, yeah, you know, this can be bad, but perhaps it works. Who knows? Let's try out. Perhaps nobody finds out. What is your favorite Streckfus? OK, so I think I'm sticking with the strict version. Yeah. So as you've seen here, I can sheaffe stuff at the end of the day and I can expose stuff for other hosts for the show, for instance. If we look at my flight module. Then we see it is a traditional Angola actual with child Roets, that means men I am rooting do it so I can jump to it's very child's roots defined in here. OK, this is my microphone grant. At the end of the day, a traditional angle application with a martial federation. Now let's switch back to our show here. We do exactly the same. If we look in here to Bapak conflict that has been generated is skeleton. You see the same entries and the heart of it is once again the model federation. I don't want to configure a remote now, I want to configure. My host and I'm telling my hosts that this is a comment and I'm also telling it that I want to be capable of loathing MF Ibom, which is Spiderbait also called PMF evil and what they are. And this is the remote and for point where you can find it. Of course, it is very hard coded, isn't it? It's what I'm calling static federation, and I like this for testing purposes, for debugging purposes, for demonstrations in real world, of course, we will switch to something I'm calling Dynamic Federation. We will look into this during this deep. But first thing first, you know, first of all, we need to bake the cake and then we can stick candles and it's not the other way around. The rest here is the same. I'm also sharing stuff and I have configured my share stuff. So now Michelle is capable of loading stuff from over, they are from the micro front and one just by using the Euro PMF Ibom. Now, let's have a look into the shells routing configuration. Approach Verity's, here it is, and here we can find a dynamic route or easy route to say the least, and this lazy route looks like all the lazy routes out there in the world of Angola. We have above the U.S. little children and points to some YORO. But the big difference here is that this your owl does not exist as compiled on it only exists at random, at random. Bapak underneath the covers knows what to do with this year owl. It not only points to the module all they are within amphibian. Of course, TypeScript is not amused about this because, you know, TypeScript is about static typing and TypeScript is complaining because it does not know it is. It says something like it. It says, hey, I don't know, this file must be a mistake. And we can now tell TypeScript, no, the script, it's not a mistake. I know you don't know it, but trust me, I'm an expert. This file will exist at around the end to Dettelbach. We need the file name. Doesn't matter if it is called if the ending the test and Bapak know TypeScript will pick it up and respect its contents. I'm saying, hey, there is this module. It is not there at compile time, but trust me, it will be there at random. Now, as you see, that script is E-, everything is fine. OK, so one more time, a traditional angle application using lazy loading and by incident that back underneath the covers knows how to resolve this very early. And that should it be so, I would say, let's try it out here on the left side, let's start my Shalika. We are on the right side. Let's start my microphone and one, let's cross fingers. So that the tamo gods are on our son's shoulders or something running. No, it's OK. Should it be OK? Yeah, you know, patience is a gift. Not my gift, but it's a gift. Don't be bothered about those red lines here, it is just a warning and the warnings are for hazards. No, honestly, as mentioned before, the integration of EPIC five into the Seelie 11 is still experimental. Bapak five is stable, but the integration into the Alize experimental. And so we need to expect some challenges. The best thing we get are warnings. Sometimes we are getting even worse. So, yeah, as mentioned, it's experimental, but I think that looks good. So let us try it out. Let's switch to our application. You have Michelle, let's reload it. Let's click on flights and yeah, it works. It's always a good feeling when I'm changing several files in front of a camera and if it actually works. So here we see that our micro from the that has been filed separately, deployed separately, is loaded on demand. And the best thing is the shantal comes from a different origin, localhost five thousand versus localhost 3000. Come on. Yeah, here it is nice. So let's also have a look to it's using the network networked app. Let's reload this. Let's kick fly and A.C., this bundle, it is called common for some reason, is loaded on demand from over. They are low cost freedom and it's also pretty tiny. Eleven dot, six case, I think that proves that angle itself is shared because otherwise the bundle size sports bar would be far bigger. OK, I really like this because that was not really possible before. Supercute. So this was the introduction part of everything. This is what I'm showing normally to normal people, but for you, I've brought some extras for you, I've brought my deep dive. And that's why I will proceed now with a first chapter and the fourth and the fifth and so on. And the next chapter is about Dynamic Module Federation. If you ask me, is this quite an important topic? Because somehow we do not want to know how a micro front ends up from. In the best case, we don't know nothing about our micro from thence up front. In the best case, we get some metered out that compiled on at random. Perhaps we are downloading something from a lookup service and this lookup service tells us, well, over there are there is this microphone down here or there is that brand new microphone there and feel free to load it. And that's why I want to get rid of this remote section. On the other side, of course, I'm exposing stuff, modules, components and so on, and then I want to have a way to load everything dynamically just by defining the key data at runtime, like the entry point from over there. Are there remotes name from over there and the name of the exposed component? This is normally not that's bready, this is just to help a function which is delegating to the Bapak runtime API. The Bapak runtime API is quite a low level API. It sits around in your window up checked when you have compiled your application with Fatback and it allows you to do those things after searching different objects within window and dealing with them. You can do this. So here I am going with this helper function that is also exposed by that library I have, and that's before. OK, let's try this old. For this, let's switch to the map configuration of our shell. Let me copy this. And let's get Rex. Our remotes, because now we do not want to know about our remotes up front. Instead of this, I'm switching to my app roots configuration of the shell. And here I am not using import anymore instead and. Of friends, it seems that your microphone is not working anymore. Oh, yeah, I was muted for some reason. Yes, you're back. Thank you. Great, great. Now, somehow, my laptop was stuck and then I was mute, that it's it's a crazy world, isn't it? But the thing is, instead of using Imbert, I'm going with load remote module. And here I am putting in the key Duckburg, like the exposed module. Like the remote's name. And like that remote injury, well, the remote injuries to your L of copy pasted from the configuration and you'll see it is just the thing they could loads these dynamically from a configuration or from the server side. The remote name is Murphy Brown and the exposed module has the corrective name slash module. Perhaps we bring this in an. I'm a little monk when it comes to this in the future, Monk, it needs to be in a specific order so that it makes sense. And after loading this, we need this time here because the load that typescript module can export several things. And to you, I want to go with the floods much. So this should work now, hopefully so let's cross fingers again and let's try it out. Let's switch over to our shell and say it worked. Let's do it one more time. It really worked. Now, everything is really dynamic. No hard coded pops in our configuration anymore, but we will notice a little tiny thing when we press F 12 and look at the network. Here, let me click flights. OK, let me reload everything and then let's kick flights and see that two things are loaded. First of all, the remote entry points and then our micro front end itself. That means we get two requests. First of all, the meta data and then the micro front end itself. Well, and the thing is, this is OK. But it would be better if we showed that the remote and buoyant up front at the start of the application, because this Sumar Michelle has all the metadata of all the microphone around that, that it can negotiate about the shut libraries. I will come back to this in some minutes. For the time being, please remember, it is important or it is not important, but you have benefits when loading this remote and file up front to have your meet the thought that as soon as possible. And to allow this, that's cool, man is out here. Let's go over to our main file. Until we can import another function from Angola architect's module federation called remote to remote entry. So, of course, this is asynchronous and here we can now define our Eurail and the name of the reference and copy paste the URL because I know I know myself, I will mess up then I need to type plans. Plans. Is this asynchronous? This will return, of course. Promise and after that. After that. Let's bootstrap our application. And one more time after that, let's catch and LVA, if we have fun, we can also catch the arrow before it, which means if something does not work, then at least the application is bootstrapped. If they get an here, then we might not be capable of loading this or that micro from then, but we can bootstrap their shell and you will see it's perhaps a bit. OK, now tell me about is loaded up front, and that means we can negotiate about libraries, but that means we will see in some seconds. OK, so let me try this out, let's press 12, let's reload it, and here we should see the remote and rebuying from over there you see localhost for eight hours and then I'm clicking here only the micro front end itself. And this beautiful picture here is loaded. Dynamic Marchelle Federation, of course, one thing you are wondering about all the time, I know it's I can feel it is how does Moggill Federation deal with Russia mismanages? Well, the thing is, it has some really clever strategies for it, perhaps a little story. Mocho Federation was implemented twice. It was implemented another time it was reimplemented. That's because the author of that book recognized that they need a better story for dealing with mismatches. And one of the best features of this rewrite is that by default, the federation is going with semantic versioning. And so it can detect the highest compatible version. So let me show you an example for this. Let's say we have I shall show and let's say we have a microphone that. And let's also see here we have Angola 11 oh, and here we have 11 by. What happens now is that Beck is loading hopefully all the metadata at the beginning when the shell is started, and so it knows about diversions that are used and now and negotiation takes happen. And within this negotiation module, Federation tries to find out the hire's compatible version. Well, obviously here the highest compatible version is 11 one 11 dot. One is with regards to semantic versioning, compatible to 11. And so they decide to go with 11 dot one. If it would be the other way round, we would also get 11. one because of this negotiation. That's fine, it's fine because we have the highest compatible version, but let's assume there is not a thing like that one and only Hyatt's compatible version. Let's say here we have Ben and they are we have 11. By definition, 10 and 11 are not compatible to each other because we have two different versions. And so the fallback is that everyone uses its own version. You can even relax, it's we can say, hey, module federation, we know this one has been built with Angola 10, but trust me, it will work with Angola 11. Of course, no guarantees that it will work, but we can tell Marshall Federation to do so and then Module Federation will accept Angola 11. Even so, this part was compiled with Angola. No guarantees from the Angola team. No guarantees from me, but if you try out, if you have a sound amount of end to end this, then you might find out that it works. I think chances are given, because if we look at the core of Angola, nine, 10 and 11, we see not much has been changed between those major Birkins. You can also go with a singing, you can say, hey, there is only one version of everything, and as discussed before, you can see if there is not one hire's compatible version, if you have 10 and 11, then give me a warning or equipment. If they get a warning, they go with the highest version, which is angle 11, if we get an area, we go with nothing because then the application will crash, fail fast. I know this is a lot of theory, that's why I broke it down for you to several examples. So let's assume our shell is going with the library in the version 10 and let's see the macro front. And one is going with a library in the world and one one and we have a micro front and two, which is still using version nine. In this case, at least, if we have all the metadata up front, when the shell starts, they can do our little tiny negotiation and as a result, Shell and Iran will share the highest compatible version, which is then Bongbong and Micro from then to will fall back to its own version, which is not. This is the case if we have all the metadata up front so we can negotiate here, but now let's assume the same scenario. But no, we are using dynamic federation and we are loading the metadata far too late. That means the metadata of the microphone then is not available when the negotiation data. And the negotiation during the start of the shell takes up, so the shell does not know that there is a high compatible version and so the shell will decide for Angola 10. And when that microphone, that one is loaded, it will decide for angle of ten, one one. Because. It might not work with Angola Tan, perhaps it needs a feature that has been at odds with Angola 10 one or a fix that has been at odds with Angola 10 Bongbong. As you see here, it is really vital to load your your meat, the thought that up front. Let me show another example. Now the shell is using 10.1 on the microphone and is using version 10. We are also loading everything to lead a very dynamic federation. The result is both will use more than one one the shell cannot negotiate. So it takes it on. And at runtime, we will find out that 10.1 also works even if we just need 10 00. Yeah, really smart, if you ask really smart behavior, default behavior of Molcho Federation. So if you ask me what to do then going with dynamic iteration, one option would be to make sure the shell has always the highest versions. Then you are on the safe side, or as mentioned several times before, just loads the meta data up front, not the rest, only the meta of all the applications. And then you have this negotiation. We've seen this before, they can define a library as a single. And if we set this to true, we get an hour, if there is not one single compatible version without this one. And this is what relaxing would look like here, I would tell my child federation, hey, here, normally we needed, let's say version 10, but I know I'm not losing much of it. It will work with this version range one to 11 something. Yeah, I know this is quite a tough topic, but I think we have some examples in that one can remember those things. So one question I'm always getting after doing just an introduction in Dumouchel Federation is how to communicate with each other. And as we have enough time today, I can tell you how to communicate between Microsoft, that's key idea is to share another library, not Angella, not a router, but your own communication library and its own communication library could contain a communication service. Perhaps it allows to do message passing. Message passing is very unobtrusive way of communicating between parts of the system. I'm sending out an event when something happens, and I'm not assuming that anyone is interested into it. Perhaps all the other parts of the system are in the rest, that perhaps no one is interested. I'm I still don't know and I do not care a trust, informants, everything who is in the rest of us can act upon this events. And this library could be a separate library and be back, or it could also be part of a Molnau repository. In the next demonstration, I will, of course, use my mono repository, so let's have a look at it. You're just stopping everything. Let's make a clean slate and now I'm generating a library, let's call it common. This is my communication library also to use this communication library with in my. Vulnerable, I'm doing what I'm calling an ex style monolinguals. Throwing the football from the thing is the wrong file. Let me switch to my be config Chazen. He'll have hope of mapping for come and let us point to project slash com slash source and I think we have probably API, so please let me double check. If this buff Ridvan, because I'm so clumsy, I tell you. Projects come source. Public API looks good. That means every time I'm using an inboard for this. I will get my public API imported, which is exposing this very servicio. OK, that's good, isn't it? So let's jump into our communication service and here I'm great. I'm doing it in a very simple way, a read only event subject. It is a new subject. Played against them in the movie, and I will recognize the last 10 events here, it is just a string, but normally you would have a sound interface for your domain event, something like this in the Phase four main event with a name. And let's say a bailout. Sorry for using any. This reminds us to the events the name is kicking, the Bailleau tells us if the control key has suppressed or the shift key. Here, I'm just going with a string instead. OK, this is my comm service, so let us jump into that shell. The shell has this component. Yes. If you are within the shell, I'm getting hold of my communication service. Consummates, consummates. Grasping at and I'm sending an event out there. The event is called Hello from Shell. I'm now here. I started. And of course, if we share this service, if you share the whole communication library, then our from then should be capable of receiving this message. So let's switch to our flight search component. It's a part of our microphone, don't ignore the rest here and let's inject our common service. And one more time. I'm using the Common Service to receive a message. Subscribe. That search console lock. PMF, Iran got a message. OK, that's everything. So normally you would not publish this to MBM and share it, in our case, it's part of the Moon report and that's why we need to tell that generated Bapak conflict chests about this Molnau report based library for is just added here to this array. So at this point, this plugin is doing several things behind the cabal's to make this work, but it's nicely abstracted. So only mention the library name here within the Shell Swapper config and they're. Beth and. And micro front and snap back that show that's been. Let us retry this, let's start this. Some time, of course. Perhaps, you know, at sea, at sea is the oldest Austrian, he is about five thousand years old, he's a mummy. They found him in the mountains indications and no one exactly knows how he died. But my theory is he died waiting for it built back then. So don't be like Azzi. Yeah, everything is cool here. Let's reload this. Let's click on flights that suppress F 12. Let's go to the consul. And look at this map, Yvonne got the message, namely, hello from the shell, let's redo it. We are reloading the shell the shell is sending out and even the message we are lazy loading our flights or Rowe from the sun. It gets our message. This is how to share our messages to share. Don't overdo it. Limit it to a minimum because. Communicating is cooperating parts to each other, and this is all about reducing company. Nice, so I have two chapters left for you. I hope you have some energy. The next thing is also something I ask a lot, because in some companies, people want to mix and match, let's say, different versions of ANGULAR and perhaps they want to mix and match Angella with Rick. Obviously, there are several drawbacks in doing this, like bundle size us, you know, you'll need to load Angola eight, Angola nine, Angola 10, Angola 11. Obviously this is not a good idea. Then we talk about tiny bundle sizes, but it seems to be that there is a need for this, at least several companies and working with telling me to have the need for this. And at least I want to evaluate the options for this. The key idea here is to expose and rap about components via Mocho Federation. That means you don't expose an Angola module, you don't expose a component, you expose about components. And obviously then going with Angola, you can create this map component with Angola elements. As mentioned, the bundle size is a big issue here because you'll need to download all those all those versions and framework's and besides this, you also need some additional workarounds. It's doable. I've helped several companies build systems like this. But as always, when it comes to architecture, you need to know about your tradeoffs. There are always some tradeoffs and then you can design. In the example I will show you now, I have. Shell. I have three micro friends, MF, Yvon, MF to MF Re the Shell and MF, if one are sharing one Anglo version, MF E two and MF Resharing, another angle version and MF efore is using react. So let's have a look into this. For this, let me close my example here. I thank you, my friend. Let's go to my Marty example. And let's started so here I am using Lerner to start all my applications side by side at the same moment. It gives me a colorful output. I love it. Perhaps, you know, Lerner, it's one of the more heavy aid solutions for Molnau repositories. But I did before was more of the lightweight solution. OK, you know, you need to start five applications, so this takes some time. OK, nothing happens anymore. That's hopefully a good sign. So let's try it out, localhost four thousand two hundred. Here we go. This is our travel. Perhaps you'll recognize this beautiful design. And you'll see here the shell is using angular 11 hours to. I just needed to have several versions, my girlfriend's mom is also using Angola 11 hours two, so Angola 11, RC two is shared within between the shell and micro from one. And here we even have some roads. Then we look at microfilmed and to this is another map component using our C0 you its works since version 11. So I needed to just scrap different versions within 11 and here within microfilmed and three. I'm also using our ccra so our C0 is shared between those two of them. And here we have this framework that if the atom wrecked and this is using a specific wrecked version, so I'm mixing and matching different frameworks and versions here, and this only works because I have wrapped all those micro dents in the Web components. Let us have a tiny look into the source code. For instance, let us kills here everything and let's move to microfilmed and one. Here we have our app module and, well, it's a traditional app module it to cure some components and some roads. And those lines of codes is what we need for wrapping our component as a component. Perhaps you've seen this before. It's the elements. I'm using the injector. I'm calling create custom element and passing in my Angola component and the injector, and I'm getting all the components. And then there's that component is registered with the browser under this name. It is really registered if the browser that means the browser breaks care of rendering this element everytime the browser sees something like this. Our Angola element, our component will be rendered and because the barrels also takes care of it. I can you will see it together with each and every framework out there. If we look to the mutual federation config. Of PMF Iran. You see that I'm exposing my bootstrapped, as you remember, the bootstrappers is calling the main, the main as is bootstrapping our module. And as we have seen before, the F module intern is figuring out that component. They are exposing this, and so we get to hear our component and a bit of a angle, Lacau and the rest is shared. At least if someone else is using the same major version, then we will share it with them. On the other side with Michelle. Beth and Michelle, I'm just relating to a wrap up component. You'll see it here for me. Yvonne, I'm rooting to my rep component for me to wrap and Ruth into my wrap up component for free and M.F. for exactly the right thing to accomplish. And so that's quite a tongue twister, isn't it? Rapping to now routing to a rap component to seeds, then diamond in a very fast way. It's always the same components, but it's always configured in a different way. This is a. And wealth is not a property is doing here. It tells about the micro from the land and about the elements. And then at runtime, I'm importing that component from there and I'm creating an element with this technique. This is what happens inside the wrapper component. This allows me to out to my map components, even though they're out there, it's not capable of it. Also, those web components might use routing. And that's why I'm not using here and your. Instead, I'm using a half measure and your Metcher, which tells Taruta, well, everything that starts with PMF, Yvonne, leads to this RAPPA component with this configuration. And then it is up to that low, that Web component, what it does with the rest of the your. Here, I'm just going to fit your album. It is one of the work arounds I've told you about. Yeah, so you'll see it here. It's possible, but think twice before you do it, because it's it's a bit more heavy beat. You'll need some workarounds like Rappa components, like barve machos. Perhaps you are saying, well, I like all of this, but I don't need micro Frampton's. Is there another reason why I should go with mutual federation? And the there is another reason you could use it to build plug ins systems because no one forces you into exposing Microsoft round dance with Motorola Federation. You can expose literally everything, components, functions, garcés, everything. And this allows you to extend an existing system without recompiling it, which can just load plug ins from there, from here and so on. To demonstrate this, I've built a workflow designer and here only the workflow design is part of our solution. The workflow tasks are plugins loaded from a different origin by means of module federation. That means I can extend it with new tasks without the need to rebuild the work flow designer, which is especially important if the workflow design is, let's say, is a software as a service product, perhaps this customer has a license to download ask another customer, gave us some additional sheets of paper and so they can also use to upload. So let's have a look into this last demonstration for Toby. Get rid of this. Let me jump in to the workflow example. Windows terminal. Let me and she has served the shell. Let me and she's sort of my first plug in, I'm calling it microfilmed and fun, but it's a matter of fact, it's it's a plug in. And let's call it. And let's call or serve my second black in my second Micra from the. OK, let's take some time. Yeah, this is our workflow, Disano. This is here, my first plug in. My first plug in, it exposes those two tasks over local three thousand. And here you have some Burmah second plug in. So let me close everything we don't need. Yeah, you have to have my second plug in. It provides those two tasks as plug ins. And when the shelling started, it only gets this configuration here. This configuration that is telling the shell, well, today you'll find a task called download over there. This is the remote entry. This is the name of the remote. And this is the name of the exposed module, which is here, an I.V. component. The same is true for uploads. This is the remote and it's the same. This is the remote name, but it's called Over There. And this is the export module, which in turn exports another IVI component. And the same is true for stuff to get from low cost free dollars. And one so this is just Reath as random. And then this example is you will see a pandemic federation as you have seen it before, too, at our tasks dynamically from here and there. Well, the thing is, this was a case study for a customer of mine who is doing stuff like this, who is providing a software as a service solution, which is a workflow design. Of course, this workflow design they build is a bit more powerful than this here. I'm just dynamically inserting I.B. components. You'll get the source code of this so you can look up all the details. Yeah, so perhaps you like this perhaps to say this is the missing link to our architecture. Finally, we can be that flexible without lots of dirty work arounds. Man, can we have it? The answer is MPEG five is final, Bapak, five or so, feel free to use it. Also, Seelie, 11 is final, so feel free to use it, but. As mentioned before, the integration of Bapak five into the Seelie is experimental. That's why you will run into pitfalls, that's why you will get some warnings here you have you will get this letter afterwards, you have kept up with all the issues are recorded of the integration. And HIF also document that some additional pitfalls. That means you can use it now for experimenting, for creating your hypothesis, you know, and architecture is very often a hypothesis, the hypothesis that needs to be proved with code. And you can try it out. You can start with this micro from then and with that micro front and work on it in isolation. And you'll know that at some point in the future, you will get a sound integration with, I guess, Seelie, twelth, which is TUDA Spring. So it's not that long. It's about five month or something like this, and then you can integrate your microphone dance. Until then, my recommendation is play around with it, integrate them for the time being with hyperlinks and then integrate them with a sound solution with Seelie 12, Bapak five and Mocho Federation. If you like this stock, you will perhaps also like my free ebook two weekends ago if updated it for Module Federation. Now it consists of, I think, four chapters describing everything I've shown you so far and a bit more, and you can get it for free from here. Angola Architect Sale Slash Book. So let me come to a conclusion. We've seen several things today. We've seen that modular federation is really a game changer because it allows us to load separately the ball deployed and compiled codes at random. Which is the key for micro Frampton's it can use this to get of if Angella by leveraging this tiny plug in, we can do everything dynamically at random. That means we don't need to know about our stuff up front. It can deal perfectly with version mismatches. And if we use some workaround, some tricks, if we use, let's say, map components, we can even create a multi framework Mardirossian scenario. Also, we have seen this is not only good for micro, from thence we can even use it for a plug in system like my workflow design. And then this one last thing. There is one last thing I want you to remember. If you forget about everything, please always remember this one thing, namely now it's the time. To become. The next. Leonardo Da Vinci. So take your chance now you even have all the material to implement your beautiful design, take your chance to become the next Leonardo. So thanks for having me here. You'll find my contact. I have already uploaded my slides to my blog. And if you like, follow me on Twitter to keep in contact. So thanks for this. Wow, this is amazing. Thank you so much, man, Fred, really, really awesome. This will enable us all to try and become the next Leonardos. I've never seen anyone run so many applications at the same time in one talk. So this is really blowing and can't think about the possibilities is truly endless. And so really limited budget is also blowing up. We have a chat on YouTube. We have a chat on Facebook. Many questions are coming in. So, Sam. Do you want to put some of the questions on the on the screen here? So first question is, is micro Frontalot different than components? Well, I would say and micro from the point is an application of its own and we can load it into a bigger application, into a shell application, because the user is not interested in having 50 separate applications. So for the use, it must look like one integrated solution. But we as developers are interested into it because it allows us to scale over themes. One theme can work on this, one theme can work on that. And they don't need to coordinate each other. They don't need to slow each other down all the time. Got it. Someone else asked about different angular versions, but you tackled that one already, which is handled really gracefully. So thank you for asking that question. Now we have another one. How do you handle scissors clashes between remote organs? Yeah, interesting one. Yeah, that's the interesting question because there are different answers to it. So we have really different opportunities. One possibility would be to share a design library. Let's say you have a design library with your design system and your chest. Shiites, of course, if you're Shiite, you have a lot of consistency because everything looks the same way automatically. But on the other side, sharing stuff brings in some dependencies and coupling because now you are coupled to a very specific version of this library. And so some people try to get rid of this dependency by just sharing a logically designed system. They are defining some tokens. And so each and every team has the maximum of flexibility. They can decide by themselves how to implement this design system, how to implement those design tokens. And there are some solutions in between something like insourcing, which means there are some serious files or source files shared internally. And you can use it as is or you can take it and you can just for Kit and adjust it to your needs. So you have the best of both worlds. You are not slowed down because of depending upon the shared library and you can do your requests. So it's up to you, you have those possibilities, and at the end of the day, it's a trade off between consistency and flexibility. You don't can get both for one hundred percent. Yep, got it, makes sense. Thank you and thank you. Great question. Another question, this one came in via that Facebook page, so can the concept of Dynamic Module Federation also work in a server node environment? You mentioned a decorated window object for browsers. Would that also work in a node context? Yeah, that's one of the best things. So because it's faith in the Bapak, it also works with server side rendering because the application does not even notice at all that's there as separate the comp.. Remote is loaded. It just looks like lazy loading. So I'm always saying if it works with lazy loading, it works with module for the. The last example is a bit critically, where I used map components, because you know that components and server side rendering, yeah, it might work, but you'll need some additional workarounds like puppeteer or removing shadow dome on the server side. So this might be a bit tricky, but all the rest, gravitons don't go with components, works perfectly with server side rendering, and it has even been tested with server side rendering heavily. It was one of their use case when they built it. Wow, that's amazing. Really great news. All right, next question, what about. You had to keep coming. So there's a lot of questions from all over the world here, so that's really, really awesome. What about authentication and open I.D. Connector or to shall code flow, I presume? But what about the HTP interceptor that passes the access token here? So the first thing is using token based authentication makes sense because you can easily share your token. You could also handle everything through the same origin. Then it would even work if you own the cookies. But using tokens is more flexible for sure just yet with your message plus or if your special storage, there are a lot of open to discussions if the session storage is OK or not. But let me just say your Shiite's somehow did OK. And the other question is what's with the HDB interceptor? So the thing is, if your shower Angola, then you have one. Should it be interceptor? And this will do the heavy lifting for you. But are cement, so, yeah, basically by sharing ANGULAR, you also have the same dependency injection, you have the same Singleton HP service. Yeah, totally. So it's really the same as lazy loading from Angela's perspective. LOL, I think everyone is blown away by it. Well, this is awesome. It can do so much. Um, so what else have you ever run into issues when things starting up in the wrong order, like if you put in. Or just OK to be running at the point where you need to load the browser page. Um, if you go with Static Marshall Federation, then you'll need to start everything in the right order. At least within your browser. If it is more dynamic, you can do your own retries, so if it is not starer, then you can try to load it and load it again, something like this. OK, got it. And greetings from Denver, Colorado, apparently. So that's really, really awesome. Thanks for joining from from over Denver decorating Denver. I know my kids, at least from Twitter. You know those times, you know our profile pictures. And so I remember Mikey Mickey Lexigram. Also, thank you for joining me, Michael. Next question, have you run into cash issues yet with men loading microphones? Not really, because even with microphone pans, you still use hash values as part of your filenames. And so you don't have those issues yet. So they automatically cash busts and. Yeah, totally, yeah, and great questions on the next question is when using microphone turns. And next, do you have an approach for sharing, typing if component services exposed by remotes so that they are properly consumed by hosts? So first of all, maybe is it is it because we saw like angular mono repo working also in Anex, the schematics that you that you wrote, that's compact. Yeah, yeah. It's test-Drive both. It works with both. And yeah, you'll need some shared library with type things with tedious files. So it is doable there. Wow. And then a lot of feedback, really cool, nicely done, Monfort, someone asked, can we pass props for communication? I guess anything can be passed, right, if you have a communication service that. But so can't we pass passes props for communication. Not sure if that's in the context of the Angerer react component there or if it's between the different microphones. So it works in all the cases. If not, everything is. Angela, you'll need to go before Sharett. Let's say ECMAScript object. If it is angle, if everything is angle, you could share services including. Got. All right, so everyone is throwing thank you at you, Manfred's a lot of Clapp's a lot of, uh, celebrations here. Really awesome. Thanks for this awesome session indeed, and thanks for going so in depth. I do have some personal questions left here on the Model Federation, but before I ask them, do any of the panelists here have any other questions? I have one. It's it's more to the monolinguals. It's like I have a bit of feeling with the mobile federation is like the next step in multiples is like you can start with one application, which you can like with the plugin system. You can throw anything at it to actually start with a multiple anymore. You can just add stuff in there. And of course you are building a model is still maybe something to do, but it feels like it's not the necessity anymore. It's like if you want to, you can just add plug ins in your base and maintain it and pull it out if need be. But where do you see the combination of a multiple and then module federation going? Yeah, that's a very good question. The thing is, there are a lot of hard feelings out there about this topic and a lot of emotions out there. People are fighting over this topic. Are we allowed to use micro frampton's with emotional people? And I'm saying, of course, a lot because no one can prevent us from doing it. And it has really some advantages. For instance, sharing libraries is easy, and you'll always have the newest version of all the libraries available without NPM probably and BAM installed on the other side. If you have different repositories, then you have more flexibility because you can use Angola eight here and Angola 11 there and direct some thing over there. So this gives you more freedom. But this freedom comes with cost because now you'll need to publish your shut libraries over and NBN. You need to make sure that your Angola libraries work with all the support of Angola versions. And there is a gap between your Angola versions and you are postponing upgrading to the US Angola versions. And I've tried it out. Postponing doesn't make it easier. It makes it far more difficult. That is the drawback here. So at the end of the day, you'll need to know what is more valuable for you don't have the coasts or having all the freedom out there. If you are not sure, I am recommending to start with a manoeuvrable and to start with an X because and X has this cool feature of access restrictions. You can say, hey, this vertically is not allowed to talk with that vertically. And so you can reach quite easily one of the goals of micro from bents, which is isolation. And because of those access restrictions, you can refactor to multiple repositories later. Chances are high. You will find out you don't need it. And the nice thing about this is you'll start with clean solution, but you'll make sure you can switch to a more advanced solution later if you need it. And for me, this is a sign of a good architecture because this prevents you from overengineering. You do everything at the least reasonable moment and you start learning. Thank you very much. Was quite a long answer. I'm sorry we didn't get a fight, so that's nice. Yeah. Thank you for the question. To Martin, it sounds like the entire world becomes a playground with a with modular federation. So that's really cool. You have one new question coming in as well. So FEMA asks, how do we handle translation module if it's used in both and remote? I guess you refer to and translate, so in this case, I would do the same as we have lazy loading, you can import it everywhere. You assume for a child and for a child can point to this Arquettes translation file for this very lazy Mocho. Sounds like everything is possible. It's, uh, sounds too good to be true. Yeah, that needs to be some catch somewhere. I need to find it needs to be, uh, matter. Yanique, do you have any questions left before we. No good. Sam, do you have any questions left? Well, the question about running it on the server side is my question. So thank you very much for answering. A lot of I do a lot with server side rendering, and it's all I would need to check would need to try it out bit because I haven't had a chance to play with it. So it looks very interesting. And you really need to take a deeper look. Cool. Cool to see a prototype upcoming in the next days or a block party or something like this. Yeah, I hope so. I hope that I get the energy again to start writing a bit more. It's been a while. OK, yeah, it takes energy, that's true. Maybe, maybe I have one if I want to, if I have an application that leverages service workers, should I have one for model model Federated or should I have one in the show that handles everything? You'll need one in the shell because this is what is loaded from the paralysis perspective. Everything else is just loaded on demand from here and there. So you'll need your own service worker. And I thought, that's Angella service work, capital work in this very scenario. I really love Angella service work because it's a nice turnkey solution. But also it wants to know about everything upfront. Everything that is cashable needs to be known upfront in the service worker Chazen file. So sorry. I guess you'll need to go with a handwritten service worker with workbooks, something like this. OK, thanks. Yeah, fascinating question. Looking at maybe a very stupid question is like the naming of module federation always through me. And do you know why they call it this? Is it like the Federation of States and then like the Federation of JavaScript or typescript packages that is being brought together that that name is there? Yeah, I guess that's the reason. Honestly, I didn't question the name, but this is what also came in mind, something like the Federation of States, like, you know, if you look to Germany, it consists of several different states which have a lot of rights. They can do their own education system, for instance. And we have the same situation in Austria and in Switzerland and all. But they are in the United States of America because. I think that's that's the origin of the name, but I haven't questioned it, no. Kind of, yeah, I think to fair trade is like to do all the modules together form an alliance to to form one app, I guess. Right. But yeah, good question. Thank you, Martin. I also had 12 questions which are already answered. So that's really, really awesome. Thank you. In fact, two of them are alive. So I was wondering, is there like suppose that you start using this investing time and this is there a risk that module federation breaks in upcoming versions of Angular and Wopat? Not in the sense of like, OK, needs to be fixed, but that is no longer support it. Is this something we can already actively? I don't think so. So the Angola theme itself is really keen in the Bapak five, because it's not only bring small federation, it is also faster and has more possibilities for optimizing the codes or the source code becomes smaller. And it is really faster in terms of combining everything because it has that built cache. And so the Angola team really loves it and that's why they want to incorporate it into the sea a lot when it only comes to module federation within that back. I have talked to the founder of that back and he does not plan big changes, need a big changes and or big additional features. So it thinks it is more or less done. The feature is done and he has some ideas for tiny additions, for tiny improvements, but nothing that's really big. Got it. Yeah, Foster builds who doesn't want that, right? So it's a yeah, but he would have liked that then. Mojo Federation requires Angra 11 and Watpac five. Does it also require a modern browser? Can this be run on older browsers or it can even run in IHI 11 or something like this? Because from the process perspective, it is only about creating a dynamic script at the right time and taking what's slowed it from there and dealing with it. So it's not a big deal from the process perspective. Got it. All right. Yeah, looks like we we have all the questions answered, so thank you so, so much, Monfort, for this amazing talk. We were all blown away by by these new possibilities. Some of us already saw parts of the modular federation, but this was really in-depth and learned a lot. So we really appreciate it. Before we jump off, where can people learn more about you? Is there anything you would like to request our audience or the Angerer community in general? Yeah, you can follow me on Twitter or you can find me and my work in my blog and website. I am copy pasting it to the chat. The private. Perhaps you can relate to the application. So if anyone needs something, feel free to reach out. Find me on Twitter and on my blog wall. Perfect. And thank you for the free book. I guess we all know what to read now over Christmas, the shape they send and read over it again. Final question, Monfort and the most famous Austrian accent sentence ever expressed by one of your fellow Austrian giants, Mr. Schwarzenegger. Yeah, at MGB. I'll be back. Thanks, everyone, for joining me. Hope you had a great time. And learn something new about module of Federation. Have an awesome. They enjoy the holidays and stay safe. See you in the next episode. Bye bye. Thank you. Well.