Front-End Micro Apps

Is your frontend monolith slowing down development? Discover how micro apps let teams ship features independently, using Webpack 5's Module Federation.

#1about 4 minutes

Understanding the evolution of monolithic front-end applications

As products like Spotify grow, their monolithic codebases become increasingly complex, slowing down developer onboarding and feature delivery.

#2about 2 minutes

Tracing the architectural shift to micro frontends

The industry has moved from large monoliths to separating front-end and back-end, then to microservices, and now to micro frontends to align with team structures.

#3about 5 minutes

Using Webpack 5 Module Federation for micro frontends

Webpack 5's Module Federation provides a native, widely adopted solution for creating and consuming parts of separate applications at runtime.

#4about 3 minutes

Live demo of a shell app consuming a micro app

A shell application dynamically imports and renders a component from a separate micro app, which can be running locally or deployed to a remote URL.

#5about 4 minutes

Defining micro apps and exploring key use cases

A micro app is a focused application that combines microservice and micro frontend principles, with use cases like authentication, design systems, and component libraries.

#6about 5 minutes

Organizing teams and migrating applications with micro apps

Micro apps enable autonomous teams with separate repositories and deployments, simplifying onboarding and allowing for gradual, piece-by-piece application migrations.

#7about 2 minutes

Managing shared dependencies and versioning across teams

A central platform team should define and enforce exact versions for core dependencies like React to ensure consistency and prevent runtime conflicts.

#8about 3 minutes

Avoiding common pitfalls like CORS and security risks

Address common issues by configuring CORS, never using third-party micro apps due to security risks, and implementing error boundaries to isolate failures.

#9about 2 minutes

Coordinating global UI providers and communication patterns

Prevent duplicate UI elements like notifications by having micro apps communicate with a single global provider in the shell application.

#10about 1 minute

Deciding when to use micro apps versus components

Use micro apps for transactional features or functionality that requires separate delivery cadences, but prefer standard components for simpler, faster development.

#11about 2 minutes

Key takeaways for successfully adopting micro frontends

Successful adoption relies on using modern tools like Webpack 5, ensuring an organizational fit, and establishing strong coordination for shared dependencies.

From learning to earning

Jobs that call for the skills explored in this talk.