Micro Frontends using Single SPA

[@atimney]

It's like the movie intro guy does front end stuff on the side! Helpful video sir, thank you

[@BettyCortezBettysBabies]

This is a great approach to explaining the content. I have a PoC and now I'm working on architecting the data communication between front-ends. My senior architect is against using the window object. So some other devs on the team want to strap up a (huge and obtrusive) redux state store! Yikes! There are too many options for data communication which often leads to people over-engineering their data. Ideas? UGH, the struggle is real!

[@jherr]

I agree that the window object isn't ideal, but there aren't many options. Even in apps using redux, if we do server side rendering we end up storing the redux state on a window global for rehydrating the store on the client. I just looked at the page source on three sites; Netflix, Google, and Walmart and they are all putting state onto window. (Some more than they should probably, honestly.) So it's not crazy, per se. We just don't have a lot of good options. My advice would be to set up some constraints first and then see which options fall within those constraints. A constraint might be that a micro-fe isn't required to load any additional libraries itself to be a micro-fe component. Another constraint could be that the solution must only add one key on global and it must be as small as possible. Or that it work via posting custom events through window, but not storing any data on window. For negotiating out some solutions you might try a three phase approach. First, a brainstorming session to gather all the ideas where no idea is ruled out and there is no judgment. Second, a constraints session where you agree on the criteria to judge the ideas. And third a session where you use the constraint criteria to narrow down the candidate pool and then decide on it. That way everyone feels involved in the process. Hope this helps. Thanks for subscribing. Let me know if there is any additional content you'd like to see around Micro-FEs or anything else.

[@jornejongsma]

@@jherr Ah, okay, I think I'm learning a lot, so one important reason to use the window object is to bring over state from ssr to the client, that is something to consider. I was thinking to make custom components that are all importing the same app module that stores the app state, making use of a pubsub system, but that will probably not hydrate seamlessly.

[@ASoftwareEngineer]

i am starting to look into micro front-end as well and I would say that we shouldn't break the app this way. docs recommends to have all components that frequently talk together into its own app. if components frequently talk to one another, it means it is coupled too much and may need to merge together. is the whole idea of this app is to prove a point that microfront-end works?

[@nirmesh44]

just subscribed. blown away by this first video only.

[@almightykod]

I thought about the issue where everything needs to be bound to window events, although window events are perfectly fine, I thought it might get a bit too much when you have several applications. And my conclusion was Websockets. What if you have another server (maybe Node JS and sockets Io) that has the sole purpose of receiving and emitting messages to all the different clients. I build a quick POC, and it seemed to work fairly well. Thoughts?

[@jherr]

Build a POC and link it in here. I can do another video on it! ;)

[@babatundeadenowo7568]

Hey @Kod, please share a link to this POC, I'm actually in the middle of implementing something like that but don't know how to go 'bout it. Thanks.

[@fbellod86]

Hi Jack, can i build a image of container and 1 parcel in the same network whit docker in docker-compose?

[@saikumarganganapalli5957]

How to capture the operational metrics of micro front ends? Since the navigation is soft(unlike the traditional Webvitals will only capture only on first route (hard navigation)) how to capture the metrics of tti, fid, cls and how to infer these terms in a mfe setup? Also what are the meaning ful metrics to capture?

[@jherr]

Those are fantastic questions, and I don't know if anyone has any industry standard answers for that yet. As we move into composable applications and composable commerce it will be interesting to see how performance monitor tools and company evolve.

[@AlejandroInforma]

Adios mis amigos ! :D hails From chile. Really nice explanantion

[@Ones_Complement]

How does this compare to monorepo setups like nrwl/nx? Do they address different use cases or just different tools for accomplishing the same thing?

[@jherr]

Monorepos support build time dependencies, which should be your go-to in 99% of cases. SystemJS and Module Federation support runtime dependencies, which is a nice tool to have in the very specific set of cases when you need it.

[@Ones_Complement]

@@jherr So if you were aiming for a micro frontend architecture with independent deployments but housed in a single repo, you would need this coupled with something like NX?

[@jherr]

@@Ones_Complement Yeah, if you want it in a monorepo then you would use NX or Turborepo, something like that.

[@alihasnain7952]

Really Helpful Videos. I have a request can we manage state in purely angular MFEs if yes then how? and how to create shareable components and authentication across the MFEs?

[@jherr]

You should look into some of Manfred Steyer's work on Angular MFEs using Module Federation.

[@YogeshSingh-md8vl]

How to use angular generated application(ng new app name) with single Spa application(crete-single-spa)? Like i dont want to use angular application generated by create-single-spa. Also angular application generated by single-Spa is not running separately so how to fix this?

[@cantand2817]

I see a lot of boilerplate code there. Isn't there a straight forward way for micro-frontend architecture with angular ? hmm

[@yingwang804]

