What is the use of Micro Frontend and its benefits | Micro Frontend

hi first of all i am shooting the video after a very long time so extremely sorry for that i know i don't have any excuse to give you guys but i should record videos consistently and i'm saying sorry again but from now onwards i will try to be consistent so in today's video we will discuss about what is microfrontend and how it can help a large organization or a project with multiple teams or with multiple technology so let's start the video hi everyone this is subrat and you are watching fun of heuristic so on this channel you will get to know about the programming languages the framework and all about the algorithms so please consider subscribing and hit the bell icon if you haven't yet so first thing first what is micro frontend many of you already know what it is but some of you don't know what is microfrontend but lot of you know what is microservice so it's kind of a similar so what the microservice is you divide your service to a small micro division and you consume them in a client by using some gateway or some there are a lot of things are there so similarly in the micro front end you convert your application to a different micro front end think like your your one card will can be another micro front end application your home page can be another microfronted application even if your home page can have multiple microfronten applications which can be plugged to your base application so think like your base can be a gateway i'm just saying this to compare with the micro service but think like you are you are rendering to the user with the application which is developed by different teams independently and we just plug them and display to the user it will not hamper anything in the user experience in some case it will increase the user experience by the efficiency and a lot of things so that's why large organization are adapting to microfrontend and we should know what is microphone and how we can implement that so maybe i will make uh three four videos about my microphone and i'll try to cover all we will going to use angular obviously and angular elements to create web components and wrap them so that we can use that as a micro content in some other application it can be a normal html application it can be an angular project or can be a react project or viewpoint it doesn't matter we're going to export it as a web component so that we can use it everywhere so in today's video we will not do any code i will just try to explain what is micro content and what is the path for our three-fold videos so that it will set a context on you and whenever you will see the next video it will be easier for you here you can see that i have created a simple page which has a header a footer and some element so you can think like this is trending topic are coming this is these are the recommendation products are showing and some some other other things are displaying on a screen and this can be independent as you know previously by the normal application way which is a single page single bundle application you will write going to write all you will convert these two different component maybe you will have separate component inside each component but you will wrap them in a component and plug plug that to a parent component and that pattern component can be plugged to the your main component which can which will be displayed in your browser so this is what we are doing in our normal single page single bundle application so in the case of microfondant what is the scenario which we have this header putter and the whole body as our base app the micro content comes into the picture is all this component now we'll try to convert all these to one microfrontend project means one different project these two one different project this to one different these two one different this so you can do according how's your requirement is and now you'll ask me subrat why we're going to do it we can do it inside a project we can legi load them and do a lot of things for efficiency and it will be good and you are correct so if you are a single team developing whole project then you can do lot of efficiency in a single bundle application but think like a large project and you have divided that to multiple teams like suppose things like amazon or think like youtube itself so they have converted into multiple teams your recommendation is separate team your card is separating your notification is separating so coordinating between different teams and releasing the application as requirement time will going to be harder that's why the micro service concept came so now all the teams are individual and now they can deploy independently with their feature so if someone is consuming them they'll have the latest updated feature but that didn't happen in the case of front-end so front-end was developed as a single bundle applications if so if you want to change something you need to download the whole code edit the code deploy it so who will be the core team they need to validate that okay everything is working fine so what is happening in some organization is due to this huge coupling of huge dependency of different teams some applications are releasing in three months a once so their release cycle is pretty large so you if you want to have a sim small feature you really need to go with a lot of validations and lot of things so which can be avoided in micro content so i have my application i know what to do i can deploy it i can release my pre change to a may be stage environment and the core team just need to check the front end that is it breaking their thing or not they need not need to go to the whole core i'm just saying ideal condition but they can check the front end that they can test do some tests run some tests and after that we can go live independently instead of that all the other projects are not going live so that's the main benefit of microfrontend and other benefits are now each and every team can use different technology like my team is loving angular will develop with angular some other team loves react some other teams love view so everyone can develop their own micro content in in their desirable technologies and that can be plugged to the base app to display to the user and there will be no difference to the user that how the site is behaving no too little difference to the users of how the sites is behaving but that's a possible scenario that you can use multiple technologies and you can plug together to have a great product so what you will get in this series means in the series of three four videos so we're going to use angular the base app also to develop microfrontend and to make the web component we're going to use angular element and in further onwards i will show you how you can load them obviously and how you can lazy load them on demand suppose you you want to load a certain part on certain time then you can how you can load that the whole bundle lazily means whole sorry whole microfront end lately and how you can deal with a different user will see different microfrontend so do some backend and will try to fetch i'll just give you an idea that how it can be possible from the back end side to fetch different urls of different microfrontend from different cdns so talking about cdn now your microphone 10 can be served through a cdn so that it will be cashable through the browser and it will be lot faster in your users machine so please hit the like button and please don't forget to subscribe so that you will not miss the microphone series and which will going to be loaded with information loaded with real-time use after this you can develop a pretty good application and which will going to help you a lot in your professional carrier or if you want to do a large project also microfinance can be used in between your team if you guys are developing small projects but you love different technologies so that's it for today guys today we discuss about what is microcontent and why we should use them and how the companies are now required to use micro front end so this will going to be front end for the future and the next video will try to do a micro content in angular and using angular elements till that be happy keep coding so this is suprath misra signing off

Channel: Fun Of Heuristic

Views: 12,258

Keywords: Angular, programming

Id: Ud5Oor81-bs

Length: 9min 12sec (552 seconds)

Published: Mon May 30 2022