JS Monthly #19 / Microfrontends / October 2021

[Music] so [Music] you [Music] [Music] so [Music] one so [Music] uh [Music] [Music] do [Music] so [Music] [Music] foreign [Music] [Music] do [Music] so [Music] so [Music] hello everyone and welcome to js monthly october meet up this is an online meet up my name is aries malcolm yanakis and i'm gonna be your host for this meetup you can follow me on twitter at artistmarco you can find all about um events and about the well you know community and what they were bringing as a meetup through my my twitter and we are always looking for new faces for to help us with the organizing events for the community you can email us at the js monthly london gmail.com and yeah we we are looking at all kind of faces anyone anyone who is interested in helping the community to grow and we had an amazing conference in person the first in-person event after almost two years locked in it went really well there was no issues with uh covid we were doing a lot of checks um in the entrance and the good the good fact was that when all the people from the conference went to the after party and it showed us that people want to go out people want to meet each other and as long as we are safe and we are careful we can be back to normal events and that was a positive feedback from the event so i i i would say that everyone should should go into in-person events and just be careful and we have put it all the videos on our on our website so you can check on the highlights on ctjs website and you will be able to see all the videos free from our sponsors and thanks to our av team in a code uh code motion i think they're called uh but yeah mind me mistaken the name we're having now a new event city js 2022 and it's going to be an in-person event at its cinema and we have taken out the super early birds and we have also announced the call for paper so if you want to come to london or you want to speak just let us know it's all in our website today we have a ctjs aluminized speaker peter edgermans and he's going to speak about microfrontends the what the why and how it's that's the title let's copy this is the title but this is the title uh peter and i pass it over to you thank you very much for for this so good evening uh i'm peter eilemans from ardena i work for two departments for the now for a jtag gtech and also for years roots the first one is specialized in java this js ruse is specialized in front-end and i'm going to speak about wait a moment [Music] the microphone is the what the why in the how the table of contents is i start with what is in monolith then i step over to what see our microservices then i talk about the front-end monolith step over to micro front-ends that's the main part of course integration approaches how you burn the live micro front ends together and communication between microphone tents and finally how to speed up development with micro front-ends let's start with the monolith on my little they say it is a ball of mud so uh the front end and the back end are tightly coupled tightly linked together and you have one database and it is not ideal so we stepped over to these layers we split up our our application up in front and layer business layer and database layer but when you change something in one of the layers you have a ripple effect you have to change when you change something in the business layer you have to change sometimes so i have to change things a lot of things in the front end in a new database layer etc etc so we stepped over to microservices we split up our application into verticals so each vertical is responsible for one business domain you can say and in the year in this example we see that we use one database so this is not what we want because the verticals are then tightly coupled linked to the database so we decided that every microservice has its own database so you have your own verticals which is responsible for their own business domain and can yeah okay you can develop it independently from other teams so microservices are small and our focuses are focused on one thing is autonomous in 10 years ago amazon announced that they have hundreds of microservices running in production that's great but a few months later netflix came with the announcement that they have more than 500 microservices that handles over 2 billion api requests daily it's quite good but they've got something they've they said they saw that their microservices has used what i do mean about it uh they they recognize that they have split up their back ends into micro services but they still have a front end which is still in monolith so that was the thing by amazon and network and netflix so they split it up try to split up their front end of course but first i want to recap this little part we started with a monolith where the front and back are and are tightly linked to each other and we have splited up our front of the back end into separate parts and finally we we ended here with microservices with a large fronted monolith at the top and that is not what we want so the micro fondants are born we realized that we have to split our front end into smaller parts like micro surfaces and so the idea is what you see here of micro frontends is to extend the concepts of the microservices to the frontend world the idea is to split up your front end into independent the loosely coupled a couple's applications micro fountains they call it and at production time you can bundle it together to one single user-facing application this is what you want here i have an example example application about uh micro fonted app where you can uh you have a search bar that is a microfontane and you have also a browse you can browse through restaurants and every restaurant is of course also a microfrontend uh how do we uh yeah how does this page looks like behind it behind on the dude you have a container application which is uh which is the main entry point of the application and this container is responsible for the routing and also for cross-cutting concerns like authentication authorization and also it contains two micro fontanes a micro front end search bar and a micro font and browse restaurants and here you have also another microfrontend which is which responsible for ordering your food so this screen contains one microfrontend microfrontend order food now it's the question how do we slice our application or do we slice our yeah microfront ends we have one microphone per page you can you can use hyperlinks to link it when you have multiple microphones per page you uh you see it as it heres here as it is here then you have yeah you can organize it in verticals that means that a profile is a vertical and a catalog is a vertical ordering also and a vertical is responsible where they already said for a business domain and a vertical consists not only a uh off front end but also consists of a microservice backend so everybody thinks about microphones is about only front-end but it is also linked to a microservice at the deckheads and every team [Music] for example team profile is uh yeah responsible for one vertical and one business domain and um yeah can uh can work independently of other teams and you can get less coordination between other teams is less coordination between team profile and team catalog for example and every team can decide which language it will use profile can use angular catalog view and ordering react so that is also possible with micro front ends integration approaches of micro front end how do we bundle our micro front ends when you have one microphone per page you can use hyperlink integration what i already told you and we when you have multiple microphones per page you can integrate it build it at build time you can also add server side build it in microphone tense and you can also uh you know do it at runtime so uh that means that you uh bundle it all at in the front end your application you see another view of it built-in integration you see your the blue box where you in the build deploy you see that there the built-in integration and micro front-ends are packaged as dependencies and bundled together via a package.json is uh the main thing about build time integration we use always a package.json to bundle all those microfrontends and we have a server-side integration which is responsible for composing and rendering html on the server and we have a random integration that is totally done at the front end we don't use package.json anymore at random integration i'll show you an example later building integration let's start with that for buildup integration we normally it is easier to make use of a monorail that means that you have one raipo for holy application which contains all your microphones for example and it is loaded locally totally late you can load it locally on your device and yeah it is easier to develop when you're using monoraipo with built-in integration if all everything in one place you can also also test everything because you have loaded everything locally and you see also here the picture of the package.json which is responsible for bundle bundling all those separate microfrontends to one package here you see an example very simple example of the packaging of the application i showed you already a food application consists of three microfrontends and they are here bundled together together and they are packaged like dependencies and with the name browse restaurants and order foods user profile etc you can also use uh the search bar and as a microfontes and here you you bundle it together advantages of buildup integration with the motor monorepo is that you have to uh you can easily share common functionality so you can very easily import export export import your uh your library or your component somewhere else in your on the repo there is a lot of yeah consistency is also good when you use a monorail for built-in integration because you have styling in one place you have the configuration in one place you have your conf you you have configured your uh your buttons have the same look and feel so there is a lot of colors are the same because you've loaded hold your application yeah your uh locally on your device you can uh so there's a lot of consistency in the front end uh you can easily manage changes you can make a lot of changes um in in multiple micro front ends together and testing the application is also easier because you've loaded multiplication locally the drawback of bottom integration is we have to recompile and release every single microfrondent in the monorepo in order to release a change this is a little bit strange we have we have split it up we've done our best to split up our microfrontence in independent part independent parts and that is okay of course but it is yeah time consuming to make a release that is a downside of it server-side integration for composing and rendering html from server out of multiple templates here you see a very simple example about index html which contains uh server side includes and here you see uh the page html and this will be uh yeah included in this on the server how do we do that we use here a ngo ng inc server it listens on port 88 here it is running on localhost and when you go further down you see your location there here you decide which html will be inserted into the dollar page variable so when you go ahead based on the url when you uh so when it ends with slash browse then the browse micro front end will be loaded you see another example about server-side integration you're in the middle you see a container app application server which is uh we which does requests to a micro front-end micro front-ends which is which are running on their own server and it's uh yeah it is the container app is responsible for assembling all those templates and fragments on one page it's all on the server side runtime integration here we bundle our our application in the front end you see it you can do that uh yeah i would love techniques but globally we you can you can use iframes for it there's a very old technique and the web component that's the newer one of course uh drawbacks of random integration with iframes this yeah difficult to build integrations it's all technique and yeah it's very challenging to make your page fully responsive so we step over to web components and you can also use a lot of frameworks uh for this but i uh for this example i use plain javascript to make a web component and in this context a web component is a technique to make a micro front end and a microphone that is in this context a type of architecture you see an example of i tried to show you i want to show you an example about how you create this page globally with a micro with the web component how do you make these micro front ends and you see an example this is a custom web component i created here with the tag name micro font and order food and it's also i define here a lot of properties a lot of a lot of other attributes with the name of the uh i have passing kerdi lights and i pause also assign here also the image and also i add sign here the menu items for simplicity i only work now with the name and image so i go here to the code how to implement this web component how do we create this web component first you have to define a class for it with your proper name our micro fonted order foods and we extend here our your extent here from the html element with html element you can make your own custom web component here we call a constructor to insert the euro game with the constructor you can instantiate your web component and with super commando with the super we call here uh yeah we can make use of all the logic from the html element to build a web component now we have done this we can also define here a shadow dom that is a encapsulated view to show something and we want to show an image and a a text in this simple example so first with document create elements image we instantiate a image element and we assign here a text assign here from data name that is from this your data name this comes here in and i also assign here the data image attribute the contents of it that is that it contains the image url to the image finally we append our image to the shadow dom so it can be rendered and finally we define our custom element they called also we defined our web component with the name microphone dash frontend dash order dash foods this is the same name i use here as my tag name so i can use it also this can use this name in my index.html i show you i show you now a little thing a little bit live okay here you see uh now i have showed you already a very simple index.html file and i define here my custom web component my custom yeah element that calls it they call it also and it is three properties properties and this i will pass to the uh in the script tag i define you my javascript which uh yeah which uh where i define where i construct my web component you see a little bit the same code here you see i extend from html element i use a constructor so you can instantiate this web component you call super so you can use all those logic from the html element [Music] and here i at that shade shadow dom i do a little bit more here i create here also institute here element and place some text in it oh the data names text and i painted text to the shadow dom and also this is the same i've told you here i i create a image element and i attach it here also to the dom let's see [Music] okay here you see it works it's not so uh there's no rocket science okay let's go further uh can i touch this barn yeah you see the uh global application where we're talking about you can also uh select a uh in search bar uh the prizes or a very uh the cheap ones and then expensive ones [Music] you can we can order the foods but how do we make this application globally also in code i want to show you that let's present again yeah this is a index this html file index html file is represents the application i showed you and it we or we demonstrate a runtime integration so we don't use a package.json to bundle our microphone that's together we only use here this index.html file to uh yeah to show and to render our micro front ends and to run the application how is how is this built how is this set up here at the top we did we define our bundles our micro front ends in this browser example.com bundle this this one contains the uh the microfront and browse microfrontend and the order example uh contains our uh already made microphones and order food this is this one and the profile contains the profile micro front end but uh we want to render one of these micro front ends based on you the url you you type in this is the place in this placeholder in this div we will render our micro front end we want to render i'm going to show how do we do that in script tag we define here a lookup table you can say with within a web component by route and here you see based on the url we choose the right microfrontest how does this work here we with web component bar routes we based on the url which is placed in window location path name paste in url we choose here the right micro front end for example this window location path name contains for example slash order of food so so our our microfontanes will be loaded in this uh variable and how does this uh how do we make the make this alive web component type we we document create element we instantiate instantiate our web component type or our chosen micro front end and we append our web component here to the uh to the root what is the root root is defined here that is nothing more than document kit element by d micro font and root that is defined here this is our placeholder so this is the whole story about random integration this is how we do that nowadays you have a lot of new techniques for this of course a lot of but this is uh yeah this is this this will also work advantages of random integration you can deploy and test and develop of course independently and you can build integrations between our between your microfrontends quite easily so deep linking history etc is easier which integration and proudest projects to use make here a schema the first question is uh yeah microfrontend when do we start with it when you say uh yeah when you work with two teams to one pro and on one project on application then i should choose not not choose a uh yeah microfrontends uh architecture you can go further with your frontend model it i think we have two or three themes when your application is big enough then you can uh yeah you can ask yourself are our ui domain parts strongly independent if that is the case then you can use hyperlinks when is the the when is that not the case you can ask yourself are server round tips a problem for you it is no problem of you can still use server-side integration it is an old technique but you can still use it and um yeah when you have problems with server round trips you can also decide to for uh yeah for a build time or run time integration to bundle uh yeah integration stands for how do you bundle your microphone tents a component library in code yeah component library stands for uh yeah it's a library which contains your buttons your footer your header all those components you want to reuse and also color styling you can also place it in here and you see here in time we have created three micro front ends and we decided here in this example to uh that every microphone that has his own component library is his own ui component library every microphone has his own buttons styling of buttons his own styling of the footer and the header etc etc its own styling of the input boxes so you can imagine that we have a problem can have a problem here with uh consistency and so uh one microphone tents should have to say use the same buttons but they can also differ differ from each other and there is also a problem with uh yeah duplication of code and every microphone that uses his own ui component library you can choose for this but you can also choose for a one general ui component library for for all uh micro front ends and then you have a better contact consistency of course of your uh of your photos and headers and all your stylings but uh the downside is that you were that your microfondants are then tightly uh linked to uh to each other via the ui component library when you choose for the one general component ui component library then we advise i advise you to not to use business logic or domain logic inside the ui component library a component library if you really want it uh i should build it frame network agnostic uh why um now for example this uh we see this example uh yeah when you build one microphone that a with uh with view and b with react and c with angular it's better to have and you want to use one ui component lowry it is of course easier to have a friend will framework agnostic ui component library so you can use it for all also when you copy paste it it is also a good idea to do that you can frame an agnostic that means that you can use 6 css modules you can also use stencil ok now i step over to the communication between microfront frontends uh globally you can you have two type of communications types of communication custom events with a web api you can use you can also use a shared state let's start with a simple one uh imagine that we have here underneath you see the dispatch event this is the way you can send an event to uh yeah to an uh to a listener to where to uh you can also define this dispatch event in one microfront end and the year you define here our at event listener which is listening to the same event with the name my event you can define this one in another microphone then so they can find each other with this name my event so you can communicate quite easily in this way you can also communicate with between microfondants with a shared library shared state like redux ngrx you can use uh there are a lot of state management libraries nowadays and the microphone denser can easily communicate with each other via global state so you have no local state anymore in this situation you have global state but yeah if you have the same problem as with the database the micro frontends are yeah linked to each other tightly coupled linked to each other through the global state that's the downside of it i also would draw here a service worker so you can work offline with your application a little recap about micro frontends microservices you see uh yeah and then i um you have your three micro services user order catalog and each microservices where i told you has a database its own database and you register each other they register themselves in a service registry and they can fight find each other with via this very registered registry you have also you can also use for this set up a api gateway which is responsible for cross-cutting concerns uh altercation authorization it has also responsible routing and also for communication with the front end you can also uh yeah aggregate responses via the api gateway you can use a graphql in the middle so the front end can choose my drone which then they can choose which front end data they want to uh use on the screens in front end let's step over to the development speed how do can we speed up our development uh with uh micro frontends told you a really really already a lot of about it uh in the left side you see uh that we yeah in the past we used we worked with specialized teams and the teams are grouped around around the scale line so one group is specialized in front end once the one specialized in the backend one specializing testing etc they are all work separately but nowadays it's better of course to work with cross-functional teams so you have a team is grouped around the use case a business domain and the team user team order and team catalog are also verticals okay so the vertical consists of a front end and a back end and you have all uh depend on yeah they're these these teams are cross-functional teams and they can work um autonomous in the less coordination between the teams because they can make their products on their own uh there's a little recap about how to speed up uh better customer focus when you split up everything uh via to verticals you have more direct feedback loop for a healthy customer because you can make things quite fast with the verticals cross-functional teams is a good idea yeah specialized team spare feature you can also choose your own frameworks for the front and the back end we have you choose for this for cross-functional teams you know reduce scope everything fits into memory so uh microphone tense and vertical also with the back end is easier to understand easier to easier to remember also what you're working for and yeah and every micro front end has also his own pipeline there's also a good idea you will see three pipelines for uh three micro front ends a b and c and they all have their own use their own language in the front end in this in this case and an advantage of for using verticals for fontana backhand is is that you can upgrade yeah your vertical at your own pace uh some downsides of micro front ends uh what i told you already a bit uh the payload size can be problem you can have a lot of duplication of coda with microphone tense and because you can copy paste a lot of codes and uh implementing changes can sometimes be hard because you can uh yeah when you make changes to a lot of micro frontends uh yeah you have also had to coordinate with other teams then so that is uh yeah a downside of it we make a lot of changes uh across north performance micro front ends and multiple verticals with microservices switching between teams can be a little bit problem with the different technologies they use testing can be difficult because you have to spin up your whole application to test yeah to integrate to do an integration test and sharing common functionality i've told you already about it about a ui component library about the sharing and yeah sharing that functionality can be a problem a problem in consistency for example and also duplication of code in summary we have talked about microfront ends is an architectural approach i also talked about verticals which consists of the front-end the back-end also and uh integration approaches integration techniques how do you bundle your microphone ends i've talked about you ui component library and about cross-functional teams to speed up your development are there questions it was my talk one second uh thank you alex um yeah just to to also mention that uh pusher is helping us to to broadcast this for free to everyone and alex who is our like permanent more or less permanent and every guy that he does all the production for us and he is editing the videos for us and on the pusher channel so after this you can watch all the videos that we have as js monthly and a lot of other videos on the pulsar website and we can post on the on the chat the the url and booster is a is a company that they they they have to do a lot of st they do streaming and a lot of um stuff with sockets and um yeah you should check about pusser and okay i'm gonna go back to the into the talk um peter thank you very much for uh for coming back this is the the second time we have been uh having you the first time was in the city js and last year and a very interesting topic we had it also in uh in a conference with uh luca mezzalilla that he wrote a book about it actually okay and as you know and yeah yeah so what the do we have we have one question for martin and i'm going to go through and he says let's say that we have a theme file for example and theme.js with all the colors how do we allow all the micro front ends to use one file allow one microphone to use one file yeah you can also one file when themed file oh yeah okay that's a difficult one of course but you can also uh yeah step over to build some integration with monoraipo so you were you were quite sure that you yeah you have a lot of consistency in your styling in your buttons and your colors and etc uh with theming yes this is a good one we i also use it with angular and that can be a problem of course yeah yeah that's a good advice i cannot i cannot give you uh whatever the best the best advice i cannot give you of course and every project is different from each other then can i ask i mean you spoke a bit about having a component library yeah could you not have that theme inside the component yeah yeah that can also be you can also choose for that for one ui component library of course you can do that but you have done yeah you've had pros and cons i've told you already so uh yeah when you component library but then there yeah then all the all the front ends are then coupled to that ui component library but this that should not be a very big problem always what was your struggle well when you switched from like a typical monolithic project to microphone things what did you struggle when you started learning about someone yeah what is your advice to someone that will go and have to face the same struggle yeah this is a struggle uh it's always a struggle because you have also a lot of downsides with microphones is this not all the grail line it's not a silver bullet and uh and also monoliths has also advantages everybody knows so uh everything is uh tightly coupled and you don't have to configure much and you can better easier test it because you have everything in one place and with micro front ends everything is splitted up and you have yeah you have difficulty uh yeah okay i talk now about the downside but because it's sometimes difficult for me also to uh to manage microfronters of course because you have uh yeah it's such such a lot of moving parts but on the other end it is uh you have a lot of freedom of uh what you uh how you make things and the customer uh sees uh yeah see more results at a more resolve faster results faster they see the results of your work and that's with with the monolith it is is not the case normally that it is water or you answering in the beginning when you develop the microphone tense is it a do you have a slower pace and then yeah beginning at a slower pace and then later on it is going faster and faster yeah you can build yeah you have a lot of this is right if uh i think my my experience was that i have one year uh it was quite slow and then we speed up uh extremely because we have to set up a lot of things of course but finally you're uh uh you're winning of course with the game with microphone sense um can you give us an extra microservices yeah yes and can you give us an example where you you had a monolith and um you used the microphone 10 and how how that project got better from from doing the switch those are better to go on the switch first we had you know for example for the rubber bank we have one huge application uh tightly coupled front and back end together and then we have uh yeah a lot of effort that caused that to split it up in micro front ends and micro services because you have to yeah rethink everything about it and this is of course we have to start from the beginning that did this problem right let's start from a zero and then by okay finally i they were so glad because you can uh yeah you can deploy and develop independently of other other teams and uh yeah we have beautiful results at the end about styling of course everything yeah we use uh the monorail there so the styling was not really a problem so we have a lot of consistency and it is also yeah there's the burning intervals are running in the clouds we choose uh also for that so you can choose what you want man yeah and we did with the monolith that is not the case does a does the size of a team place a role in a in a microphone 10 so would you advise like if it's like a team of three people let's say would the micro microfront end work because no so what is the size of a team that a microphone 10 will work it's the same like agile i think isn't it this agile of course and it is uh yeah right and a lot of yeah you need to yeah you need a lot of front-enders and back-enders and also testers and architects so you normally have more than six people or seven people per team [Music] as my experience 7 uh yeah and uh yeah that is so that's the size and the way you was yeah when you were building application for when you need two or three teams with of that size that is yeah i don't don't think it is uh yeah you don't have to step over yeah but but yeah okay the address there is uh the breaking point from when should i start with it because there is also a lot of you feel organized so much where you're working on your own with one team on one project you can still uh build uh yeah build another monolith but you can build a micro servers of course but you don't have to start with uh micro front ends for example you can also go further with uh from the monolith then that's what i mean yeah and i abdullah also said his experience i don't know if you wanna have a comment on it we're working on a microphone tent and we feel it it's a headache spinning up a multiple microphone tents at the the same time on our machine max memory starts running out what is your comment on this sorry is this a raspberry question so it says he says we are working on a microphone tent yeah and we feel it's a headache spinning up multiple microphone tents at the same time to our machines and his monk is apparently leaking out of memory leaking out of memory okay unbelievable have you had any experience like this yeah sometimes we have such a problem okay you have to yeah we choose for a lot of uh resources so uh we don't have to finally we do we didn't have a problem anymore because yeah i was talking i was talking about an example after have a bank and uh and the the banks yeah there are bankers a lot of money so they we we can mitigate uh it's not a really problem for our friends right yeah so thank you very much again and uh it was great to have you back and uh yeah we will see you back again in another event yeah i hope so yeah yeah of course yeah yeah in person at least yeah yeah that's better yeah yeah okay thank you thank you very much also for that yeah thanks okay so [Music] you [Music] so [Music] [Music] so [Music] so [Music] [Applause] [Music] [Applause] [Music] [Applause] [Music] [Music] [Music] [Music] hey [Music] is [Music] [Applause] me [Music] [Music] so [Music] [Music] [Applause] [Music] a [Music] [Music] so

Channel: Pusher

Views: 274

Keywords: developer language, language code, libraries, help, tips, forum, meet-up, meet up, learn code, coding education, coding hints and tips, lecture, coding lecture, learn about code, learn a developer language, amazon alexa skills, developer conference, node.js, javascript, backend

Id: yBTm26ZeVUM

Length: 65min 46sec (3946 seconds)

Published: Thu Oct 28 2021