The Art of Micro Frontends

The Art of Micro Frontends

by Florian Rappl
Released June 2021
Publisher(s): Packt Publishing
ISBN: 9781800563568

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

Apply your experience of web development with HTML and JavaScript to build micro frontends for large-scale web projects using frameworks such as React and popular web tooling such as Node.js with Express or webpack

Key Features

  • Cut through the complexities of designing a monolithic web architecture using micro frontend architecture
  • Explore architecture patterns for building large-scale applications
  • Learn how to build, test, and secure your micro frontends efficiently

Book Description

Micro frontend is a web architecture for frontend development borrowed from the idea of microservices in software development, where each module of the frontend is developed and shipped in isolation to avoid complexity and a single point of failure for your frontend.

Complete with hands-on tutorials, projects, and self-assessment questions, this easy-to-follow guide will take you through the patterns available for implementing a micro frontend solution. You’ll learn about micro frontends in general, the different architecture styles and their areas of use, how to prepare teams for the change to micro frontends, as well as how to adjust the UI design 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 reinforce the knowledge you’ve gained by working on different case studies relating to micro frontends.

By the end of this book, you'll be able to decide if and how micro frontends should be implemented to achieve scalability for your user interface (UI).

What you will learn

  • Understand how to choose the right micro frontend architecture
  • Design screens for compositional UIs
  • Create a great developer experience for micro frontend solutions
  • Achieve enhanced user experiences with micro frontends
  • Introduce governance and boundary checks for managing distributed frontends
  • Build scalable modular web applications from scratch or by migrating an existing monolith

Who this book is for

This book is for software/solution architects or (mostly lead) developers as well as web developers and frontend engineers. Beginner-level knowledge of HTML and CSS along with a solid understanding of JavaScript programming and its ecosystem, including Node.js and NPM, is assumed.

