The Art of Micro Frontends

Apply your web development experience with HTML and JavaScript to build micro frontends for large-scale web projects, independent of frameworks and tooling

Key Features

• Cut through the complexities of designing a monolithic web architecture using micro frontend architecture
• Explore architecture patterns and their areas of use for building large-scale applications
• Learn how to build, test, and secure your micro frontends efficiently
• Purchase of the print or Kindle book includes a free PDF eBook

Book Description

The organizational pattern of micro frontends allows you to split web applications into multiple parts, where each part can be owned by an autonomous team. Each team can have its own development and deployment life cycle, allowing every part of an application to be shipped in isolation. Following the strategies outlined in this book, you can avoid complexity while increasing resilience for your frontend.

This updated second edition will guide you through the patterns available to implement a micro frontend solution. You’ll learn about micro frontends, the different architecture styles, and their areas of use. Then, you’ll learn how to prepare teams for the change to micro frontends, as well as how to adjust the user interface (UI) design and your CSS styles for scalability. Starting with the simplest variants of micro frontend architectures, the book progresses from static approaches to fully dynamic solutions that allow maximum scalability with faster release cycles. In the concluding chapters, you’ll strengthen the security level of your micro frontend solution, while reinforcing your overall knowledge with real-world case studies relating to micro frontends.

By the end of this book, you’ll be able to decide whether and how micro frontends should be implemented to achieve high scalability for your web app.

What you will learn

• Understand how to choose the right micro frontend architecture
• Use screen designs and isolated styles for compositional UIs
• Create outstanding developer experiences for micro frontend solutions
• Introduce governance and boundary checks to manage distributed frontends
• Share dependencies and expose micro frontends with module federation
• Build scalable modular web applications from scratch or by migrating an existing monolith

Who this book is for

This book is for software architects, lead developers, senior web developers, and frontend engineers. Beginner-level knowledge of HTML and CSS, as well as a solid understanding of JavaScript programming and its ecosystem, including Node.js and npm, is assumed.

Table of Contents

1. Why Micro Frontends?
2. Common Challenges and Pitfalls
3. Deployment Scenarios
4. Domain Decomposition
5. Types of Micro Frontend Architectures
6. The Web Approach
7. Server-Side Composition
8. Edge-Side Composition
9. Client-Side Composition
10. SPA Composition
11. Siteless UIs
12. Sharing Dependencies with Module Federation
13. Isolating CSS
14. Securing the Application
15. Decoupling Using a Discovery Service
16. Preparing Teams and Stakeholders
17. Dependency Management, Governance, and Security
18. Impact of Micro Frontends on UX and Screen Design
19. Building a Great Developer Experience
20. Case Studies

Florian Rappl is a solution architect working on distributed web applications for digital transformation and IoT projects. His main interest lies in the implementation of micro frontends and their impact on teams and business models. As the lead architect, he has helped to create outstanding web applications for many industry-leading companies. He regularly gives lectures on software design patterns and web development. Florian won multiple prizes for his work over the years and is recognized as a Microsoft MVP for development technologies. He started his career in software engineering before studying physics and helping to build an energy-efficient supercomputer. Florian currently lives in Munich, Germany, with his wife and two daughters.