AngularAir - Using Module Federation in Angular v11 with Manfred Steyer

hey what's going on welcome to another episode of angular air i am your host justin and on today's episode we are going to hear more about module federation and angular 11. excited to see that we had a show previously with our with our guest about this topic and so we're going to get more information on the latest today so that's going to be really exciting can't wait to hear about it let's uh say hi to our panelists and then we'll say hi to our guest and we'll get into the content join us today we've got mike with us keyboard mike what's up mike uh not too much uh i'm multitasking today [Laughter] i'm getting a few things done at the same time uh everything's going well happy that it's friday ready to end the work week and uh start the weekend but excited for what i've got going on today with this show nice nice melissa how's it going alyssa very well i have some espresso here it's iced and uh yeah i'm ready to ready to go let's do it all right so as you drink that throughout the show we expect your your levels to go higher and higher is that what we should be ready okay or is it already there um it works opposite with adhd that's why you take a stimulants to calm to calm down so you should see a calmer elicit by the end of this oh i got you okay all right all right well we're happy to have you here so and our guest today is manfred manford how's it going yeah fine thanks for the invite yeah great to have you back as always we're very excited to have you here what's the latest what you've been up to lately well i'm really doing a lot of stuff with uh this new module federation thing uh we've talked last time a lot of my customers are interested into it because somehow they want or they need to implement microfrontends and module federation will be a very straightforward solution for this currently it's ready but it's not ready within the angular cli because it needs backpack five and webpack five is currently experimental within their backpack cli so they are prototyping a lot so i'm helping them and with may hopefully we will get cli 12 which means we will get a stable integration into web pack 5 and then we can go into production with it hopefully so that's the plan very cool very cool hold on you use a lot of big words there yeah um that i think we should dive into and kind of provide a little bit of a glossary for we'll say me and maybe if anybody else gets benefit from it that'd be great too so the two things i want you to go back over and give a little bit more explanation are micro front ends what are those why are those important and also this main topic of module federation yeah with pleasure so the idea of micro brown dance is not that new it has been around for several years the idea is to subdivide a big software project into tiny applications like we do in the back end with microservices and the main idea of this is to scale across teams because if you have a lot of people all those people need to communicate with each other and somehow you want to prevent the need for a lot of communications and a lot of uh meetings and a lot of guidelines so that everything works together and that's why all of them get their own project tiny project which is part of their overall software system think about office 365 you have those not tiny but you have those isolated office applications word axle and so on and they don't need to know much about each other they are separate applications that can be developed deployed in isolation or separately that's the idea of micro frontlines and where does module federation come in to our mind yeah um the thing is when you have just separated applications then it is fine to just do tiny single page applications you can interconnect them with hyperlinks but if we want to display everything as an integrated solution you need somehow to find a way to load everything into your main solution that means at the end of the day you have a bunch of separately compiled applications and you want to load all of them into your big let's call it shell application and in the past that was not that easy because in the past you had to deal with a lot of tracks for instance iframes i mean obviously iframes are not the most popular html tag if you ask me but because of this need a lot of people used iframes in internal solutions or you could lazy load custom elements web components which also comes with some trade-offs but now with module federation loading something that has been separately compiled is really straightforward so it looks like lazy loading but at the end of the day you are loading something from over there from another location can you talk a little bit about the decision of wanting because what we're talking about with micro front ends is combining multiple applications which may and or may not and you can talk about that as well include multiple javascript frameworks can you talk a little bit about the decision of whether or not that is or is likely a product of having multiple frameworks and what the decision process would look like to decide that you want to go down that route yeah that that's an interesting question a lot of companies want to have this they want to have either let's say different frameworks or at least different versions of the same framework and this is where all of this gets somehow a bit odd it's doable if you wrap your front ends into custom elements into web components it's doable but you need a lot of tricks for instance you have several instances of your router you have an angular router another angular router a react router a view router and all of them need to work together you can do this yeah it's doable but you need some tricks also routing to a web component is not that easy with the angle around the neither wrapper component so it's it's it's doable i'm calling it the frankenstein architecture i guess you know this guy the frankenstein monster and yeah this is what you will end up with at the end of the day also bundle size will increase dramatically i have some customers that needs this and i have some customers that say well we could do this but we limit ourselves to one framework in the current version so that we can work seamlessly or we can integrate everything seamlessly into the shell you know you mentioned that the value one of the values is that you can teams can work on these individual pieces separately right and focus on their thing i think another big value of it and you kind of alluded to this when you talk about this concept of a shell that then loads these different pieces is you know when we talk about like an angular world that's an entire app right and if you don't do the module federation approach or the separation here um with the microfrontend kind of thing then you have an update to one of those pieces you have to deploy the entire app right in order to do that when you're not doing the module federation right so if you just go away and one of the challenges there is that you update a small segment of it but your process for deployment for your company is certification and all kinds of steps that need to go through to deploy that now you have to do that every time for every segment because the entire app goes as a whole whereas i think that the peak of the excitement of this is that that segment that you need to release and make changes to only that could go right and now you don't have to worry about the entire app reshipping the the build of it and things like that yeah totally that that's a big point uh it brings back agility even though you have several teams to coordinate all of them can work in an agile way perhaps the teams contained or consist of just let's say seven plus minus two people they can really work in an hr way independently and as they say deliver business value on a regular basis without syncing up with the others and without all those heavyweight processors yeah that's a good point on the other side if you only have one beam then very likely all of this is overkill perhaps there are some benefits but it's very likely when you only have let's say three or four people uh dainia deem it's an uber kill because now uh all your dependencies become run dime dependencies that means you cannot tell at compile dime if this works together if there is a breaking change uh you will only find out that runtime and perhaps it works perhaps your application crashes you cannot dial up front very very cool very cool one think about it do an analogy to in my mind is like an operating system right and you have an operating system that's like your main application essentially and then you want to run different programs and you want to you know install different programs or update programs at different times but the operating system is like the main shell that's managing you know what the user is seeing and running at any given time or that sort of thing yeah yeah i like this metaphor i haven't heard it before but i i really like this metaphor is um is this the only use case for the module federation well i think there are some other use cases that the main use case is for sure scaling over themes but let's say you need to incorporate something another team has built sometimes one company buys another company they need to merge and so they have different software products that need to merge or i have one customer who is doing a very specialized product and they are really focusing on their domain but for some use cases they also need other functionality and so they just buy it from another vendor and integrate it into their product perhaps also migrating to another framework is a valid concept i mean at the end of the day with angie upgrade we are doing similar stuff perhaps with ng upgrade everything is a bit more intermingled or everything can be a bit more intermingled you know angular components with angularjs components with angular components and angularjs services and so on you try to prevent this high degree of coupling within a micro front-end solution but on a technical level it is quite similar but that also comes with trade-offs of having all of these different environments one of the things that we focused as web developers on recently is minimizing bundle sizes take some steps towards that however if you're talking about a multiple framework or a multiple versions of a single framework then the browser is responsible for downloading those different frameworks and also parsing those and loading those into the browser so it's kind of counterproductive um yeah i can clarify that i've kind of been on the well not on the fence i've kind of been against the idea of um what's the name of the thing we're talking about microfinance thank you uh because of the idea that what we're doing by making those decisions is somewhat putting more emphasis on developer ergonomics instead of on the user experience yeah totally so you already state the right word it's about trade-offs i mean the whole life is about trade-offs you cannot have the cake and eat it i heard sometimes uh the thing is here we have really a trade-off between bundle size and let's say isolate that fully isolated micro frontends you cannot have both and at the end of the day first of all to come to a decision you need to have a look at your architectural goals and some of my customers are saying bundle size is very important it's the highest goal and others say well bundle size is not that important we have other things that are more important like working independently or like providing business value but of course if it is a customer-facing application if you want to sell something then of course bundle size is the highest goal or one of the highest goals if you work within the intranet where you have a lot of bandwidth then it might not be that crucial it it always depends um so first of all you need to have a look at your architectural goals and then you can evaluate possible solutions against them the good thing is to come back to module federation with mutual federation you have the choice you can say let's stick with one angular major version and then a module federation can share one instance of one angular major version between all the micro frontends it's then only loaded once even though they are compiled separately so it really is always a trade-off though you like if you're using micro front-ends your users will notice like there's like it's going to be painful like or is there really not a way to do it where you can have both is that is that what i was hearing i'm not sure if they will notice in each and every case because when i'm sharing angular or other frameworks ngrx or my design system then it will not affect bundle size that much of course every time i'm sharing something i cannot do to reshaking because if i reshake something i need to know what the other parties need of this library but when it comes to separate the compile stuff i don't know it up front what they need at runtime so bad enough to reshake it uh module federation is disabling tree shaking for this reason for shared libraries uh but i i think they will not notice that much to users when i share libraries especially not when i go with module federation because the good message is from angular's point of perspective using module federation looks like using lazy loading angular itself does not recognize that web pack 5 underneath the covers is grabbing something from over there from another origin or another location if i go with iframes of course they they will very likely notice i have prepared um some slides uh if i might show them and a bit of live coding to give you a feeling how how this works uh together with angular currently awesome let's do it important yeah yeah let's do it cool great so um here i have a slide you should see it now and uh one metaphor i really like to use when it comes to i call it federated angular because we are federating several angular solutions is this picture here have you ever seen this picture this drawing it's from yeah it's the helicopter from leonardo da vinci isn't it and he designed a helicopter and now hold your brief in 1400 something which is really cool in 1400 something so he designed it but he didn't have the material to build it because the material was not available back then meanwhile we have the material so scientists found out it would really fly and uh in the case of minecraft round dance it's the same the idea has been around for quite a while but we have not been capable of building it in a very straightforward way because we didn't have the material the frameworks as mentioned before this all is about loading separately compiled stuff into your shell if you look closely here here we have local 3000 here we have localhost 5000 and this micro front end is loaded into here so now with module federation this works by the way here i have another prototype this is not about microfrondense but this is also a valid use case for module federation some people don't need to go with microfrontends but with a plug-in system for instance i have discussed with uh this company on a conference they have built a workflow designer and the workflow tasks like dcr download upload analyze enrich can be provided by several parties and of course that's why they are developed independently that's why they are deployed independently and at runtime the workflow designer here just gets some meter data about this and that task and then it should be capable of using it and loading it on demand so this was a real world use case and i just uh created a simple tiny demonstration out of this to show how this would work also with module federation which is quite a game changer if you ask me by the way all those examples can be found on my blog and this is uh what this tiny presentation i have prepared for you today is about it's about three things first of all it's about module federation i know we've talked about this topic uh i think it was several months ago when i was here the last time but to get everyone into the boat i decided to add stores for slides again to this light deck the second part is new we haven't talked about this here before it's about what i'm calling federated angular and it shows how we can compile this goodness of module federation with the angular cli i have prepared a lot of live coding i hope i will not regret it so let's cross fingers and uh i have also prepared a possible roads map the big question is when can we use it safely so to tomorrow just like i you know tomorrow right i mean manfred promised tomorrow all right cool i i i will not sign anything like but yeah you can start prototyping tomorrow [Laughter] yeah so about me i'm on fred i'm doing a lot of trainings and workshops and i'm a bit connected to the angular community i live in austria i do a lot of stuff in germany and sometimes in other countries if i uh promise that i will behave correctly so module federation those are the four slides i've shown you before the idea is to load separately compiled codes at the end of the day the idea is to do something like this this was not possible before because webpack does not allow scenarios like this webpack and so the cli using webpack underneath assumes that everything is there at compile time because everything is built together and everything is optimized together think on tree shaking for instance but now with module federation this works you get two roles the host and the remote i am calling it the shell and the micro front end and within the shell you can map urls you can say hey this url points over to this micro front end separately compiled and build and deployed stuff and by the way over there it's also called mfv1 and then over there you can expose files that means you have for instance this component as part of your remote of your application and you say hey i'm sharing it with others i'm sharing it under this name and the coolest thing of this is now your shell only needs to leverage a dynamic import to get the stuff from over there and that's why angela itself does not recognize about this for angela this looks like lazy loading but at the end of the day backpack is doing all the heavy lifting underneath and that's really cool because that means you don't need to meet the framework anymore there are some quite complicated meet the frameworks out there trying to orchestrate different application within your shell here just go with the default functionality and you are fine quick question uh to be clear of what we're looking at i see it in the comment that we're looking at a webpack web pack config file here correct yeah yeah so we don't have to do anything inside of our applications this is about the build configuration yeah totally okay it's a webpack config file or to say the least a partial backpack config file because the cli is generating most of it but somehow we need to provide those several sections with this metadata about module federation cool great so talking about meter data of course the shell also needs some meter data of the remote this meet the data is generated by webpack module federation and normally it's called the remote entry or remote entry point just a tiny javascript file you load it into the shell here i'm doing it in a rather static way but this also works completely dynamically and then when the shell knows about the micro front ends about this and that and this one over there it can load it on demand and we've already talked about this we can't even share libraries i can say hey let's share angular core don't let's load it 10 dimes because we have 10 micro front ends load it once and share it i'm a lonely child but nevertheless i like to share things and here in this case it's really beneficial okay this is the summary of what i've showed you last time now the big question is how we can integrate this into angular and the cli because i assume most of us don't want to use webpack directly anymore we did this back then and it was fun but now we have the cli so let's leverage the cli well the good message here is that the cli is using backpack underneath the cars that's the good message however the cli is shielding that back from us and normally that's good because we don't want to get in touch with webpack we just want to use the cli and the cli shell delegates to it that means somehow we need to find a way to squeeze our module federation config into that back underneath i think squeezing in something is not the official technical term but you've got the point and um that means yeah we need to find a way and fortunately there is an official way we can use a custom bill uh brocco for instance was part of the cli team so i assume he really knows these concepts quite well because they have been invented there uh the idea is to have an exchangeable i always say an exchangeable strategy and this strategy is uh building your application the default strategy for applications is delegating to webpack so everything we need to do here is to provide a custom builder that delegates our configuration to webpack and then it needs to delegate to the default builder which is triggering a web pack underneath the covers so at the end of today this is about 10 lines of code in the core and a lot of boilerplates to make this work together with the cli as a custom builder so we could do something like this by hand but you don't need because and this is my current work on this i've already done this i've provided this package angular architects module federation and it already does this for you basically it does three things it generates the skeleton of the module federation config you don't need it to learn it by heart you just need to fill in placeholders it installs a custom builder which is enabling module federation underneath the covers and then it assigns a new board for energy surf so that you can engine serve everything side by side for debugging purposes this is what it is doing this you've already created this what is there anything missing for someone who wants to get started with like using model module federation wouldn't they just be able to take this and get started with micro front-ends or because i know you're mentioning that you know webpack yeah so at the end of the day you need somehow to tell the cli to use webpack five and then you need this tiny plug-in which is just punching a hole into this border between the cli and webpack so that webpack underneath knows hey you know we are doing module federation yeah that should be it the thing is um webpack 5 is final but the cli 11 is currently using just an experimental opt-in for backpack five by default it comes with webex4 and so this is fun for prototyping but for production use cases let's wait until tomorrow no let's wait until may when cli 12 comes out and cli 12 will support webpack 5. then we have it then we can use this plugin cli 12 and we should be fine cool the usage of it is using about ngat or is using ngat let's ng add this package let's adjust the configuration the generated web back configuration and then let's call anshi surf and yeah hopefully it works and for this i have provided a little demonstration this is where the live coding parts comes in so let's cross fingers but we've talked about it before i have three quality managers sitting in front of me so i guess you will take care of me a bit so let us have a look into this uh example under localhost 5000 i have my gel this is my tiny shell under localhost 3000 i have my microfront and we can see the dashed red lines around it the dashed red border and when i'm clicking here at flights then we see that we see nothing because this is not implemented yet this is now my goal uh in this live coding session to load the microphone and in this very route and so i would say let's have a look into the source code if we look here in the source code we see a mono repo it consists of two projects my micro front end one project and my shell saying this you don't need to go with a monorepo you can also use separately separate repos it's really up to you both comes with its very own advantages and disadvantages here for the sake of simplicity it is simple no repo but at this point do we want to be concerned about the same version of angular for both of those apps right well if it is a moon or reaper you don't need to be concerned because here automatically you have the same version of angular but to do like the module federation stuff ideally we would have those running the same version right your mfe1 and your shell would be running the same version of angular you could do that it reverses but you have to do a whole lot of other stuff right to pull that off is that correct yeah yeah so at least the same major version because officially you know if you have to say major version the newer version is backwards compatible to the older one and module federation has a really nice mechanism i'm calling its negotiation the it is negotiating about the aversion to use so it says hey you the shell you are using uh let's say angular 11 and you the micro front end are using angular 11.1 let's go with your version of angular because 11.1 should be compatible to 11 and within this negotiation they are just deciding which version to use you can configure it but by default the highest compatible version according to semantic versioning is used which is quite a nice feature if you ask that's nice cool so perhaps a funny story i know the creator of webpack and of all of this and he told me he implemented martial federation twice because after he implemented it the first time it was in beta he recognized that he need this mechanism for negotiating about the version to use and so he came up with this second implementation to make this work nice so if you look here into my package.json you'll see i'm using uh angular11 and also this cli11 currently there is an issue with 11.1 that's why i'm sticking with 11. and the thing is as mentioned 11 comes with bad pack 4. it has been heavily tested with webpack 4. i mean webpack 5 became final just one month before cli 11 was released that's why they decided to stick with backpack four but we can force it into web pack five with this section here which is respected by han we have a few people using the uh cli that are watching um again mainly me that i'm worried about uh you mentioned those versions with 11.1 and potentially 11.2 with the cli is that just is that issue just related to module federation or are there other issues that we should be concerned about um it's related to this experimental use case where you force the cli into using backpack five okay if you go with baked in webpack four everything is fine i okay i figured that was the case but just want to clarify yeah yeah it's it's a good question to uh prevent confusion so the cli is as always stable heavily tested and when it comes to this experimental stuff there is currently an issue in version 11.1 that's why i'm always saying this all is more about prototyping to find out how it works to get started quickly then everything works seamlessly uh and this will be the case when sea lights valve shows up in i guess me plus minus okay so install it with yarn not with nbm and then we'll get webpack five and now the funny part comes here i have properties to uh let's call it depths within my console or windows terminal one for the shell and one for the micro front end and now we can do something like mg at angola archie dex slash module federation and this is now downloading the package and adding it to the angular jason you know patience is a gift not mine but it's a gift and after this button you mentioned yarn versus npm do we have to use yarn is that for a certain thing yeah because only yarn is currently supporting this section here there is a special nbm package that makes it work with the nbn package manager but out of the box only jan is supporting this year yeah the plugin is one more time using something brock who implemented back then one of the best things of the cli i really love it namely a schematic and it is asking me several things which application do you want to enable let's say i want to go with the shell and which board do you want to use let's go with board 5000 and then a lot of stuff is generated um i just want to draw your attention to this here this is your partial backpack config so not a fully flecked one just a partial by config with everything you need for module federation the rest is still generated by the cli let's do the rest or the same for mfe1 mfe1 is the project name here i go with localhost 3000 so if the rest of the config is done by the cli do you have to marry the two are they plopping it in the same file or yeah so this is done by this builder here in the angularjs and a custom builder is uh created or registered and this custom builder just takes our webpack config and it squeezes it into the webpack config that is generated by the cli so yeah you nearly go in and copy paste things and make that okay no you you don't need to do this uh that's that's the goods the good message about this you don't need to do this by hand yeah so at the end of the day it's a map back merge operation merging this into the backpack config provided by the cli and then um the default builder is doing what it is doing all the time but it has done the last i don't know three years since angular 6 since builders have been introduced namely its delegates to webpack it uses this generated configuration and webpack is doing the rest cole so let's have a look let's have a look into perhaps i should close my outlook always you know compromising emails and so it's not a good idea and we are online so let's have a look into this webpack config js file it's part of the shell and very important is the fact that the shell is just an ordinary angular application it just has this configuration file now and there is some boilerplate but the interesting thing is here the module federation plugin and now we need to adapt it a bit for instance here we have one section for remotes for micro front ends let's get rid of it because here we are talking about the shell that means we need this section here where i'm saying hey the bath mfe1 points to my micro front and one over there it's also called micro front and one and the meet the data file the remote entry point can be found here this is what i'm calling static federation because i'm hard coding the location of the meter data file in my web backed config and you know the web back config is only respected at compile time so this is rather a static way of doing things it's fine for trying everything out but it's not that great for production for production you need a more dynamic use case this is the alternative dynamic federation we will look into it a bit later alternative and those are my shared libraries i'm seeing i'm sharing angular common and the router and this is to fine-tune the behavior of webpack module federation this tells webpack module federation what to do if there were two not compatible angular versions like angular 11 and angular 10 two different majors they are not compatible by definition and yeah singleton is perhaps a good choice for angela singleton is implementing the highlander principle i don't know if you know the highlander principle there can only be one in this case only one version of the library slow that's the newest one i'm a little afraid for the ones that aren't the one what happens to them as an highlander it gets pretty crazy yeah yeah it's a tough guy i guess so uh honestly i have never seen this tv show but somehow i know this logan there can only be one so yeah there you go that's what we have here an excellent reference oh cool yeah i do like it and uh strict version as the name implies is applying strict roles uh we get a random error because perhaps it does not work and we blow up everything better at the beginning than during using the application i love that that's beautiful yes i agree explosion should happen first yeah yeah like in every good james bonds movie you need a hook at the beginning if you don't like this if you say hey let's be chilled let's ease a bit let's try it out perhaps it works we will see then remove this flag then you will get the highest version and perhaps it works perhaps it doesn't work um but uh version of programming versus justin and mike like justin and mike would for sure have strict version on and i'd be like wow we don't need all that business so i got it i'm with you yeah let's try it out let's calm down a bit you know [Laughter] cool so and i think that shows that module federation is quite powerful when it comes to configuring such stuff there are even other things but um let's let's go on with this with this live coding example i'm really curious if it works at the end so this is what we have in our shell so just an ordinary an ordinary um angular application and it points to another application with this configuration file over there we have the same when we look into mfe1 we have the same but we don't need this section we need the first one i'm saying hey i'm mf1 and here is the file with all the metadata and i want to expose a module which is located here flights flights dot module [Music] and we have the same shield section yeah it's better a shared section in both places isn't that weird yeah you need it in both places otherwise uh it will not be shared so if this microphone then would say hey i want to have my own version of angular then you could skip it and so it would get its own version compiled into its bundles i mean when it comes to angular it's not the smartest idea because angle is stateful and we don't want to end up with two instances of angular where this instance knows three components and the other instance is knowing another three components and perhaps they want to interact with each other which does not work because they live on different planets so sharing angular as a stateful framework is vital i guess but when it comes to a framework that is not stateful let's talk about rxjs then it might be okay to have one version here and one version there obviously it increases your bundle size but if you're fine with it it will work oh see i i guess i i just thought when you're doing this you're opting into sharing and the host is going to specify like how we're going to share but i guess you're saying that each individual part has to specify yeah i'm opting into sharing right is what you're saying yeah yeah totally okay that's that's a good way to put it you have to opt in to share it yeah yeah very good way cool um if you look into this flights module this is just the ordinary angular module it has sub routes and the thing is if my shell loads this module via lazy loading by a module federation it can immediately roots to the sub routes or super routes defined here within this configuration saying this let's have a look to um to the shell here we have um app routes file and here i can introduce lazy loading and you see from angular's perspective this is just traditional lazy loading load children using dynamic imports pointing over there and so angola does not recognize that we are doing minecraft round ends but that back underneath the covers hopefully will and so it will load everything from over there at random that's why i mentioned before we don't need any meet the framework or has trading everything of course do you think angular ever will be aware that we're doing micro fundings or do you think it's always going to be something off to the side um hopefully yeah so i think angela should not be aware because it would increase the complexity but in my opinion sooner or later it would be nice that the angular cli is aware of it and it would be nice if the most important things of this uh will be put into the angularjs i mean the angularjs is a tiny file we can easily add some additional branches no perhaps like you're like there's some room to grow here let's use that file i love it yeah yeah but but i would love it if this would be integrated into the angular cli you know the angular theme has a lot of things to do so i don't think it will happen in uh schwarz term but i hope it will work in mid or in long term and then i'm more than happy to throw my plug in here away and to leverage the default features of the cli okay it's a bit of this batman situation perhaps you've seen batman begins and batman always said well i'm looking forward to the day where gotham city doesn't needs that batman anymore but antidel uh until then i will be the best man so many good analogies i have a quick question about about this is this something that could potentially go into the configuration in the angularjs and be handed to that custom builder like instead of having a separate file we could actually just configure these things that it exposes in the shared and then the custom builder just picks it up from there i think that's a nice idea yeah yeah so if we are tweaking this build a bit more currently it is just merging backpack files yeah then we could already do this by hand today and then we would ng add your extension and it would add that builder and then from there all we need to do is go into our angularjson and and do this configuration and then maybe hopefully down the road but like you talked about that then since we're doing it in angularjson we're aligning ourselves ready for the cli to just do it for us right or something that's cool that's that's a nice idea yeah that's a nice idea so let me do it stephen fluence in the chat and he said manfred is the ng batman and thank you i like it well i know steven flewing is a bit um a bit marvel fan so perhaps he's iron man and i am batman and sometime we will team up to make this world a better place that is great there's two different universes but module federation brings both of you together into this wow yeah crossover cool [Laughter] um sorry i derailed a little bit okay i do have a quick question about the shared piece you've uh talked about sharing and actually we can see it here the add angular core common router um are we limited to sharing um npm modules i'm wondering about the scenario if i say have a stateful user service and i want to be able to share that across multiple applications so that the different applications could potentially be bringing in the same shared data yeah yeah that's a good point the thing is webpack is capable of this module federation can do this by default we are pointing to nbn packages but we can configure it to also respect let's say folders in your application or libraries that are part of our monorepo that's the short answer and the long answer will come in some minutes because it's funny i have prepared a demonstration for this okay i will de-bounce my um question then did you just say will debounce my question did i bounce it or just no no i just delayed it a bit cool okay so yeah sharing stuff and roots here and you see typescript typescript is always the guy who is complaining isn't he or she or it's uh he is saying that this file does not exist and yeah of course it does not exist because it is resolved at runtime it's a virtual buff and that's why we need a dts file a name doesn't matter just call it dds and then you can say hey type script it's all good man it will work at round line so let's go with it and then you'll see cool so let's try it out and she surf the shell mfe1 let's serve mfebon first all right while that's building i do have to say that adding that dts file is basically like giving typescript a snickers bar you get really cranky when you don't find this module but here's the snickers bar feel better it's just another version of the any type i mean you also do it the alyssa way and just be like hush hush here you have really um i think one calls it han ak issue because you cannot really reference the other side because if you referenced it you know you would load it uh before but i think when it just comes to a module it's okayish because our contract for the module is it provides some lazy child routes if it came to a component then perhaps it would be a good idea to share a common interface so that we know what we can expect from this component so you're right in this case uh having a shared interface would be better than this implicit annie okay so everything is full here let's click here and whoa it's loaded on demand so let's have a look at the network tab we are loading everything i'm clicking here and it looks like lazy loading at first sight but it's more than lazy loading you see it here locally host 3000 localhost 5000 it is just an url where we grab this and load it and also we only have one no 11.6 keys this proves that angular itself is shared because otherwise it would be far bigger wouldn't it okay so one thing i there are two things left i really want to show you the first thing is we want to get rid of static federation we don't want to hard code this url i'm excited in our configuration and the funny thing is you just mentioned that steven flewing is watching then i showed this to stephen flewing about uh i think one month ago or one and a half month ago i told him yeah just copy paste this helper function and it will enable you to do dynamic federation and when i say this i realized well perhaps there is some room for improvement when it comes to developer experience and so i just baked this helper function into this plugin everything we need to do here is to get rid of this section i'm commanding it out we need to switch over to our app.routes file and then we switch out this dynamic import for this helper function it's called load remote module and you see it comes from this package from my plugin and this basically takes three uh properties the remote entry file which is this here it takes the remote name which is mfe1 and it takes the exposed module so basically it takes everything we needed to define upfront before its helper function is not doing a big magic it has i think 30 lines of code it is using what i'm calling the web back runtime api when you combine an application with webpack you find some objects in your global namespace and i think we all know what i mean when i'm saying global namespace i'm referring to the window object and you can use this low level mechanisms to load something on demand and this is just wrapping it nicely so that you don't need to work with this with these low level objects yeah and that's it you just add that load remote module like to the to the build like when did you add that you said you talked to him about a month ago so did you just implement that uh yeah so sometimes i have my moments and after this this conversation i found out hey there is room for improvement so i implemented this yes very cool oh yeah i need to project this ecmascript module to the angular module exported by it okay so let's try it out yeah i think it works but uh it works one drawback here is that now also the metadata the remote entry file is lazy loaded uh there is also a solution for this and it comes with some issues if you load the meter data too late because only now we would find out that this micro front end uses angular 11.1 but now it's too late we have already loaded angular 11.0.0 so it would be beneficial to loads this remote entry point up front and also for this there is a solution so cut this out here let's go to the main file and now you need to be very strong because your main file does not look what it used to look before this is also done by the schematic we've looked into before um it is just dynamically importing a bootstrap file this bootstrap file has been generated by the plugin and it is your form maintenance so why do we do this thing at first sight it doesn't make any sense but at the second side this is a pattern you find very often in module federation based applications could be a german composite term a module federation based application in german this would be one word and the thing is this dynamic inboard is asynchronous all the time at dynamic import is asynchronous and when we have something that's async at the beginning that back module federation finds a time to to squeeze itself into the bootstrapping process it squeezes itself in here and now here it is negotiating about versions let's use your version or let's use my version you have angular 11 you have angular 11.1 so let's go with angular 11.1 so and here we can leverage another helper function load remote entry mfe1 and yeah that's it's now the meter data is loaded up from but only the meter data the micro front end is loaded just on demand here we have a promised chain and then they do some error catching and it would be also a good idea to catch an error here if there was one because perhaps the micro front and does not work but in this case we can at least bootstrap the shell and provide all the other microphones yeah this is just a tiny implementation detail but if you want to make full usage of this negotiation of versions you should load your meet the data upfront only the metadata not the rest the rest can be loaded on demand as you see here and then i'm assuming if you had multiple micro front ends with multiple of those remote entry you'd have to import all of those right in that yeah yeah multiple ones yeah so i've just discussed this today with the customer and our idea was to bundle those remote entries on the server side so that we only needs to request one file and it contains everything we need nice cool and now let's come to the question of uh brocco he asked how can we share a library that is part of our monorepo basically he shared he asked how can we share a service and my answer would be put it into a library because when it comes to the angular cli the library is the unit of compilation technically it just needed to be a separate file or a separate folder to make it work with module federation but if you want to make it work together with the cli it would be nice to create an own library and share it because as mentioned the library is the unit of compilation here so for this let's do energy generate library let's call it the message bus and everything is generated and now i'm doing what i'm call that an axe monorepo style i'm going to my ps config to the global one and i'm adding above mapping not to the distribution folder but to the source folder this is the um the point within this demonstration where i'm always messing up because you know i'm grabbing the wrong folder so let me copy paste it message bus where is my entry point public api copy relative path [Music] and here the go okay i'm on windows yeah that's it so wait wait wait it's they it's based on opera wait what the windows does the other and i didn't even know wow thanks manfred yeah i i did a lot of.net programming when i was younger in my health i was young and needed the money no i'm i still love i still love.net and yeah that's why i'm still on windows and yeah i always those issues with four but slashes and backslashes so yeah this is my library and in this case as brocco mentioned before this is not an nbm package uh this is just a folder somewhere in my monorepo and i have a beautiful name pointing to this folder and by coincidence this name looks like the name of an nbn package now within this message bus let me just implement some logic so here please uh don't judge me i'm just introducing a public behavior subject normally it would be more more technical and i would have more things but here i'm just going with a public behavior subject i'm calling it events new behavior subject and this allows me to pass some messages around between the shell and the micro front end and the next microphone then i'm also just going with string um normally you would have a nice message interface with type and payload something you might lo know from rx chess here for the sake of simplicity let's go with this so let's grab the message bus let's go to our app.component of the shell and in here let's use the constructor let's inject the message bus here you see it really looks like an mbm package and here let's say this.messagebus.event dot next hello from the shell and within my micro front end i'm doing the same there i have a flight search component so please ignore this constructor here let's just merge it with my constructor and let's import it message pass yeah should be fine and here of course i try to receive the messages subscribe let's get the message console debug message or [Music] message or message received in mfe1 and this is the messaging so the thing is now we needed to provide some meter data of this folder for um for module federation module federation can do it if we look into this webpack file here and we could here provide an own object that is pointing to this folder that is assigning our beautiful name to this folder but the thing is the angular compiler is not aware of this the angle the compiler will still use relative paths and this breaks everything and that's why and this is the last feature of this library i want to showcase today that's why i implemented this shared mapping skills this shared mappings class only gets the names of your shared libraries and then it will generate the right meter data for webpack module federation and it will generate another backpack plug-in that tells the angular compiler hey angular compiler don't use relative buffs please use this beautiful buff here so that module federation is aware that we are going to share something that already exists so it's it's a bit complicated but uh because we just need those two lines of code and we should be fine uh i would say let's try it out and see if if we deployed our message bus to like npm so it was a public package at that point would we not need the shared mappings and we would do it just like the shared like angular core and stuff totally you only need this when you want to share something that's part of your monorepo if you go mbm then just put your message bus into an nbn package and you should be fine cool so let's cross fingers f12 let's click here let's click here let's shall we have a look to the console what do you say yes yeah message received re received okay it's a typo microfrontend one in it and yeah i thought we should see something like hello from the shell so let me just have a look what i screwed up here it's called message bus what is the library called it's called also message bus oh yeah of course we need to do this in both web back configurations it's as you said before everyone needs to opt into this shell and the micro front and one so let me reload the micro front and run you know the backpack configuration is only respected when we load our application and one more time patience is a gift so let's retry this and hey here it is hello from the shell so we have a basic mechanism to communicate between our minecraft roundants and if you ask me message passing is a nice way to do this because it's quite unobtrusive isn't it i'm sending out a message and perhaps everyone is interested perhaps no one is interested that's awesome very cool and then of course that that message bus then we have the one instance that's essentially keeping state right and that state that's shared across all of our microphones that we're bringing in here if they yeah yeah totally totally that's why i'm using a behavior subject here in real world perhaps it might be a good idea to have some additional logic because in real world we need perhaps some mechanism that is filtering out some information of the messages and provide them all the time like this is the current user microphone and two came delayed because it was lazy loaded but here you have the current user here you have the current time frame we are talking about here you have the current customer we are talking about most of the time there is a handful of context information you need to share it's very exciting it's uh it gets the mind just going and churning of oh man i can't wait to play with it can't wait to do more with it you know uh it's very killer so perhaps i can just show you two more slides one thing is very important uh namely the question when can we have it and as mentioned webpack five is final but the cli is only using an experimental backpack five plugin that means you are opt-in that means you can start prototyping today and in may hopefully in may then cli 12 will ship with a fully flagged backpack 5 integration everything will work and by the way uh you know i have this ebook and i have updated it meanwhile i already have the third edition um and this have been heavily updated for all the things we have discussed today and for further things so if you are interested into this perhaps you might check out this free ebook at angola architects io and i think we are a bit out of time but uh this is my blog and here i have already uploaded the slides and the examples for everyone who wants to try this out nice nice i highly recommend that book i picked that up a while ago i haven't seen the latest version but the version i have is is great and then all the content that manfred puts out is amazing to help you understand these concepts and start thinking about the stuff on an architecture level so we fully recommend uh hitting up that blog and consuming that content for sure thank you thank you that means you have looked at it that was you i have i have okay so that's great for sure um cool thank you cool all right uh yeah so we're a little bit past time but totally worth it because that content was great do we want to do any quick picks uh mike do you have a any pic that you want to share or anything or i do not have any pics this week okay i don't really either uh manfred if you have anything other i mean anything else that you want to share in terms of um or perhaps a funny story i don't know if it's that funny but i'm a big star trek fan and in europe we've got uh star trek the lower dax last week i think it was already you cannot say broadcasted but it was already streamed in america several months before and it was a bit skeptical but i love it it is star trek and it is funny it is a cartoon by the way and the good thing is if you don't have any expectations you will always be happy you will always have a positive result so perhaps if you haven't seen it look it up nice nice yeah that's one thing that's really i find compelling a lot of people do right is the taking these worlds these uh ips and these concepts right and then diving into like the side stories or or other things that happen in that universe in that world and we see it with star wars star trek and you know the marvel and things like that so those are always really fun to kind of get life in that universe but not from the main characters very cool yeah yeah that's that's the idea that's really funny nice nice well hey manfred uh thanks a ton for coming on sharing your time and sharing your knowledge we always really really appreciate it and we always learn so much so thank you very much for coming on yeah i thank you for the invitation at any time anytime you're wrong all right have a good one everyone take care see ya thank you

Channel: AngularAir

Views: 1,895

Rating: 5 out of 5

Keywords:

Id: t42MGQfJuDI

Length: 77min 16sec (4636 seconds)

Published: Fri Jan 29 2021