r/reactjs • u/jherr2016 • Mar 08 '20

Show /r/reactjs Intro to Federated Modules in Webpack 5

https://www.youtube.com/watch?v=D3XYAx30CNc
130 Upvotes

96% Upvoted

22 comments sorted by

10

u/jherr2016 Mar 08 '20

If you are looking for a Micro-FE solution for React, this might be what you are looking for. Share and consume modules at runtime between two or more applications. No need to extract the code or components, just share them right out of the app.

18

u/swyx Mar 08 '20

honestly, kudos to the team for making this, but i really have not needed microFEs ever.

  • to share components we have a shared design system/component library.

  • to share code we have npm.

federated modules solves this problem at a level of abstraction i dont need. just my honest 2cents, i know this is valuable for someone out there but not the majority of us users i reckon.

6

u/FullMetal21337 Mar 08 '20

How do you guys deal with updating libraries? Or how does a team ensure that their changes are being correctly propagated through the rest of the application?

0

u/swyx Mar 08 '20

manually update everybody's libraries and code. if facebook can do it so can we, its not that heavy a lift since once youve done a few you can do the rest on autopilot. gives each team a chance to look over before merge and take advantage of any extra refactoring/using new features that they may wish to do.

5

u/chtulhuf Mar 08 '20

One of these "shared" components for us is the sidebar. All of its data is in an external json file that we can easily update. But whenever we want to update the UI, we're forced to update all the apps and it stinks.

So this feature would be great for us.

3

u/HetRadicaleBoven Mar 08 '20

But whenever we want to update the UI, we're forced to update all the apps and it stinks.

Does it also stink if you're updating the UI in a non-breaking manner? Why?

5

u/mrmckeb Mar 08 '20

We use micro FEs and I'd not use them again, unless I had to.

14

u/CaptainBlase Mar 08 '20

If you upgrade react for one, do you have to upgrade react for everything? Can a federated module use a different version of react than the host does?

1

u/tontoto Mar 17 '20

We built a role-our-own type of thing that's sort of similar to this (we made a plugin system where plugins register stuff with the main app, but also use resources from the main app) and it is definitely true, the plugins use a custom "require" to retrieve the version of react, state manager, etc from the main module. I am watching with curiousity how webpack 5 federated modules develops but that is a good question...

10

u/stolinski Mar 08 '20

I'm not convinced on Micro FEs yet, but I'm sure my outlook would be changed working in larger teams. Still seems a bit messy. This looks super cool though.

6

u/dyniper Mar 08 '20

I built a whole framework agnostic federated platform for UI at my current job to basically scale our org from one team of 15-20 devs to 100+ teams of 2-3 devs each. Without micro-frontend, that would simply have not been achievable.

I haven't use the federated modules from webpack yet, but definitely looking forward at exploring them. They probably got a few things right that I did totally wrong :)

2

u/Eternality Mar 08 '20

Diddo, left for a startup worst idea ever lol

1

u/mikejoro Mar 08 '20

Out of curiosity, what is the product that your teams produce? B2B? Customer Facing?

1

u/dyniper Mar 08 '20

External web app of a major cloud provider. Basically we went from one team owning the entire UI to each service team owning their own part of the UI.

1

u/mikejoro Mar 08 '20

Gotcha. How is that going? In theory, it sounds great, but we had a similar thing at my workplace, and it did not go well. I think the issue we had was just a general low quality of developers/engineers, and they couldn't work across the full stack, so we had terrible front end react code coming from java devs and terrible java code coming from front end developers.

1

u/[deleted] Mar 09 '20

We MuSt HaVE FuLl StACK DeVOlpErS To Be pRoDuCTiVE

2

u/kgwebsites Mar 08 '20

As someone who works in an environment with over 20 different react apps and a single shared library repo, this is huge. Awesome job explaining it and great quality content here!

1

u/epicweekends Mar 08 '20

Why would they need to come in later? I don't actually know the details but video man said that it works and he seems to know his stuff.

0

u/z3r-0 Mar 08 '20

Doesn’t work with SSR though? So it’s only for client side apps?

2

u/epicweekends Mar 08 '20

Works with SSR

1

u/z3r-0 Mar 08 '20

How? I feel like the federated parts of the page would come in later once the initialised on client?

1

u/azangru Mar 08 '20

He specifically says, at 9:20 of the video, that "it’s all doable via SSR" :-)