Microfrontends with WebPack and module federation
Michele Riva
Michele Riva
Senior Software Architect @NearForm
Google Developer Expert
Microsoft MVP
MicheleRivaCode
Real-World Next.js
Build scalable, high performances and modern web applications using Next.js, the React framework for production
MicheleRivaCode
MicheleRivaCode
There's no standard for microfrontends
MicheleRivaCode
Microfrontends
Multiple separate builds should form a single application. These separate builds should not have dependencies between each other, so they can be developed and deployed individually.
WebPack documentation
MicheleRivaCode
Module Federation
Multiple separate builds should form a single application. These separate builds should not have dependencies between each other, so they can be developed and deployed individually.
Module Federation
in a nutshell
MicheleRivaCode
MicheleRivaCode
My homapage about doggos!
My article
Homepage
Article page
MicheleRivaCode
My homapage about doggos!
My article
Homepage
Article page
MicheleRivaCode
My homapage about doggos!
My article
New version
New version
Homepage
Article page
What's the problem with
that approach?
MicheleRivaCode
It's slow and laborius
MicheleRivaCode
Minimum steps required to make a change
- Identify the components you need to edit
- Enter the component library project
- Make some changes
- Ensure tests are passing/write new tests
- Run CI/CD
- Publish the package
- Go back to your project
- Update the package
- Update tests (if needed)
MicheleRivaCode
What if you don't have the ownership of the component library?
MicheleRivaCode
What if multiple apps depends on our components?
MicheleRivaCode
Here's where module federation and microfrontends can really help
MicheleRivaCode
MicheleRivaCode
Let's try a live demo
What about server-side rendering?
MicheleRivaCode
MicheleRivaCode
What if the remote server goes down?
MicheleRivaCode
MicheleRivaCode
Where are the types?
MicheleRivaCode
MicheleRivaCode
You can expose almost everything via module federation, including types
MicheleRivaCode
MicheleRivaCode
@MicheleRiva
@MicheleRivaCode
/in/MicheleRiva95
www.micheleriva.dev