Table of contents

  1. The Art of Micro Frontends
  2. Foreword
  3. Contributors
  4. About the author
  5. About the reviewer
  6. Preface
    1. Who this book is for
    2. What this book covers
    3. To get the most out of this book
    4. Download the example code files
    5. Code in Action
    6. Download the color images
    7. Conventions used
    8. Get in touch
    9. Share Your Thoughts
  7. Section 1: The Hive - Introducing Frontend Modularization
  8. Chapter 1: Why Micro frontends?
    1. Evolution of web applications
      1. Programming the web
      2. The social web
      3. Separation of frontend and backend
    2. Everything becomes micro
      1. From SOA to microservices
      2. Advantages of microservices
      3. Disadvantages of microservices
      4. Micro and frontend
    3. Emerging web standards
      1. Isolation via Web Components
      2. Frame communication
      3. Web workers and proxies
    4. Faster TTM
      1. Decreasing onboarding time
      2. Multiple teams
      3. Isolated features
      4. A/B testing
    5. Summary
  9. Chapter 2: Common Challenges and Pitfalls
    1. Performance
      1. Resource caching
      2. Bundle size
      3. Request optimizations
    2. Security
      1. Central user management
      2. Individual user management
      3. Script execution
    3. Knowledge sharing
    4. Reliability
    5. User experience
      1. Wording
      2. Pattern libraries
    6. Summary
  10. Chapter 3: Deployment Scenarios
    1. Central deployments
      1. Using a monorepo
      2. Joining multiple repositories
    2. Distributed deployments
      1. Using a monorepo
      2. Using dedicated pipelines
    3. Hybrid solutions
      1. Scheduled releases
      2. Triggering on change
    4. Summary
  11. Chapter 4: Domain Decomposition
    1. Principles of DDD
      1. Modules
      2. Bounded context
      3. Context map
      4. Strategic domain design versus tactical design
    2. SoC
      1. Technical split
      2. Functional split
      3. Example decomposition
    3. Architectural boundaries
      1. Shared capabilities
      2. Choosing the right level of freedom
      3. Accessing the DOM
      4. Universality of micro frontends
    4. Summary
  12. Section 2: Dry Honey - Implementing Micro frontend Architectures
  13. Chapter 5: Types of Micro Frontend Architectures
    1. Technical requirements
    2. The micro frontend landscape
    3. Static versus dynamic micro frontends
    4. Horizontal- versus vertical-composed micro frontends
    5. Backend- versus frontend-driven micro frontends
    6. Summary
  14. Chapter 6: The Web Approach
    1. Technical requirements
    2. Basics of the web approach
      1. The architecture
      2. Sample implementation
      3. Potential enhancements
    3. Advantages and disadvantages
    4. Links
      1. Central linking directory
      2. Local linking directory
    5. Iframes
      1. Security
      2. Accessibility
      3. Layout
    6. Summary
  15. Chapter 7: Server-Side Composition
    1. Technical requirements
    2. Basics of server-side composition
      1. The architecture
      2. Sample implementation
      3. Potential enhancements
    3. Advantages and disadvantages
      1. Introducing Mosaic 9
      2. Introducing Podium
      3. Known users
    4. Creating a composition layout
      1. Understanding layout responsibilities
      2. Using SSI
      3. Using ESI
      4. Using JS template strings
    5. Setting up micro frontend projects
      1. Podlets
      2. Examining the life cycle
    6. Summary
  16. Chapter 8: Edge-Side Composition
    1. Technical requirements
    2. Basics of edge-side composition
      1. The architecture
      2. Sample implementation
      3. Potential enhancements
    3. Advantages and disadvantages
    4. SSI and ESI
      1. SSI
      2. ESI
    5. Stitching in BFFs
    6. Summary
  17. Chapter 9: Client-Side Composition
    1. Technical requirements
    2. Basics of client-side composition
      1. The architecture
      2. Sample implementation
      3. Potential enhancements
    3. Advantages and disadvantages
    4. Diving into Web Components
      1. Understanding Web Components
      2. Isolating styles with shadow DOM
    5. Composing micro frontends dynamically
      1. Using a micro frontend registry
      2. Updating micro frontends at runtime
    6. Summary
  18. Chapter 10: SPA Composition
    1. Technical requirements
    2. Basics of SPA composition
      1. The architecture
      2. Sample implementation
      3. Potential enhancements
    3. Advantages and disadvantages
    4. Building a core SPA shell
      1. Activating pages
      2. Sharing dependencies
    5. Integrating SPA micro frontends
      1. Declaring the lifecycle
      2. Using cross-framework components
    6. Exploring communication patterns
      1. Exchanging events
      2. Sharing data
      3. Extending components
    7. Summary
  19. Chapter 11: Siteless UIs
    1. Technical requirements
    2. The basics of siteless UIs
      1. The architecture
      2. Sample implementation
      3. Potential enhancements
    3. Advantages and disadvantages
    4. Comparing with serverless
      1. Developing locally
      2. Publishing modules
    5. Creating a runtime
      1. Building a runtime with Piral
      2. Deploying a runtime with Piral
    6. Writing modules
      1. Looking at a pilet's life cycle
      2. Implementing framework-agnostic components
    7. Summary
  20. Section 3: Busy Bees - Scaling Organizations
  21. Chapter 12: Preparing Teams and Stakeholders
    1. Communicating with C-level stakeholders
      1. Managing expectations
      2. Writing executive summaries
    2. Handling product owners and steering committees
    3. Team organization
      1. Understanding possible team setups
      2. Changing team organizations
    4. Summary
  22. Chapter 13: Dependency Management, Governance, and Security
    1. Sharing all or nothing
    2. What about change management?
    3. Establishing a governance model
    4. Sandboxing micro frontends
    5. General security concerns and mitigations
    6. Summary
  23. Chapter 14: Impact on UX and Screen Design
    1. Always adding one
    2. Learning to start at zero
    3. Sharing designs efficiently
    4. Creating designs without designers
    5. Summary
  24. Chapter 15: Developer Experience
    1. Providing a minimum developer experience
      1. Supporting development in standard IDEs
      2. Improving the scaffolding experience
    2. Establishing a decent developer experience
      1. Centralizing code documentation
      2. Documenting with videos
      3. Assisting with code analysis
      4. Improving testability
    3. Achieving the best developer experience
      1. Integrating error codes
      2. Providing an offline-first development environment
      3. Customizing via browser extensions
      4. Implementing a developer portal
    4. Summary
  25. Chapter 16: Case Studies
    1. A user-facing portal solution
      1. Problem description
      2. Team setup
      3. Solution
      4. Impact
    2. An administration portal solution
      1. Problem description
      2. Team setup
      3. Solution
      4. Impact
    3. A healthcare management solution
      1. Problem description
      2. Team setup
      3. Solution
      4. Impact
    4. Summary
    5. Epilogue
    6. Why subscribe?
  26. Other Books You May Enjoy
    1. Packt is searching for authors like you

Product information

  • Title: The Art of Micro Frontends
  • Author(s): Florian Rappl
  • Release date: June 2021
  • Publisher(s): Packt Publishing
  • ISBN: 9781800563568