An Opinionated Introduction to Micro-frontends

AN OPINIONATED INTRODUCTION TO MICRO-FRONTENDS

Preface

1. Goal
2. About Me
3. Audience
4. Text Conventions

Prerequisites

Companion Code

Chapter 1 - Definitions and Architecture Overview

1. Overview of Possible Architecture Solutions
2. Summary

Chapter 2 - Sample Project Architecture

1. The Container App (container-app)
2. Microfrontend1 (Built with React)
3. Microfrontend2 (Built with Svelte)
4. Microfrontend3 (Built with Vue)
5. Integration Strategy
6. Conclusion

Chapter 3 - Microfrontend1 Project (React)

1. Directory Structure
2. Create Project Wizard
3. Chapter 3 Recap

Chapter 4 - Microfrontend2 Project (Svelte)

1. Create Project Wizard
2. Chapter 4 Recap

Chapter 5 - Microfrontend3 Project (Vue)

1. Create Project Wizard
2. Chapter 5 Recap

Chapter 6 - Setting Up The Container App

1. Create Project Wizard
2. Chapter 6 Recap

Chapter 7 - Types and Utils

1. MicroFrontend Interface
2. MicroFrontendLoader Utility
3. Container-app Configuration
4. App.vue changes
5. Chapter 7 Recap

Chapter 8 - Getting the Microfrontends Ready

1. Microfrontend1 (React app)
2. Microfrontend2 (Svelte app)
3. Microfrontend3 (Vue app)
4. Adding a global package.json
5. Chapter 8 Recap

Chapter 9 - CSS Styles

1. Root Styles Project
2. Chapter 9 Recap

Chapter 10 - Structuring the Layout

1. Structuring the Initial Container-App Layout
2. Chapter 10 Recap

Chapter 11 - Postbox - intermodule communication

1. Create Project Wizard
2. Test it
3. Chapter 11 Recap

Chapter 12 - Monorepo Orchestration with NX

1. What NX brings to this project
2. Installing NX
3. Configuring NX — nx.json
4. Adding project.json to each package
5. Understanding the dependency graph
6. Updating the root package.json
7. Running the full development stack
8. How caching works in practice
9. .gitignore additions
10. Chapter Recap

Chapter 13 - Error Handling & Resilience

1. Common failure scenarios
2. Updating useLoadScript
3. Updating MicroFrontendLoader
4. Error state in the container-app UI
5. React error boundaries in Microfrontend1
6. Publishing errors via postbox
7. Chapter 13 Recap

Chapter 14 - Testing

1. Setting up Vitest in postbox
2. Unit testing postbox
3. Unit testing MicroFrontendLoader
4. Component testing the container-app
5. Running all tests from the root with NX
6. Chapter 14 Recap
7. Chapter 14 Recap

Chapter 15 - Authentication & Shared State Across Micro-frontends

1. Extending the MicroFrontend interface
2. Passing context from the container
3. Receiving context in each micro-frontend
4. Broadcasting auth changes via postbox
5. Feature flags and locale
6. Chapter 15 Recap
7. Chapter 15 Recap

Chapter 16 - Production Build & Deployment

1. Environment-based configuration
2. Enabling production optimisations
3. Building for production with NX
4. Serving the output
5. CI with NX affected (GitHub Actions)
6. Chapter 16 Recap
7. Chapter 16 Recap

Chapter 17 - Monitoring, Observability & Performance Optimization

1. Performance budgets
2. Instrumenting load time metrics
3. Bundle size tracking
4. Error tracking with context
5. Runtime performance monitoring
6. Measuring Core Web Vitals
7. User analytics across micro-frontends
8. Debugging in production with feature flags
9. Chapter 17 Recap

Chapter 18 - Migration Strategies & Organizational Best Practices

1. The Strangler Fig pattern
2. Choosing migration candidates
3. Handling shared dependencies during migration
4. Team ownership models
5. Versioning and contracts
6. Governance: Balancing autonomy and consistency
7. Communication and documentation
8. Chapter 18 Recap

Conclusion

1. What we built
2. Key principles
3. When to use micro-frontends
4. What’s next
5. Closing thoughts