Micro Frontends in Action Video Edition

Micro Frontends in Action teaches you to apply the microservices approach to the frontend. You’ll start with the core micro frontend design ideas. Then, you'll build an e-commerce application, working through practical issues like server-side and client-side composition, routing, and maintaining a consistent look and feel. Finally, you'll explore team workflow patterns that maximize the benefit of developing application components independently.

what's inside

Create a unified frontend from independent applications
Combine javascript code from multiple frameworks
Browser and server-side composition and routing
Implement effective dev teams and project workflow

about the audience

For web developers, software architects, and team leaders.
about the author

Michael Geers is a software developer specializing in building user interfaces.
An excellent starting point to understand how to introduce micro frontends in your projects.
Potito Coluccelli

Expert practical advice for robust frontend development. The final piece of the micro puzzle!
Adail Retamal, Cubic Transportation Systems

A very concise and logically structured introduction to implementing a micro frontends team infrastructure.
Tanya Wilke, Sanlam

A definitive guide for applying micro frontends architecture to any existing UI technology.
Karthikeyarajan Rajendran, Johnson Controls India

Table of contents

Part 1. Getting started with micro frontends
Chapter 1. What are micro frontends?
Chapter 1. The frontend
Chapter 1. What problems do micro frontends solve?
Chapter 1. The downsides of micro frontends
Chapter 1. Productivity versus overhead
Chapter 2. My first micro frontends project
Chapter 2. Page transition via links
Chapter 2. Composition via iframe
Part 2. Routing, composition, and communication
Chapter 3. Composition with Ajax and server-side routing
Chapter 3. Declarative loading with h-include
Chapter 3. Server-side routing via Nginx
Chapter 3. Namespacing resources
Chapter 4. Server-side composition
Chapter 4. Dealing with unreliable fragments
Chapter 4. Markup assembly performance in depth
Chapter 4. Zalando Tailor
Chapter 4. Fallbacks and timeouts
Chapter 5. Client-side composition
Chapter 5. Defining a Custom Element
Chapter 5. Scoping styles
Chapter 6. Communication patterns
Chapter 6. Fragment to parent
Chapter 6. Event bus via browser events
Chapter 6. Other communication mechanisms
Chapter 7. Client-side routing and the application shell
Chapter 7. Client-side routing
Chapter 7. App shell with two-level routing
Chapter 7. A quick look into the single-spa meta-framework
Chapter 7. The challenges of a unified single-page app
Chapter 8. Composition and universal rendering
Chapter 8. Contract between the teams
Chapter 9. Which architecture fits my project?
Chapter 9. Iframe
Chapter 9. Comparing complexity
Chapter 9. Picking the right architecture and integration technique
Part 3. How to be fast, consistent, and effective
Chapter 10. Asset loading
Chapter 10. Referencing via include (server)
Chapter 10. Inlining
Chapter 10. All-in-one bundle
Chapter 11. Performance is key
Chapter 11. Attributing slowdowns
Chapter 11. Reduce, reuse… vendor libraries
Chapter 11. Versioned vendor bundles
Chapter 11. Creating the versioned bundle
Chapter 12. User interface and design system
Chapter 12. Central design system versus autonomous teams
Chapter 12. Acceptance
Chapter 12. Runtime versus build-time integration
Chapter 12. Pattern library artifacts: Generic versus specific
Chapter 12. What goes into the central pattern library?
Chapter 13. Teams and boundaries
Chapter 13. Team depth
Chapter 13. Sharing knowledge
Chapter 13. Technology diversity
Chapter 14. Migration, local development, and testing
Chapter 14. Strategy #2: Frontend first
Chapter 14. Fragments in isolation

More info