Browser-based software can quickly become complex and difficult to maintain, especially when it's implemented as a large single-page application. By adopting the micro frontends approach and designing your web apps as systems of features, you can deliver faster feature development, easier upgrades, and pick and choose the …
Browser-based software can quickly become complex and difficult to maintain, especially when it's implemented as a large single-page application. By adopting the micro frontends approach and designing your web apps as systems of features, you can deliver faster feature development, easier upgrades, and pick and choose the technology you use in your stack. Micro Frontends in Action is your guide to simplifying unwieldy frontends by composing them from small, well-defined units.
Micro frontends deliver the same flexibility and maintainability to browser-based applications that microservices provide for backend systems. You design your project as a set of standalone components that include their own interfaces, logic, and storage. Then you develop these mini-applications independently and compose them in the browser.
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.
For web developers, software architects, and team leaders.
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.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