JSWORLD Conference 2021
Federated Angular: Micro Frontends with Module Federation
The implementation of micro frontends has so far been anything but easy.
Since common frameworks and build tools didn't even know this idea, you had to dig into the tricks bag. Module Federation offered by Webpack 5 initiates a crucial change of direction here. It allows you to load separately compiled applications at runtime and to share libraries between them.
In this session, you learn how to use this mechanism to create micro frontends with Angular.
Besides the default scenarios, we also look into dynamic Module Federation, sharing libraries, and dealing with version mismatches. At the end of the session, you know how to use Module Federation in your projects and what the consequences are.
Sign up for our newsletter: https://www.frontenddeveloperlove.com/newsletter Stay up to date via LinkedIn: https://www.linkedin.com/company/frontendlove/
Powered by https://passionatepeople.io
Yeah. Welcome to the talk. This talk is about Federated Angular, which involves Microf randoms and of course, Module Federation. And I want to start with a picture, namely, with this Spectra. Perhaps you have seen this before. It's the helicopter of Leonardo DA Vinci in 1400, something. Leonato DaVinci designed the helicopter. How cool is that? Of course, it didn't have the material to build it. So it was not built back then, but scientists found out it would fly if they build it. Nowadays, where we have all the material it really would like. And somehow the story reminds me to micro frontends because with micro frontends we have a quite similar situation. The idea has been around for quite a while, but so far we didn't have the right material. So what do I refer to when talking about micro fundings? Well, I am referring to several tiny applications that work in isolation and that are loaded into Asia. That means, even though we have several tiny applications, the consumer things that they are using, just one application because everything is loaded into the central point. Here we see an example for this. On the left side, you have a micro front end. You see it runs on Loco 3000 and on the right side or on the left side. To be more precise, we have a shell. And as you see here, the micro front end is integrated and loaded into the shell at run. And as I mentioned before in the past, building something like this was everything but easy. You needed to work with a lot of tracks with a lot of dirty workment. But this is changing now because Backpack Five brings Martial Federation and Martial Federation gives you a straight forward solution for Loading separately compiled, separately deployed stuff into your very applicate. And this is exactly what this talk is about in this talk. I will tell you three things. First of all, we will talk about Module Federation in general, and then we will talk about Federated angle. Furthermore, I will give you a possible roadmap so that you know, when you can safely use all this. Goodness, I will tell you about it, but before we start, let me introduce myself a bit. I am on it. I am a rain and consultant for Angular. I'm doing a lot of remote workshops nowadays in the area of Angular for enterprise applications. And Besides that, I'm quite connected with the Angular community. I live in Austria. I do a lot of stuff in Germany, and I'm always happy if I can work together with people in other countries. Okay, let's get started with the first chapter, which is about the Backpack Five and Marcel Federation. So if you are wondering what March Federation is doing, then you will get the answer here. The answer is it is capable of Loading separately combined separated deployed stuff into your application. And perhaps now you are wondering, well, why hasn't this been possible before because even before back five, we had dynamic imports. So why not use and dynamic import to point over there to another application and to load something from there? The thing is, in theory, this works. In theory, this really works great, but in practice, this does not work at all, at least not with current bundling solutions like that back. And so it does not even work with the angle of CLI because the CLI is using backpack underneath the the reason for this is that all the fondling solutions like backpack assume that everything is there at compile. Everything is compiled together. Everything is optimized together thing on tree shaking, for instance, and then and only then everything is cut into chunks for late look, but this is too late because if we talk about micro randoms, we talk about separately compiled stuff that is loaded on. And to solve this issue, webpack Five module Federation introduces two roles. The first roll is the host. I'm calling it the shell, the micro front and shell Loading other micro front end. And the second role is the remote. I'm calling it the microphone and is well, the thing is you can configure both of them with the backpack configuration. For instance, the shell can map some bars bars pointing over to other microbrands here. For instance, I've mapped a of MF one which stands for micro round and one it's very creative. I know. And that means every time we are importing something using an URL, starting with MSE one, we are pointing over there to this micro front end and we are wrapping something from there. By the way, here we can also define an alias. We could say, hey, what I'm calling me on here is called also MF on over there, to be more precise. In this very case, it's a non allies because I'm using the same name on both sides. But you can really use different names here like Manfred and Batman and so on. This is the configuration for the shape on the other side for the micro on then you can also configure stuff with this configuration. For instance, you can expose your files, you can say, hey, let's expose this IB component under this or data and then something beautiful happens. I guarantee you you will love it. Then you can use a dynamic import using the map names, and so you can point over there and load this very component from the remote application from your microphone. It's really as easy as the best thing about this is that Angela itself does not recognize at all that you are using micro roundings for Angela, this is just lazy Loading. Backpack is doing the heavy lifting underneath the covers. That pack is making sure you can load the separately compiled component on demo. And this is especially great because that means you don't need any meet the framework. There are several meet the frameworks out there, increasing the complexity of your micro round and solution. Those meta frameworks are responsible for orchestrating different microphone here. We don't need them. Just use angle of features and urine. Of course, the shell needs some metadata about the Micro Randa and this metadata is compiled in a Socalled remote and refine this remote entry file or it's also called Remote entry point is exposed by the Backpack compiler or the Backpack tool. Then you handle everything and this file needs to be loaded somehow. In traditional you can do it statically as here, but you can also do it in a more dynamic way. You can leverage some APIs to load the crust on the after you've got all the metadata, your shell is capable of Loading the remotes on them. The best thing of all of this is you can share dependencies. So let's say you have ten micro round and of course you do not want to load angle at ten times. You only want to load angular one and so you can define using the configuration to share Angular Core, Angular Common and all the other angular libraries just define the same libraries for all the roles and then angle itself will only be loaded. One of course. Now the big question is, how can we make the CLI to use mutual Federation? And for this I have a good message for you and the message it is not that good. The good messages. The CLI is already using backpack underneath the cup. That's great, because now everything we need to do is to tell backpack to use much hole Federation. The information that is not that great is that the CLI is shielding back back from us. That means we cannot directly get in touch with it to tell it to use Mogul Federation. But for this there is a solution. For instance, we can have a module Federation config, and we can delegate it to webpack using a Socalled custom builder build us are a mechanism of the CLI builders are exchangeable builders are responsible for building applications and libraries. The default builder for the CLI responsible for applications is delegating to backpack and everything we need now is a custom builder, which is delegating our Marcial Federation configuration to Backpack, and then it needs to delegate to the default builder, which is triggering Backpack to build your application. So at the end of the day we talk about ten lines of source code and some boilerplate to make a custom builder working together with the CLI Autum. And of course you could do this by hand, but you don't need to because I've already done it. I have developed a backmatch and NBN back hatch called Angular Architect Marshal Federation. You can download it using of course, NBN, and basically it does free thing. First of all, it generates this skeleton of a martial Federation company. That means you don't need to learn it by heart. You get a skeleton you only need to fill in place. That's the first thing. The second thing is it installs the custom builder for you, which is enabling Martial Federation underneath the covers, which is delegating your configuration to Backpack, which is used behind the Sea line. And then for the sake of debugging, it is assigning unique boards to your micro run then, so that you can start it size puzzle. To make use of it, you just need to end, she added. Then you need to adjust the generated configuration and then and she surf it to try everything. That's it. And for this, I have prepared a demonstration for you because, you know, I'm always saying Marshal Federation is a bit like the 1980s. You need to experience them to know what they are about. So let's try this. In this demonstration, I will use an application like this. This application acts as my shell. And here I have my MfE bone, which is my microphone. You can notice the microphone. Then by looking at the dash red border and then clicking here to flights within my shell. Then we see that nothing works because this is our shop. Now it's now our job to make this work is now our job to load this micro front end, which is separately combined and separately deployed into this very root for this. Of course we need that back five. And that also means we need a version of the CLI of the angular CLI supporting Bataclan. But the thing is, the current CLI Eleven ships with that back four because CLI Eleven already had feature freeze more or less when that back five arrived. So there was not enough time. But I have a good message for you for this. Let's have a look at our source code. Let's have a look into our package cheese. The thing is, while CLI Eleven is not supporting Backpack Five, there is an experimental opt in for it. Just add these three lines of code and you will force the CLI into using Webpack line. Of course it's experimental, but currently it's good enough for prototyping and the Seal as well, which is you in about May 2021. We should have a very sound backpack five in there for the time being to try it out, go with this resolution stack or with this resolution section, to say the least, go with CLI Eleven and use an because Yan will respect this resolution section and force your CLI and everything else into Web. I've already done this. I've already installed all my packages. After that, you can enable your shell for using, let's say, Martha Federation. And for this let's and she at Angela Rhe. Dax Mortal Federation. This takes some time. The package is downloaded and after it has been downloaded, it asks you two questions. The first question is, which application do you want to enable for Module Federation? In my case, it's the application called Shell, and then it is asking about the ports to use for Debugging. So here let's go with the shell application and I want to go with the board. Five spouse are stuff is generated for you. Everything you need to go with module Federation. And the most important file is the backpack config here. You just need to adjust it to make mutual Federation work, and you don't need to be afraid because this is not a fully blown way back configuration. It's just a minimum of a bad back configuration. Just everything you need to go with module for the Wick because the rest is still generated by the CLI. This is why we all love the CLI, don't you? So let's do the same for Micro front and one. I have prepared a separate tab here. That's an she added to our micro front and one M one. And here I'm going with what 3000. And once again, everything is generated. We need to start going with Marshal Federation, especially their backpack. Cool. Now let's move into the source code. In my very case, this is a mono repository with the shell and micro fondant one. This is not a requirement. Here I am using a monorepo, but you could also use several separated repositories. It's just upon your preferences. Both has its very own advantages and also disadvantages. So let's move into the micro front and pump. Here we see the generated configuration. And as you see here, it's not a big deal. It's just two or three screen patches. In my case where I'm using a very big phone size because of, you know, bad eyes. So here we have already our model Federation plugin and there are two sections. The first section is for remotes or to say the least, for micro rounds Roman, and the second section is for host or we call it tradition. We are talking about the micro frontend M everyone you see here and everyone. That's why we go with the first section. Let's get rid of the second one. So the first section only wants to know the name of this micro and the name of the emitted remote entry file. You remember this is the file with all the metadata and then we need to define which applications or not applications, which files to expose. I could expose an IV component, a module, a service, or just a function or an object. It's really up to me at the end of the day we are binding to this or that ACMA script file or in our case to dip this or that a script. So in my case I want to expose a module. Let's call it just module and the mortal is called Fly should I fall and its flight to March 10. Do you see I can also share stuff or sharing stuff. That ways to define your libraries. The first way has been shown on the slides. In this case you use shared with an array pointing to all the libraries you want to share. In the second case you are using an object like this and this allows you to define how to behave when there is a version conflict here. I'm saying if there is a version conflict, I only want to get the highest version. This is what sing it true means just give me the highest version or to put it another way, we are going with the high land principle. I guess you know the high land principle. There can only be one. And the second flag tells me if there is a version conflict, then a meet and round time. So this is very strict. We get the highest version plus a runtime error. If we skip this, we just get the highest version and the waning telling you that might cause some trouble. Perhaps it works. We don't know. Let's try it out here. We get the trouble up front to get that run time ever to be on the safe side, because obviously having angle nine and angle eleven side by side is not the best way. If you want to go down this road, you will have to go with web components, angular elements. But this is a whole different story, and it comes with some workarounds you need to use here. Let's assume we have compatible versions of Angular like version Eleven and Eleven one, which is compatible to version Eleven with regards to Seman deception. Okay, to put a long story short, we are defining some libraries to share and that's it. So at the end of the day, we have a traditional angle application plus this configuration. And if we look into this configuration file or into the exposed file in the exposed module file, then we see this is just a traditional angular module, a traditional angle, a module with sub roads. That means if we load this module into the shell using the router, the router can directly navigate to this or that route defined within this very configuration. This is the micro from an side. So now let's go on with the hither side of this. Let's go on with the shell one more time. Here we have a wetback configuration. Let's scroll down. Let's get rid of the first section. It is for micro frontend. The second one is for the shell itself and saying, hey, let's refer to the microphone. And by using this very bath here me on over there. It's also called me on, and by the way, you can find all the metadata using this very viewer here. Obviously, I'm hard coding the URL of the metadata. This is what I'm calling static Federation. It's nice for prototyping and for depacking, but obviously for protection. This is not enough for production. We need more dynamic. So we need an alternative all dynamic Federation. This is leveraging some runtime API to tell that pack module Federation on demand, which remotes are heated. We don't have the time to talk about this today, but if you're interested into this, have a look into my block there are some attic series about further topics like dynamic Federation and so on for the time being. Let's go with static Federation. And Besides tips, we are also sharing the same libraries with the same criteria. We are going with the Highlander principles. Okay, now let's also have a look into the routing configuration of the ship. For instance, if we look in my app roots to us, we see that I have already prepared a lazy route. What is just a traditional lazy route? Angular does not even recognize that we are using module Federation. It's just the roots with low children and a dynamic import. But the special thing here is that this dynamic inboard is using all the map pops and so backpack will take care of it at range. However at compile time type script is not happy with this. You see it here. The quickest type script is saying hey, I don't know this file and of course that trip does not notice file because it's not there at compiled on. It's a virtual file that is resolved. Web pack has run time. So let's inform type script of this for this you need a file with the ending DTS name does not matter. If it has the ending DTS, then it is picked up by type script during the combination. And here we can say hey, TypeScript, it's all good. This stuff will exist at runtime. I know you don't know it, but don't be scared about it. It will be the trust behind me. If we move back, we see perhaps grip is fine. Awesome. So one more time we have just two ordinary angle applications plus some configuration on both sides and that's now let's try out for this. Let me start Mason and she served MSD run. We don't need to open it and let me also. And she served the shell in the second tab and she sir. Hello. You could have written a script that is running everything side by side here for the sake of demonstration. I'm going with two steps in my console. Everything starting. Please remember the Backpack Five integration into the Cali Eleven is still experimental and so you will get some warnings. Look here. There is a warning. It is read for some reason, but it's a warning deprecation warning. Don't be scared about this. This is because everything is experimental. Now things will change for the data in May. Then we get sea light pale. That's an official back five integration. Okay, Michelle is started. What's about my microphone? And it also started. Now let's navigate to the shell. Let's click on flights and hey, it's loaded on demand. How cool is that? We loaded something that has been compiled and deployed separately. It's even on a different origin. You'll be talking about Locos 5000 and here we are talking about low cost 3000. So it's really more than just lazy. Let's redo this. But now let's have a look at the network then. So if we click here on flights? S it's really loaded on the month from local or three dozen. Plus, it only comes with eleven 6 KB, which is nothing. It really proves that Angular itself is she. Angle itself is not loaded several times. It is shared between my two applications. Nice, isn't it? Because this was not really possible before, at least not without work around using the CLI. And we perhaps you're saying no, this is nice and I want to have it. When can I use it safely? And the answer is well rep back five and module Federation is final. So if you don't want to use the CLI, feel free to use it. I have some customers by passing the CLI currently to make use of this. But if you want to go with the CLI, please keep in mind the Backpack five integration is experimental. It's an opt in and there will be the official solution. Hopefully for CLI value. That means you can start with prototyping now and when it comes to May, then you can go into production list. By the way, if you like this talk, you will very likely. Also like my ebook, it's about Martial Federation and some alternatives, and it contains also other things you need for big enterprise scale applications like domain driven design, strategic design or an X mono is so check it out. It's free. Angular Architect slash book. Okay, let's come to a conclusion. This scene that Macho Federation allows you to separately or to load separately deployed stuff. And this is the key for Micro Ronans, isn't it? Different teams can work of them on them, they can deploy it and at runtime the newest version, or perhaps just a configured version is loaded in the ship and they can also use it together with Angular and the CLI. Just used this blood in and she added, and you are in. So thanks for having me here. You find my contact data. I've already uploaded my media rail to my block. And if you like, follow me on Twitter so that we can stay in contact. Thank you and have a nice day.