AngularAir - Micro Front End Revolution with Module Federation and Angular with Manfred Steyer

hey what's going on welcome everybody to another episode of angular air I'm your host Justin Schwarzenberg and on today's episode I'm always excited about every episode but I got to say I'm super excited about today's episode like a little bit more than all the other episodes up to this point really but we're talking about module Federation some new stuff some exciting stuff I can't wait to get into it so that's a door panelists and then we'll meet our guests and then we'll learn all about it join us today we've got Bonnie with us Bonnie what is going on very happy about the guests which I am NOT gonna spoil it looks like you've got a shirt that is in context with what we're talking about today all right I was like looking at this and I'm like well because remember Stephen flew and was on a couple weeks ago and I was like what is this module Federation this is like a Star Trek thing or whatever but whatever it is steven blum was excited about it so I'm excited about it cuz Stevens excited about it and then I was and then he said well Manfred steyr did this thing and I was like well now I'm I because I'm just so excited I was gonna many that way I didn't mean I'm so sorry Justin see it's quite all right no problem so you got you with the pack shirt on and you get it decide I'm wearing the webpack shirt or a red shirt right because the whole Federation Star Trek well it's a because it sounds like Star Trek but then when you get into it there's like some webpack in there and plus I have like the old school labeled Shawn Larkin outfit kind of thing going on so yeah so I had to represent alright well we have to we have to figure this out and I'm so sorry I just completely ruined that I know it's not a problem at all Alyssa's joining us Alyssa what's going on hi excited to be here and Mike's with us Mike we can't be hey Mike Islands you gotta come by that's all I didn't want to ruin anything so I just was I and he hasn't don't shirt on I don't know what don't don't worry Mike I don't blank with any other pets don't believe me I just married into this nice nice all right and our guess it's for my wife oh wait oh it's gift for you okay all right nice representing I like it our guest today man first fire Manfred how's it going yeah fine thanks we are super excited to have you I think this is the first time we've had you on angular air is that sound preggers baby yeah yeah yeah it is no benefit Lenti of time for remote stuff you know we're very excited to have you I do I tell our viewers a bit about yourself for those that might not know who you are and what you got going on uh yeah perhaps one or two sentences I'm Manfred I'm a trainer and consultant for angular and I'm helping a lot of companies with trainings with consultancy and I'm quite connected to the angular community and I love it so I think that's all nice nice I know you've done a lot of talks and workshops on like really enterprise level development of angular applications and thinking about these larger code bases and how you solve different problems and architecture challenges in that and I'm assuming that this module Federation kind of falls into that kind of concept and so yeah totally it really solves an issue a lot of my customers have since I don't know since three or four years because everyone is wondering how to implement micro front ends and so far there have been a lot of solutions but not a really sound solution and now it looks like that module Federation will be the first official backpack based sound solution for this I'm so excited to learn about it yeah are you gonna explain what the micro front end concept is when you get into it or should we ask you right now about that well you can do both I've prepared some slides because for me it's also important to know then to use micro front ends because it's not a silver bullet I mean what is a silver bullet nowadays it comes with advantages and disadvantages and so you have to evaluate if it fits your needs if it fits your architectural goals I have not used it because it's cool I would use it and when I'm seeing that it has more advantages for me than disadvantages well before we dive in I wanted to tell you that the chat is going crazy they're all thanking you for this topic so way to go you don't it's cool because you use it manfred I don't know so I have fought this slight regard perhaps you can put some ice cream on and yeah as mentioned this is about Mike Rowe from dance with module Federation and I had a lot of fun when I prepared this light tag because you know Federation of Planets and Star Trek and so on selecting all the pictures was really fun but there is one picture that does not have anything to do with Star Trek but it also came in mind and I prepared for this presentation namely this picture here and perhaps you remember this woman do you remember it is that kid yeah it's kid yeah it's it's Knight Rider and and she was the engineer in the night reality and then I was a little child she really inspired me because she solved all those technical issues and these those computer science issues and I really liked it and I think she is one of the reasons why I talked my parents into buying me a computer of course I had some other ha commands like you know it's might be beneficial for school which was not totally wrong but also not totally true but they are she really inspired me but when thinking back to Knight Rider and dopamine I noticed one thing she was some kind of bomb moment and this is nowadays not the case nowadays we don't have one man or one woman shows because nowadays and now I have another Star Trek picture software engineering is a team sport we have several people and we need to coordinate them hopefully a diverse team a cross-functional team where everyone brings in his or her skills and it is difficult enough to coordinate a team but nowadays sometimes we have to coordinate several teams because software is getting bigger and bigger and so we have to make sure that all those teams can work together on a big software and this is quite challenging of course and there is a solution for this the solution is telling us that we shall not implement monoliths anymore and non-elite is a big system doing everything cooking coffee and taking care about flights and taking care about buying some black shirts something like and instead of this it would be more beneficial to go with micro services I mean this idea has been around for about 20 years and since about 5 years we are calling this micro services a micro service is just a tiny subsystem in our case instead of a flight system we would create a booking service a check-in service like edge boarding and so on and so forth and unless those parts know about each other the better it is because if they don't know much about each other they can be implemented in isolation by a specific team and this is the goal here so one team can concentrate on one service and thus not influence other teams concentrating on other services and now a lot of people are thinking about how can we use this pattern in the front end and so what we are coming up with is micro front end which is basically justice idea transfer to apps in this case we had the booking up and a check-in app and so on and so forth but the big thing is the question is what we are trying to answer how to implement those micro front-ends and there have been a plenty a big amount of answers but not a perfect answer we needed a lot of work arounds to implement micro from dance and so it was not that much fun it was possible but you needed a lot of enthusiasm for doing it and that's why I'm really glad that backpack 5 will bring this module Federation idea which brings a sound solution for implementing micro formats yeah and this is what this talk is about this talk is about micro front dance and mojo Federation but first of all I will start with the consequences of micro front ends because before we think about the solution to implement micro front ends we have to make sure we needs them if we need them if our application meets the sweet spot of micro front ends everything is fine but if we don't need them please don't even try to implement something like this because at the end of the day you will have more disadvantages than advantages after this I will show you how to implement a solution with module Federation and angular and then I will answer one very important question namely then can be happy this question is not that simple to answer because it is currently in beta and so yeah we will see when we can use it but first of all let me introduce myself I already told you some things about me I'm unfit I'm a train and consultant and that's all the Tarina and consultants out there I'm doing a lot of remote workshops currently because of this very situation you know besides this I'm connected to the angular community and really a big fan of angular doing a lot of stuff in the german-speaking area of Europe and sometimes when I when I promise to behave correctly and also allowed to help companies in other countries which is nowadays easier because we are doing everything remotely now don't we okay so let's get started with the first part I have prepared for you this is the part which is about consequences of micro from debts and I think the biggest positive consequence is we can create autonomous teams teams that can work on their own on a specific part of the application themes that don't influence other teams which is quite important because I don't want to change something and create a pact in another part of the application where another team is responsible for so I think this is the main advantage of micro front-ends we have a lot of autonomous teams and autonomous teams lead to a lot of further advantages for instance we can have a separate development we don't need to communicate much with the others we can trust to our chop we can just produce business value another advantage is we can have a separate deployment that means when we are done we can deploy it immediately and the user will immediately get additional business value we don't have to coordinate with others to wait until the other teams are ready for deployment just deploy it when you Adam brings a lot of agility back into the game even though we are talking about big companies we can bring back the agility we know from smaller teams from smaller scrum teams they know from small companies or startups and it is also nice each and every team can do their own architectural decisions and this is important for me because for me an architecture is not the one-size-fits-all thing different challenges lead to different architectures and also each and every team can do their own technology decisions this is a very important point because it gives you a lot of power but you know there comes a lot of responsibility with power because you will not create a lot of different subsystems with a lot of different technologies because you can you need a good reason for it I have a lot of customers which you know they can use different technologies but they stick with angular they stick with angular for the time being because they don't want to have a technology issue but it is good to know that in the future they can switch to other technologies for other parts of the application because we all know that technologies will evolve and we all know in 10 years we will have a lot of new technologies and we don't want to stick with one technology we are choosing nowadays perhaps there is a better technology for this very subsystem for this very micro front-end we have to implement in 10 years and this gives us a lot of flexibility if you ask me because of this point and micro front-end architecture is more honest than all the other architectures because the micro fronting architecture is knowing upfront that something will change that technologies will go away that technologies will die and we are respecting this from the very first day in other scenarios we ignore this we ignore that there is something like the death of a technology we act like the technology will live forever will be there forever and then we have a hard time and we need to change out this technology of but the big point is here please be be careful here because we don't want to end up with the technologies and as you have seen here micro front ends are first and foremost not about technically stuff first and foremost they are about scaling teams and you know teams means we have at least two of them that shows us that if we don't have one team we will very likely not reach the sweet spot of micro prominence so if you only have one team very likely you don't need them yeah there might be this or that reason why you might need it even though but in most cases I've seen if you just have one team don't go with micro front-ends because in this case that disadvantages will be bigger than the advantages talking about disadvantages of course there are some challenges for instance we need to deal with your eye composition your eye composition means we need to present our let's say 10 or 50 micro front ends as a common thing to the user be as the developers are happy to have 50 less complex subsystems but the user isn't the user is not interested into starting 50 applications each and every morning so somehow we need to present this as a big common thing and this goes hand in hand but if you high consistency the user wants to have a consistent look and feel if this is important for YouTube and upon your architectural goals of course there are some situations where you I consistently is one of your prime goals and then there are situation very high consistency is important but not the most important thing when you think about an ERP system like s a PE of you're a consistency is important but there are other things that are more important than UI consistency when you want to sell something of course your high consistency is very important perhaps the most important thing because this gives you trust so it's always about your architectural goals you always have to evaluate it's also about bundle sizes because when we load 50 micro front ends we don't want to load angle of 50 times somehow we want to share dependencies like angular like rx chess and so on and we have to take care about version conflicts version conflicts between micro front ends but also version conflicts which arise because of different micro front ends are using different versions of angola RX chess and so on let's say 1 micro front end is using angular 7 and another micro front end is using angular 9 and when we use everything together we have a big mess I guess so somehow we need to deal with these issues and perhaps this is the most difficult challenge we are facing when going with my core services and of course with micro front ends and there are some additional ones but I think for getting started those four are enough they provide me the church cuny effect you know they make me to grow gray hairs in the case of tragically it was a big advantage perhaps it's also a big advantage for me Kunitz ok so I have a good message for you Marshall Federation in webpack v solve some of those issues not all of them but some of them it does a big deal when it comes to UI composition it really helps with this and it really helps with sharing dependencies and so with reducing bundle sizes and it's may help with version conflicts it may there are some features which can be beneficial so if you fix the sharing dependencies so we're all pointing to the same dependencies wouldn't that fix version conflicts as well yeah that is the thing because I can force all the macro front-ends into using the same version of Angela but if they are not prepared for this or that version of Angela then it does not help much that's why I'm saying yeah there are some some ideals implemented into module Federation for version conflicts but at the end of the day you have to make sure everything works together and so you have to do this by your own so I don't think that a technology like let's say module Federation can help much with this cool okay so much for micro front-ends as you've seen before it comes with advantages especially for a huge company companies but there are also some disadvantages now let's talk about module Federation so I'm always saying module Federation is a bit like than 1980s you know you have to experience them unless you cannot find out what they are about and so let's get started with a demonstration in this little demonstration in this little demonstration I have this shell this is my micro front-end shell and this micro front-end shell is capable of loading micro front-ends like this year everything within that dashed border is just as self-contained micro front-end it has been implemented separately it has been compiled separately and it has been deployed separately and then this shell here is just loading the newest version then we look at both happens behind the covers we will see this looks a bit like lazy loading because when I'm opening the network tab here when I'm clicking there we are seeing that this chunk is loaded the chunk with the number seven nine eight and yeah it has just free case which is quite awesome because this proves that with module Federation we can share dependencies with in free case there is no place for for fitting Angola into or rx Chesson dude this is just my code and this code is just sharing angular and all the rest with tisha so at first sight this really looks like lazy loading but at second side we see something that's really cute namely here we have the origin with localhost 5,000 and here I'm swimming into it we have local hero 3000 which is a completely different origin and this has not been possible before with that back and angular Scylla so we are really crapping out to a different application and loading parts of it into our shop and the best of it is this different application running on localhost 3 thousands even works in standalone mode this is important because the team needs to test it in isolation needs to test it without influencing other themes it needs to deploy it in isolation it needs to develop it in isolation and perhaps some users just want to loads this part of our system in this case they don't have to deal with tisha so after we've saw this the big question is how is this possible and perhaps you are saying hey this cannot be that difficult because you know in that pack we have nowadays dynamic imports and before we had to require so by not just import something from over there from this other from this other origin at first sight this really seems to be easy but at second sight we will find out this is not possible with that back and it is also not possible if the angle a CLI which is using that back and the reason is that back demands us to keep everything to it during compilation time that back wants to know everything up front when everything is compiled and this is even the case for lazy parts because what is fat back doing that ik is taking all the source codes webpack is compiling the source code web Beck is optimizing the source code and then and only then is back splitting the source code into chunks and some of those chunks can be lazy loaded some of those chunks will be loaded in an eager way this is how bad that works and so it cannot easily reference another application with import and this is exactly where Marshall Federation comes in module Federation defines several roles one of those role is the host and the other role is the remote in my case the shell is the host the shell is the host because it wants to load some remotes in this case it wants to load some micro grommets and the remote is just a self-contained application which can be loaded into another application and within the shell everything we need is just a tiny amount of configuration they need this configuration section which is defining remotes to be honest it is more defining your else pointing to hosts are pointing to remotes in this case I'm saying he F is your L MF e 1 MF e 1 stands here for micro front and 1 I know it's a very creative name and I'm saying hey every time we are importing something from M um please load it from this other origin you have seen it I have MFE one several times here I have it twice this is because I could introduce an alliance here and not doing it I'm just calling it MFA bond but I could say well what's called MFA one over there is called man Fred or Batman or Bruce Wayne or something like this in my application by the way it's always a good idea to call your variables Manfred or batsmen your colleagues will love you about their can expose to Batman same-same perhaps not exactly the same but yeah and I'm a big Batman fan and I really tried to bring in some Batman things into this presentation but it was full with nitride and Star Trek so it was difficult I think I need to do another presentation with Patton hmm okay I think all of them together is amazing and you should just you should do exactly what you're doing Manfred okay cool so I will try it next time so their remote the Mac for front-end can expose stuff for instance it can expose this very file with the components and it gives it a name an official name which is CMB here and then trust me then something beautiful happens then I can do something like this within the shell I can import something from MFE bond cmp MFE one points to this other remote and CMB is the name of the exposed component over there and so I can load this part of this very micro from that it's really as easy as that of course now you are wondering well how do we get the URL of the micro front ends because the shell needs to you it don't to know is your L and the answer is when compiling the micro front ends to get the remote entry point it is just a tiny file some bytes it's really not big and we have to load this remote entry point into our shell we can do it with a script tag they can do it with a dynamic script tag and I've already seen commit which is introducing a way to tell the shell by providing a chase object where the micro front end can be found so hopefully in the near future we don't need this crap deck anymore we just called a function we are passing in and chase an object an object literal and this points to the right URL another thing we need to do is we need to share libraries and this is also really easy it is almost too easy to be true because to share libraries we just need to fill this object it can be an array it can also consist of other objects in this case it is just an array where I'm saying hey I want to share angular core and if the micro front-end is doing the same the micro front-end will not load its own angular core it will just reuse the already loaded their already existing angular core it's really as easy as that and that's in like a web pack config yeah that's in there that back config yeah I feel like you must have forgotten something because it can't possibly be that easy well it's really that easy because all the heavy lifting is done behind the kaaba's by those backpack plugins and by the backpack infrastructure there are some challenges some hobby needs to squeeze this into the angular CLI but I have some ideas files okay cool yeah so one issue as mentioned before is conflicting libraries when bashir libraries we can have conflicts you know one micro front-end could need angular 7 the audubon codes need angular 9 and then nothing works at the end of the day for this module Federation gives us two solutions the first one is we can trust into the shell we can put our heads into the sand and just trust that everything will work anyway so in this case perhaps it works even with angle a9 even though we are expecting angular 7 and the other strategy is each and every Mike for front-end can design to load its own version that means the first Mike for front-end loads angle 7 the other loads angular 9 the shell has angle ID it's another option provided by a module Federation but honestly both solutions might be bad in some situations one of those solutions might come in handy well if I have rx chess in that version and in this version it might be not that bad of course we are loading too much but it don't might be that bad but when it comes to angular it might be really bad if we have several versions of angular because if they will influence each other we have a really hard time and so what a really thing is we have to prevent the situation by our own by introducing conventions by introducing contracts or by using a Manu repository because the Moana repository can make sure we are just using one version of all the libraries of course if we have different deployment we can even mess up with Minori boss but it's better than nothing ok so no one will help us out of this because you'll see both solutions that are possible on an technical level might not be the best suit idea something which also might help here is using integration tests it makes at least sure everything works together in your staging environment before we publish it to production of course we all have a staging and via mans they've ultimate the desks Donzi okay so often were said a bridge for sure of course or a hundred twenty percent of coverage so let me show you all this in action let's dive in a bit into the source code what we see here is my shell to be more precise there routes of Michelle lazy loading something from the micro from that and it really looks like traditional lazy loading and the best of it for integrating the micro front ends into Michelle and just using angular I'm just using the rota but the thing is as mentioned before this here is mapped to an external application an external application which is exposing a module it's file contains the flight's module and hopefully these flights module contains a routing configuration of its own you note some child routes so that this place together with reasonably it is everything I need in the source code of my host of measure of course now I need to configure everything and for this let's have a look into my backpack config what we see here what we see here is everything they needs to put into the configuration of the shell he needs to put the module Federation plug in there we have to define our remote no elias's here and yeah we need to define our shared libraries angular core angular comm on angular Alta and so on and so forth and then we have to do something similar within the configuration of the micro front-end let me scroll down it's even so we assign a name micro front-ends one we define the name of the remote entry point this little file that needs to be loaded into the shell up front we need to expose some components and modules and we also need to share some stuff and that's it rest here is normally generated by the angular CLI but I cannot use the angular CLI because it is using that back for currently Babic five is still beta and so it will take some time until it supports that back 5 but everything we need to do and this will be not a big challenge is to squeeze this configuration in boot the back track configuration created by the CLI so it should not be that difficult I guess also of course when compiling this this micro front-end to get this file and this file needs to be loaded into the index.html of our channel it's here is Michelle and as mentioned before we can also do this dynamically and hopefully in the near future we can do something like I don't know who its backpack breath is configuration like I don't know mft1 can be found you in this case we can load this object from the server from a lookup service or a discovery service and so we can configure everything in a very dynamic fashion okay cool that's it that's that's everything we need to do here so it's really powerful but it's not complex of course now the big question is van can be have it and the answer is well but that Phi F is currently in beta as mentioned before and the shown example here is just a proof of concept a proof of concept with the custom backpack configuration and with a patch CLI library I just patched some of the angular CLI libraries especially the library which takes care of a whole team because I need to do a ot with in my backpack build and you know hands crafting backpack configuration files is not that funny I've done it before and I have to say I've done more funny things I have done funnier things because yeah this can be quite huge and exhausting and so we need first of all a see live version which supports web backfire fans we will not get it before fall 2020 before this fall because in fall 2020 begets CLI 11 and this will be the time when backpack 5 is hopefully ready so we have to wait until fall and then we have to find a way to squeeze this Federation config into the seals sea lice backpack convict this can be done by a custom builder we can handcraft one or we can use an JX builds plus this is one of mine builders which allowed to merge one backpack configuration into the seal ice pack configuration this might come in handy it means if everything works out we are on the safe side involved if you say hey this was a great presentation perhaps you like my ebook I'm updating it on a regular basis and I think several days ago I think it was last week I've updated it with some chapters about module Federation but also with some alternatives for module Federation some alternatives that already work today you can download it here at angle architects I chose - and if you say hey this was a presentation button your book is free yeah it's free so just download it give me feedback I'm always happy if I get some feedback because it is really valuable in those times your feedback is I feel oh it's free yeah you know we are a community so just go to my website register at my website this is everything you need to do and then you get it okay so um if you don't like it's my talk check out my ebook anyway perhaps I'm writing better than I'm speaking you know there is still the chance that every one of us will be happy good so let me come to a conclusion um we have seen the main purpose and this is really important the main purpose of micro front-ends is not technology it is organization is it is about scaling teams it is about subdividing your application into parts that can be implemented by autonomous teams and also Federation is mainly about loading stuff from other apps which are deployed separately on other origins it allows us to share libraries and please take care of conflicts I guess we have to do this by ourselves because I cannot even imagine a good technical solution which is taking care of this and there is a last thing I want to tell you namely try to be a bit like bunny like the pony from Knight Rider because what Pony is doing she is always thinking first in opposite to her counterpart to the main cast in Knight Rider this guy from the beach I don't remember his name he is always hit first then thinking but only is thinking first and this is what I really like in our case please first think about if you need micro front let's evaluate them and if you see yes if you say no I don't need them because they only have one team then go with and model it some people are calling it a match a stick model it because you know the micro service people are saying and monolid a big application is something that's bad but that's not the case if you have a good structured monolith if you are using an axe to make sure that you have a proper structure and monnel it can be a beautiful thing and my yes stick thing so that's why some people are referring to it as a majestic model it and if you say yes I need this micro front and stuff because several teams and so on and so first please consider module Federation there are some alternatives but module Federation really seems to be very attractive because it's an more or less official solution from the backpack team and it takes care about so many things underneath accounts here you have my contact data you finds my slides and my examples in my block and if you won't follow me on Twitter so that we can keep in touch yeah that's it's pretty much awesome very awesome I have six things that I wrote down that I want to ask you about in discussion points so let me throw those out here person we can continue out there and I have a question about when let's say my module needs another angular library right like let's say it's using forms and the shell using forms how do we handle that where we say hey look my module a needs forms bring out in web pack or whatnot yeah so we can talk to the shell people to add angular forms to the shared section of their configuration and if they don't do it then module federation will automatically load angular forms alongside the micro grounded so it really checks at runtime if this shared library is already there and if it is not there it is just loaded on demand that's why everything that is shared is put into separate bundles to make this possible so then like where you showed your 3.1 K for the one that you had because that's all it had in it if that one needed forms and it didn't exist it would be the 3.1 Cape but also the forms coming into the client download yeah and you can even bind it to a version number or to some other string and in this case only then those strings fit together like the version numbers it will be reused otherwise it will be loaded separately by their microphones okay I'm gonna keep going through my six real quick right okay so then is it gonna be possible to think about things like pre-rendering that micro front end say yeah it's a very good question I had several weeks ago a customer who needed spoof pre-rendering plus plus micro front ends because it was a huge system and it was customer-facing sudha needed both and the thing is with all the other workarounds it does not work that well with pre-rendering of course you can always spin up something like puppeteer on the back end and do pre-rendering with everything but as this is baked into backpack it also works perfectly with pre-rendering and the guy who is creating this module Federation stuff has even a fork of next four react which proves that and I have even seen an example there are someone who is following me on twitter has me great that's my ideas - an idea that is using SS our angle up ace SS our so we are on the safe side very cool and then with the URL pass and everything we could put those pre renders on different CD ends as needed right and have that come in that way yeah yeah very cool the hands or I don't know get top HS or this new Asha thing we've heard about this week very cool ok my next three are just recaps of points that you said that I want to reiterate that I thought were excellent right the that where you said we admit that like technology is gonna change right so we're being honest about the fact that we're setting that up I love that because it's it's different from saying like when we think about in terms of that saying we create a facade like this hey we're doing database integration and we're like well let's put a facade in front of it in case we change our database outright well that's a different pattern than saying this which is you're admitting that technology may change but you're not building around that right the the Federation allows you to say I still build my specific technology but because I've set this a little bit of infrastructure up I'm ready to you know do something different if I need to down the road right and I just really like yeah right yeah that it's really good I mean several people are also denying that at some point in time they have to die and we are doing the same with software and I think my are just are not thinking about this fact is wrong thoroughly thoroughly not you might don't worry not me okay cool and mid I I like the fact that like when we start talking about this module Federation and grouping those things into little pieces when you architect those pieces you get to think clearly about the API that you're exposed and be able to keep that internal right so that's one of those big benefits of being able to break that thing down into smaller pieces is that then you have more control over how others are going to use your stuff and then you can internalize more stuff to ensure the integrity of how you want it to work that's what those are movement but that's the point you'll need a way of creating stable api's and you need to minimize your communication and you also need to minimize the code sharing because if you do a lot of communication a lot of code sharing all the bots depend on each other and this is exactly what we wanted to prevent when we invented micro-services microphones so for communication something that seems to work quite well also in the backend is messaging just razón an event like hey I have booked a flight and if some other parts of the system are interested into it they can react upon it and if they don't are interested they can show us ignore it it's their choice right and then they can even add one to mini that decide to plug in and listen for it and react to it yeah yeah hmm okay I got two more sorry panelists I I guess I'm having my moment but I really want really feels a lot like there's also the concept of domain driven design that comes into play here and I know you know a patent you talked about that maybe you can touch just briefly on on how that comes into play as well and this thinking yeah that's a good question because you will see Mike for front-ends only makes sense if you find the proper way to cut the system into tiny pieces if we have a system where everything is in the mingling with everything else by nature then this might not be possible just an example I have this customer who is creating a really beautiful diagramming application they are painting PPM hand diagrams business processing models and because everything is just an editor a graphical editor they cannot easily split every staying into self-contained parts because everything is used by the editor and so it really needs to find a way to cut it into domains yeah that's right in some situations it's very easy if you think about an ERP system like sa P it is quite easy because it is quite natural to have an accounting section and an sales section and let's say a sailor resection and the cost calculating calculating section so here it comes quite natural and that's why using to mange revin design is the first step you need to do and then when you have your domains you can think about - we need to split it into micro front-ends or to be keep everything in between and majestic monoliths nice and I love the majestic monolith I love the thoughtfulness and mindfulness a you approach that I really appreciate that okay last one and it's just a thought provoking thing to go forward with doesn't it kind of feel like maybe we're almost building an operating system and we're saying the module Federation our little app so we're bringing in our app shells really like a little mini operating system yeah a bit like that yeah a bit like that so I think if the micro front-ends don't know anything about each other we can also create separate applications think about the products we'd like let's say the Google suite or office 365 they are we have a lot of separate applications but if they need to exchange some messages not too much and if they need to exchange some code not too much then this approach might come in handy is module Federation approach nice all right Thank You panelist I appreciate you letting me write questions anybody else I was getting so stressed out because in the earlier in the show because Manfred told us to wait till the end because he had a lot to cover and we had a time limit today and but there were so many questions in the chat and I was like how are we ever gonna get to all these and then this Zach Jackson guys just like knocking him out and all these I hope he knows what he's talking he sounds like he knows what he's talking about yeah he is the person who implemented much we believe him so he implemented it oh shut up fry so if you don't believe anyone believe him Thank You Zack Jack we appreciate your support and your presence in the chat I was looking in all these questions and then Zacks just like knocking about so he's also kinda knows he's kind of blowing my mind a little bit with some things that he's suggesting um so you know if you if your prep or something like that I'm talking about are you sure we should listen to this guy Manfred elderly and I will use this opportunity to also say thank you to sac because he also helped me to make it work with angular with this proof of concept because you know angola is a bit more how shall i put it holistic compared to other frameworks and so I think some tricks I have a question because Justin saw the floor so you mentioned the idea of like NX being very similar in terms of building libraries to be able to share all these separate pieces of logic or separate mini applications to build them as applications versus libraries you talked about the idea of giving out potentially shared state across those and my question in terms of angular and specific is that with angular 9 I think it was introduced not only do we have provided in route but we also have provided in platform yeah provided in platform support across the model Federation hmm yeah that's true so it would work it would work across module generation that means if we provide something I think for root is enough before root on the one side within the shell we can load it directly within our macro front-end if we know the injection token because at the end of the day with module Federation everything is one big application but the thing is we have to be careful because the fact that we can grab everything does not mean we shall do it I would really restrict myself to sending some messages around but technically it would be possible yeah my main concern with that and my first grasp in any application that I work on in terms of some sort of shared state is authentication is that you get there the users state across so if we have some sort of authentication or authorization service that we want to be able to share that same access that from anywhere within the applications or applications plural yeah moderation structure that's true we need a tiny amount of shared states so in most applications I've seen that really fitted well into this idea of micro front-ends we had about five or six fields that have been shared and one of them was to use or they are authentication token another information is a global filter perhaps able to fill the my campaigns for a date or time span or the current customer when it comes to a CRM system or the current patient when it comes to a hospital system something like a scaleable filters so as much as needed and as little as possible I would say all right I think we probably have time for maybe one more question or discussion and then we better wrap it up if anybody has anything last from our panelists going once not really okay all right let's do some picks if anybody has any picks and then we'll call it an episode our panelist does any of our panelists have anything I have two very quick picks my first pick is Zack Jackson from the chat who is a really cool guy and apparently a really smart guy and my second pick is and next week ng Vikings with this guy here who's going to be speaking at ng Vikings and no I mean I love ng Vikings sherry list and Maxim and Chris Naurang I just love those people and they're gonna be streaming live next week free and yeah so that's gonna be cool check that out that's not good nice Melissa do you have anything today you want to pick up or just from you know we talked about it those last week right I wanted to mention angular nation if you're not on it you should be on it a really really cool platform that ours truly Bonnie it has been working on for a while now so angular nation get on it it went crazy it's like 1,100 people in the first week we were not prepared for that I thought it was gonna be a hundred so that kind of freaked me out okay about 10 times as much as you were prep source no fun over there awesome Mike getting picked I do but it's something that I haven't watched but it's a TV show netflix has released a couple of trailers for a show called space force that looks hysterical it's the girl from the office and also apparently some of the writers from there it looks histor check that out it comes out with the end of next week I believe the 29th so that sounds fun very nice very nice I'm gonna do a pic this week and I'm inspired by Manfred and the 80s references so my pick is the fact that a river city ransom it's game video game from back in the 80s if they have a version of it now available on Xbox and so that was one of my favorite games eating a lot of sushi power up it's very cool so if anybody knows that game that's my pick mike has Mike must you reminded me of a speaking of retro games they've remastered Tony Hawk pro skater versions woman 2 that's coming on this fall yeah look for that too that's good alright Manfred do you have anything that you want to pick or plug I know a big Star Trek fan and there was this announcement I think it was during the weekend there will be a new Star Trek show which is about captain by Conda and prions and i'm really excited about it and do discover this part of Star Trek did you what card one yeah was that good I liked it the ending was a bit shocking but you know we all have our own ideas how the ending could look like and then we are a bit sorry if the ending looks in looks like a different way but yeah it was really good sorry I said speaking of the ending we promised we'd stop at the top of the hour tonight we made a pact yeah we're there and you know no surprise ending here our normal ending hey Matt Fred thanks a ton for coming on and sharing your time and sharing your knowledge on this we really appreciate having you on and you taking that time to do that for us thank you thanks for having me it was really a pleasure thank you come back and see us again alright everyone that's a wrap have a good one catch you next time

Channel: AngularAir

Views: 3,737

Rating: 5 out of 5

Keywords:

Id: -ThsrA8hRLc

Length: 59min 54sec (3594 seconds)

Published: Wed May 20 2020