thanks for the video, I checked your github code and wondering that product_description.js and product_image.js using singlespahtml and loaded in the index.html directly, is there a way to lazy loading js files for the singlespahtml application and using import map and systemJs?

[@jherr]

Should be fine. Anything SystemJS supports should work.

[@ProgrammingWithPax]

Fantastic Jack, thank you very much for this explanation, it was super helpful. I was wondering what your thoughts are on how to handle SSR with micro-FEs? To my understanding, you cannot simply use Nuxt, Angular Universal or Next, like you regularly would. What happens when SEO is an important factor for the project?

[@jherr]

Really depends on if your MFE is part of the SEO content on the page, or a bolt-on later, perhaps as the user scrolls the page, or triggers some new experience. If it's part of the SEO content, then ATM your choices are fairly limited. There is the Isomorphic Layout Composer (github.com/namecheap/ilc). There is Module Federation in Webpack 5, which is still currently in beta, but rapidly approaching release, and there is an SSR example using that. And there is Edge Side Includes, which can bring in content from other sources, but look to the bots like SSR. SSR is super challenging in this space. We shouldn't fool ourselves. If you are dealing with SSR you are probably also dealing with caching and a CDN, so creating symmetric behavior between what's rendered on the server, and then what's reconciled on the client is challenging for MFEs. Another possible option is to take crawlers at their word and use CSR. Google has said for a while they support crawling client JS rendered sites. And another alternative is a site like Botify that SSR "renders" your CSR page for crawlers while your customers see the CSR site. And Google is fine with that starting around late 2018.

[@ProgrammingWithPax]

@@jherr Makes perfect sense. Thank you so much for your detailed response Jack. Keep pumping out these fantastic videos, I have been learning a ton from you!

[@jherr]

@@ProgrammingWithPax I like your channel. We should collaborate!

[@bhushanbadhe7773]

Could you please help me how to integrate unit testing in react with single spa microfrontend?

[@jherr]

TBH, that sounds like a good question for the Single SPA community.

[@bhushanbadhe7773]

@@jherr I got placed from college placement as a react js developer. I got a task to test some components via unit testing with the help of jest and RTL. I'm still confused how to implement testing. When I got this task I told my manager, hey sandy I'm a developer then why testing should be done by developer. Then he told me hey bhushan it's developer's task to test units of application

[@jherr]

@@bhushanbadhe7773 Cool. If it were me I would use jest and unit test each component individually. If your components are written in React then google for a resource on how to unit test React components and follow that.

[@brawnyvenky9584]

thanks for the great vedio sir.

[@akanchasingh7794]

Hey Jack, I was able to develop microfrontend using angular seeing your video... but when i proceed to deploy it over cloud I am getting cors issues when container app is trying to access other application. Can you please help me on how to resolve cors issue in angular apps

[@jherr]

Are you serving the Javascript files off a web server? You should serve them from an object store, like Amazon's S3 service.

[@akanchasingh7794]

@@jherr i am deploying my container on ibm cloud using a docker file.. in which i am using nginx…

[@jherr]

@@akanchasingh7794 That's a server. You should serve static assets, like Javascript, from an object store, like S3. It's more efficient and you don't run into issues like these.

[@akanchasingh7794]

@@jherr ok.. will give it a shot.. thank you so much for helping out

[@IshantSharma29]

Hi Jack, Nice video. I am researching on the MF architecture for our product (an analytics platform) and I could find Single SPA with import maps approach as one of the best example till now. I saw Module Federation but looks like it's still in Beta phase so I did not spend much time on it. What are the various frameworks/approaches you would recommend that we should explore before finalizing ? Which one has better community support and is more friendly for Production applications in the Industry today. Would be great if you can share from your experience. Thanks a lot !

[@jherr]

Of what is released today; Single SPA and OpenComponents are the two marquee choices. Module Federation is still in beta, but its API has been stable since beta 18 and it's now at beta 25. To me it depends on what you want in terms of cross platform use. If you're expecting to mix React with Vue or VanillaJS, or Svelte, and have an experience that uses two or more view frameworks, then it's Single SPA or OpenComponents. If you don't need that then I'd seriously look at seeing if you can manage the risk of being on a Webpack beta build.

[@IshantSharma29]

@@jherr I think we would not mix in the near future. Most folks in Team have Angular skillset and we would stick to it. But it would be good to have that flexibility for a future team to use a different framework. We are thinking towards MFe right now as there are four teams working on the platform. As I am doing more research, it appears to me that there is lot of work upfront to setup this architecture. We don't have that many folks working on UI. It's just couple of folks in each team. Do you think that for a team like ours, MF would create more problems ? If we are using just Angular, why webpack and not single spa ? Thanks a lot for your help.

[@jherr]

