Micro-Frontends: What, why and how

it's another beautiful day in Portland what better time to do a micro front-end video than right now in this one we're going to do a high-level overview of micro front ends we're not gonna dig down into the bits and bytes which is what we normally do in the you can check out that playlist it's got a whole bunch of videos about how to do the bits and the bytes of microphone ends in this one we're just gonna talk about what microphone ends are why they're interesting what some potential disadvantages are and then finally the process for how to take an existing website and turn it into a micro front end based website so what is a micro front end well a micro front end is the just code for a portion of a webpage it's not the whole page is just a portion of the webpage and in that model the web page hosting that component we call the host page there's also a micro front end framework that sits between the host page and the micro front ends that manages loading and unloading those microphone ends and any other contractual work to get the microphone ends to work so there's three key pieces to the micro front end architecture and that would be the microphone ends the microphone end framework and the host pages so let's take a look at this amazon.com web page and see if there's any user interface elements that we can identify as micro or front-end potential targets and I'm seeing these little panels and I think those would be really good for this they're pretty much self-contained the user interface isn't littered all over the page and it seems like they're set up already to do that kind of microphone work so I believe those would be good micro front end targets also the header and the footer of most conventional pages is a great microphone end because that's something you're gonna want to share between pages so let's talk about some advantages when it comes to microphone ads let's just get the good stuff out of the way before we talk about the bad stuff the first big advantage is just team scalability you're gonna have more people able to work on a given webpage because those micro friends are versioned in independently deployed so each one of those be its own project and then the Micra friend would go off onto s3 and then be loaded by the page so that microphone end team can work independently of the host page team and that can be deployed even if the host page isn't deploying it which it makes it how which makes a micro friend and different from a library so the next big advantage kind of builds on that it allows the host page team to be more of a platform team focused on long-range deliverables contracts how to manage the performance to the site how analytics can be routed that kind of stuff and then your MFE teams are based on tactical delivery that's more customer centric they're you know interested in like how do I go and tweak this interface so it's more you know it's getting me convert better and it's gonna look better and say engage the customer better and that's great so now both of those teams can work 100% on their particular area right your host page team is gonna be able to 100% concentrate on making a great host page and your MFE tactical teams are going to be 100% engaged around what's going to make a better conversion what's going to get more customer engagement as opposed to having one page that it kind of gets bounced back and forth between okay with this sprint we're gonna do more infrastructural work in this part we're going to do more customer focused work and you have team members that are kind of bouncing back and forth skill set wise in both those areas so that's really good another key element is reuse right we're gonna be able to go and take those little Amazon panels and reuse them wherever we want to as long as those host pages conform to that MFE standard which is awesome imagine if you've got a really cool product carousel on the homepage and you want to be able to reuse it on a prime detail page or a search page in this model that's that's easy to do so as long as everybody's conforming to that MFE standard and the fourth key benefit is technology agnosticism meaning that you can have a host page it's written in view or react or spelt or whatever as long as it maintains that MFE standard and those contracts then any MFE is gonna be able to work on that page which is phenomenal and also the EMA fees themselves right if your carousel isn't particularly complex and you can get away with just doing vanilla JavaScript and make for a much smaller JavaScript payload to go to the customer go do it and that's great and that's fantastic and it opens up a lot of innovation doors for your engineers all right now this all sounds really great what are some potential downsides why would you not want to do this well the primary one is around complexity it's just a more complex system right in a traditional model you're gonna have a project and it's gonna get built into a docker eyes container probably and then get ete tested to make sure that it passes everything and then get deployed and that's that's great you know you can go home you can flip burgers and you know a man sites working as long as the servers are up it's all good in this model though you're gonna have a host page and it's going to be dynamically loading stuff from other teams and those teams may mess up and may take down the page javascript is a single threaded execution model it's not particularly sandbox it's not really sandbox at all so it's very likely that you're gonna get runtime issues that you didn't expect where the team is expecting a different runtime environment than what they got something different message format some one they got and you're gonna run to issues and when your first piece you're you're gonna be pulling out your hair like why did we do this to ourselves and that's why I'm you're gonna be like well let's go back and look at those advantages and just remind ourselves it like this is allowing more people to be able to engage in building the site without stepping on each other's toes and the reuse and all the rest of it another problem is that there is currently no standards in this space so there are a bunch of micro front-end frameworks out there already there's open components there's single spa there's Taylor there's one from eBay that does iframe based components basically any big corporation will go and build one of these for themselves me like that's a great thing to open-source let's go open-source that and they'll go off and open-source it and if it works for you that's great if not then mmm but there's no standard there's no winner there's no current like redux in the MFE space and honestly I don't think there's probably ever going to be because site to site there's gonna be such variability and their requirements that I don't think that that's realistic okay so let's talk about the process so project management wise how are you gonna go get from where you're at today with a website to a micro front-end based website well the first thing to do is go and do what we did with that amazon.com page and go and look for MFE targets right one of the pieces of functionality we want to turn into em FES and then be able to reuse all over the site and it should be a diverse set that shows different interaction models maybe different data requirements some things loaded on the client and need to be loading the client so many things can be loaded on the server you know just to get a diversity there so that as you're going into the next phase which is developing the set of requirements you're going to know everything that you're gonna want from an MFE framework and that you know so you got to figure out when do you want to go and render these things one of their data requirements do they need to talk to each other didn't you need to talk to the host page they need to hug talk in the header didn't you talk what do they need to do once you get that all that sorted out once you get those requirements captured you can go on to the next phase which would be the evaluation of the tools that exist on ready so you look at those OSS tools that are out there already I've got a handy playlist with a bunch of um and then also evaluate if you none of those fit then start designing your DIY framer but the great thing is now you've got those requirements captures so you know what you need from the framework that you're going to go build I hope this video is valuable to you in terms of presenting kind of a high level based pros and cons of the microfi architecture and if it was then please like it if you have any more questions or comments feel free to leave those down below I'm always a big fan of my subscribers and if you want to keep up to date with all things micro Rafi and just advanced fe in general feel free to ring that Bell and get notifications whenever I upload a new video and of course just be good to each other

Channel: Jack Herrington

Views: 50,904

Keywords: Micro-FE, Micro Frontend, Web Development, Web Architecture, why micro frontend, what is micro frontend react, How to use micro frontends, micro-frontend architecture, micro-frontends, react micro frontend example, react micro frontend tutorial, react micro frontend framework, react micro frontend

Id: w58aZjACETQ

Length: 9min 39sec (579 seconds)

Published: Tue Feb 25 2020