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

  1. Identify the components you need to edit
  2. Enter the component library project
  3. Make some changes
  4. Ensure tests are passing/write new tests
  5. Run CI/CD
  6. Publish the package
  7. Go back to your project
  8. Update the package
  9. 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

Microfrontends with WebPack and module federation

By Michele Riva

Microfrontends with WebPack and module federation

  • 325