@@IshantSharma29 I'd really need to know more about the context to give you a clear answer on all the options; number of developers, number of apps, amount of components shared between apps today, etc. That being said, if you do have more than one app then you are probably sharing the header. And it might be worth thinking about if doing a POC of sharing the header using Module Federation just to get a feel for the technology in production to see how it works. Also, it's worth noting that Single SPA recommends Module Federation as one of the two ways of getting code onto the page (SystemJS and Module Federation).

[@shrinidhiurala9056]

What's window.pdp? also, what are other ways to communicate between apps? Thank you

[@jherr]

It's just a very simple store (github.com/jherr/single-spa-pdp/blob/master/store.js) that emits events when the values are changed. You could change that out for basic observables (e.g. RxJS) or even using something like Redux if you wanted to.

[@shrinidhiurala9056]

@@jherr store.js not getting imported in latest single-spa version in root-config/ idex.ejs file

[@jherr]

@@shrinidhiurala9056 I'm probably not going to be able look at this for a while. You should check out the Single SPA support forums for help on this.

[@Siddharthpandey27]

Is It possible that Host(Root Config) can be on React JS and can contain it's own root and than on one route we have MicroFE's?

[@jherr]

Yes. I believe that can work.

[@Siddharthpandey27]

@@jherr Can you guide a me little bit how to approach on that I would really appreciate that

[@jherr]

@@Siddharthpandey27 My advice would be to go through the Single SPA example applications. And once you've exhausted that then go through the Single SPA support channels.

[@danthedoozy9472]

Very well done.

[@jimydolores7994]

¿Cómo implementar esto en producción, supongamos que tiene un proyecto raíz donde registra las aplicaciones y otros 2 en angular y reacciona?

[@jherr]

You need to have the host running SystemJS and SingleSPA, then package your Angular and React Micro-FEs as "parcels" so they can be loaded onto the host page and run. The code linked into the description (github.com/jherr/single-spa-pdp) has Vue and React, but you should be able to follow the example here github.com/single-spa/single-spa-angular to get your Angular Single SPA parcels going. I hope that helps and that Google Translate did a decent job translating your question.

[@jimydolores7994]

@@jherr Thanks a lot 😁

[@LokenathSinghLokiTech]

Hi Jack, thanks for the nice video ! How do I separate out the different MF applications to different GIT repo ? Basically I want a separate repo for the Shell and separate repo for each MF's Some pointers would be of great help :)

[@jherr]

Sure. The code for the project in github is not in a monorepo currently. It's only in the same project for conveniences sake. But you could extract out each of the different directories (and files) into their own repos. But you'd still have to get them all to be running at the same time in order to get it to work. To do that in any realistic sense you might want to consider dockerizing them and running docker compose to bring them all up at the same time.

[@LokenathSinghLokiTech]

@@jherr Thanks a lot for your reply. 😊

[@jherr]

@@LokenathSinghLokiTech No worries at all. And good luck with the SingleSPA rollout. Have you checked out my recent videos on Module Federation? If you are doing the Micro-FE thing it's certainly worth a look. Particularly if you are in it for the run-time loading as opposed to the cross-framework aspect. (It can still do cross-framework, but the work on that falls on you.)

[@LokenathSinghLokiTech]

@@jherr I will definitely have a look. Currently I am working on converting our existing Monolithic app to MFs, so trying to explore various ways which can suit the best.

[@jherr]

@@LokenathSinghLokiTech Monolith busting... Yeah, you should have a look at this - kzbin.info/www/bejne/jWG1k6V3j9mdbas

[@natture]

hi do know how to configure thee project to typescript

[@jherr]

You can use typescript with create react app to build the micro-FEs. For the host page you could use babel or tsc to transpile the TS into Javascript on the page.

[@WorstDeveloper]

Just thinking of having to maintain this makes me want to puke. Also the added bloat and loss of performance from all frameworks is not very user friendly.

[@jherr]

There are definitely performance impacts here we the additional code loaded on the page. Micro-FEs implemented using different frameworks is something that I've only seen large companies do with large distributed workforces do. Or companies that are looking to migrate from one framework to another piecemeal.

[@WorstDeveloper]

@@jherr maybe frameworks like Svelte and SolidJS can make it a bit more bearable. They are smaller in size and has a faster bootstrapping process. We'll see. I'm not fully sold on the fact that the frontend needs micro frameworks though. A lot of the problems that microservices solved in the backend don't exist in the frontend. Such as scalability, redundancy, and so on.

[@jherr]

@@WorstDeveloper If we have frameworks that support truly disconnected code loading. Not just bundle splitting of code that is in the same repo, or mono-repo, but full async loading of code that isn't in the project, then I think you are right that we don't need a framework specifically to do that. Unfortunately that type of loading is kludgey with the tools we have released today. But there is Webpack 5 and Module Federation, which supports that true disconnection. And if you use that, and both the host and the MFE are using the same view framework, then yeah, you don't need an MFE framework.

[@Alessandro_Russo]

I receive this error when i try to execute run-components: URIError: Failed to decode param '/%PUBLIC_URL%/favicon.ico'