0%

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
    2. Programming the web
    3. The social web
    4. Separation of frontend and backend
    5. Everything becomes micro
    6. From SOA to microservices
    7. Advantages of microservices
    8. Disadvantages of microservices
    9. Micro and frontend
    10. Emerging web standards
    11. Isolation via Web Components
    12. Frame communication
    13. Web workers and proxies
    14. Faster TTM
    15. Decreasing onboarding time
    16. Multiple teams
    17. Isolated features
    18. A/B testing
    19. Summary
  9. Chapter 2: Common Challenges and Pitfalls
    1. Performance
    2. Resource caching
    3. Bundle size
    4. Request optimizations
    5. Security
    6. Central user management
    7. Individual user management
    8. Script execution
    9. Knowledge sharing
    10. Reliability
    11. User experience
    12. Wording
    13. Pattern libraries
    14. Summary
  10. Chapter 3: Deployment Scenarios
    1. Central deployments
    2. Using a monorepo
    3. Joining multiple repositories
    4. Distributed deployments
    5. Using a monorepo
    6. Using dedicated pipelines
    7. Hybrid solutions
    8. Scheduled releases
    9. Triggering on change
    10. Summary
  11. Chapter 4: Domain Decomposition
    1. Principles of DDD
    2. Modules
    3. Bounded context
    4. Context map
    5. Strategic domain design versus tactical design
    6. SoC
    7. Technical split
    8. Functional split
    9. Example decomposition
    10. Architectural boundaries
    11. Shared capabilities
    12. Choosing the right level of freedom
    13. Accessing the DOM
    14. Universality of micro frontends
    15. 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
    3. The architecture
    4. Sample implementation
    5. Potential enhancements
    6. Advantages and disadvantages
    7. Links
    8. Central linking directory
    9. Local linking directory
    10. Iframes
    11. Security
    12. Accessibility
    13. Layout
    14. Summary
  15. Chapter 7: Server-Side Composition
    1. Technical requirements
    2. Basics of server-side composition
    3. The architecture
    4. Sample implementation
    5. Potential enhancements
    6. Advantages and disadvantages
    7. Introducing Mosaic 9
    8. Introducing Podium
    9. Known users
    10. Creating a composition layout
    11. Understanding layout responsibilities
    12. Using SSI
    13. Using ESI
    14. Using JS template strings
    15. Setting up micro frontend projects
    16. Podlets
    17. Examining the life cycle
    18. Summary
  16. Chapter 8: Edge-Side Composition
    1. Technical requirements
    2. Basics of edge-side composition
    3. The architecture
    4. Sample implementation
    5. Potential enhancements
    6. Advantages and disadvantages
    7. SSI and ESI
    8. SSI
    9. ESI
    10. Stitching in BFFs
    11. Summary
  17. Chapter 9: Client-Side Composition
    1. Technical requirements
    2. Basics of client-side composition
    3. The architecture
    4. Sample implementation
    5. Potential enhancements
    6. Advantages and disadvantages
    7. Diving into Web Components
    8. Understanding Web Components
    9. Isolating styles with shadow DOM
    10. Composing micro frontends dynamically
    11. Using a micro frontend registry
    12. Updating micro frontends at runtime
    13. Summary
  18. Chapter 10: SPA Composition
    1. Technical requirements
    2. Basics of SPA composition
    3. The architecture
    4. Sample implementation
    5. Potential enhancements
    6. Advantages and disadvantages
    7. Building a core SPA shell
    8. Activating pages
    9. Sharing dependencies
    10. Integrating SPA micro frontends
    11. Declaring the lifecycle
    12. Using cross-framework components
    13. Exploring communication patterns
    14. Exchanging events
    15. Sharing data
    16. Extending components
    17. Summary
  19. Chapter 11: Siteless UIs
    1. Technical requirements
    2. The basics of siteless UIs
    3. The architecture
    4. Sample implementation
    5. Potential enhancements
    6. Advantages and disadvantages
    7. Comparing with serverless
    8. Developing locally
    9. Publishing modules
    10. Creating a runtime
    11. Building a runtime with Piral
    12. Deploying a runtime with Piral
    13. Writing modules
    14. Looking at a pilet's life cycle
    15. Implementing framework-agnostic components
    16. Summary
  20. Section 3: Busy Bees - Scaling Organizations
  21. Chapter 12: Preparing Teams and Stakeholders
    1. Communicating with C-level stakeholders
    2. Managing expectations
    3. Writing executive summaries
    4. Handling product owners and steering committees
    5. Team organization
    6. Understanding possible team setups
    7. Changing team organizations
    8. 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
    2. Supporting development in standard IDEs
    3. Improving the scaffolding experience
    4. Establishing a decent developer experience
    5. Centralizing code documentation
    6. Documenting with videos
    7. Assisting with code analysis
    8. Improving testability
    9. Achieving the best developer experience
    10. Integrating error codes
    11. Providing an offline-first development environment
    12. Customizing via browser extensions
    13. Implementing a developer portal
    14. Summary
  25. Chapter 16: Case Studies
    1. A user-facing portal solution
    2. Problem description
    3. Team setup
    4. Solution
    5. Impact
    6. An administration portal solution
    7. Problem description
    8. Team setup
    9. Solution
    10. Impact
    11. A healthcare management solution
    12. Problem description
    13. Team setup
    14. Solution
    15. Impact
    16. Summary
    17. Epilogue
    18. Why subscribe?
  26. Other Books You May Enjoy
    1. Packt is searching for authors like you
34.201.69.22