Micro Frontends in Action

Micro Frontends in Action

by Michael Geers
Released September 2020
Publisher(s): Manning Publications
ISBN: 9781617296871

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

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.

About the Technology
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.

About the Book
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 Reader
For web developers, software architects, and team leaders.

About the Author
Michael Geers is a software developer specializing in building user interfaces.

Quotes
An excellent starting point to understand how to introduce micro frontends in your projects.
- Potito Coluccelli

You can base your Micro Frontends directly off the examples in the book!
- Barnaby Norman, Frontend Developer

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

Publisher resources

View/Submit Errata

Table of contents

  1. Micro Frontends in Action
  2. Copyright
  3. contents
  4. front matter
    1. preface
    2. acknowledgments
    3. about this book
      1. Who should read this book
      2. How this book is organized: a roadmap
      3. About the code
      4. Online resources
    4. about the author
    5. about the cover illustration
  5. Part 1. Getting started with micro frontends
  6. 1 What are micro frontends?
    1. 1.1 The big picture
      1. 1.1.1 Systems and teams
      2. 1.1.2 The frontend
      3. 1.1.3 Frontend integration
      4. 1.1.4 Shared topics
    2. 1.2 What problems do micro frontends solve?
      1. 1.2.1 Optimize for feature development
      2. 1.2.2 No more frontend monolith
      3. 1.2.3 Be able to keep changing
      4. 1.2.4 The benefits of independence
    3. 1.3 The downsides of micro frontends
      1. 1.3.1 Redundancy
      2. 1.3.2 Consistency
      3. 1.3.3 Heterogeneity
      4. 1.3.4 More frontend code
    4. 1.4 When do micro frontends make sense?
      1. 1.4.1 Good for medium-to-large projects
      2. 1.4.2 Works best on the web
      3. 1.4.3 Productivity versus overhead
      4. 1.4.4 Where micro frontends are not a great fit
      5. 1.4.5 Who uses micro frontends?
    5. Summary
  7. 2 My first micro frontends project
    1. 2.1 Introducing The Tractor Store
      1. 2.1.1 Getting started
      2. 2.1.2 Running this book’s example code
    2. 2.2 Page transition via links
      1. 2.2.1 Data ownership
      2. Contract between the teams
      3. 2.2.3 How to do it
      4. 2.2.4 Dealing with changing URLs
      5. 2.2.5 The benefits
      6. 2.2.6 The drawbacks
      7. 2.2.7 When do links make sense?
    3. 2.3 Composition via iframe
      1. 2.3.1 How to do it
      2. 2.3.2 The benefits
      3. 2.3.3 The drawbacks
      4. 2.3.4 When do iframes make sense?
    4. 2.4 What’s next?
    5. Summary
  8. Part 2. Routing, composition, and communication
  9. 3 Composition with Ajax and server-side routing
    1. 3.1 Composition via Ajax
      1. 3.1.1 How to do it
      2. 3.1.2 Namespacing styles and scripts
      3. 3.1.3 Declarative loading with h-include
      4. 3.1.4 The benefits
      5. 3.1.5 The drawbacks
      6. 3.1.6 When does an Ajax integration make sense?
      7. 3.1.7 Summary
    2. 3.2 Server-side routing via Nginx
      1. 3.2.1 How to do it
      2. 3.2.2 Namespacing resources
      3. 3.2.3 Route configuration methods
      4. 3.2.4 Infrastructure ownership
      5. 3.2.5 When does it make sense?
    3. Summary
  10. 4 Server-side composition
    1. 4.1 Composition via Nginx and Server-Side Includes (SSI)
      1. 4.1.1 How to do it
      2. 4.1.2 Better load times
    2. 4.2 Dealing with unreliable fragments
      1. 4.2.1 The flaky fragment
      2. 4.2.2 Integrating the Near You fragment
      3. 4.2.3 Timeouts and fallbacks
      4. 4.2.4 Fallback content
    3. 4.3 Markup assembly performance in depth
      1. 4.3.1 Parallel loading
      2. 4.3.2 Nested fragments
      3. 4.3.3 Deferred loading
      4. 4.3.4 Time to first byte and streaming
    4. 4.4 A quick look into other solutions
      1. 4.4.1 Edge-Side Includes
      2. 4.4.2 Zalando Tailor
      3. 4.4.3 Podium
      4. 4.4.4 Which solution is right for me?
    5. 4.5 The good and bad of server-side composition
      1. 4.5.1 The benefits
      2. 4.5.2 The drawbacks
      3. 4.5.3 When does server-side integration make sense?
    6. Summary
  11. 5 Client-side composition
    1. 5.1 Wrapping micro frontends using Web Components
      1. 5.1.1 How to do it
      2. 5.1.2 Wrapping your framework in a Web Component
    2. 5.2 Style isolation using Shadow DOM
      1. 5.2.1 Creating a shadow root
      2. 5.2.2 Scoping styles
      3. 5.2.3 When to use Shadow DOM
    3. 5.3 The good and bad of using Web Components for composition
      1. 5.3.1 The benefits
      2. 5.3.2 The drawbacks
      3. 5.3.3 When does client-side integration make sense?
    4. Summary
  12. 6 Communication patterns
    1. 6.1 User interface communication
      1. 6.1.1 Parent to fragment
      2. 6.1.2 Fragment to parent
      3. 6.1.3 Fragment to fragment
      4. 6.1.4 Publish/Subscribe with the Broadcast Channel API
      5. 6.1.5 When UI communication is a good fit
    2. 6.2 Other communication mechanisms
      1. 6.2.1 Global context and authentication
      2. 6.2.2 Managing state
      3. 6.2.3 Frontend-backend communication
      4. 6.2.4 Data replication
    3. Summary
  13. 7 Client-side routing and the application shell
    1. 7.1 App shell with flat routing
      1. 7.1.1 What’s an app shell?
      2. 7.1.2 Anatomy of the app shell
      3. 7.1.3 Client-side routing
      4. 7.1.4 Rendering pages
      5. 7.1.5 Contracts between app shell and teams
    2. 7.2 App shell with two-level routing
      1. 7.2.1 Implementing the top-level router
      2. 7.2.2 Implementing team-level routing
      3. 7.2.3 What happens on a URL change?
      4. 7.2.4 App shell APIs
    3. 7.3 A quick look into the single-spa meta-framework
      1. 7.3.1 How single-spa works
    4. 7.4 The challenges of a unified single-page app
      1. 7.4.1 Topics you need to think about
      2. 7.4.2 When does a unified single-page app make sense?
    5. Summary
  14. 8 Composition and universal rendering
    1. 8.1 Combining server- and client-side composition
      1. 8.1.1 SSI and Web Components
      2. 8.1.2 Contract between the teams
      3. 8.1.3 Other solutions
    2. 8.2 When does universal composition make sense?
      1. 8.2.1 Universal rendering with pure server-side composition
      2. 8.2.2 Increased complexity
      3. 8.2.3 Universal unified single-page app?
    3. Summary
  15. 9 Which architecture fits my project?
    1. 9.1 Revisiting the terminology
      1. 9.1.1 Routing and page transitions
      2. 9.1.2 Composition techniques
      3. 9.1.3 High-level architectures
    2. 9.2 Comparing complexity
      1. 9.2.1 Heterogeneous architectures
    3. 9.3 Are you building a site or an app?
      1. 9.3.1 The Documents-to-Applications Continuum
      2. 9.3.2 Server, client, or both
    4. 9.4 Picking the right architecture and integration technique
      1. 9.4.1 Strong isolation (legacy, third party)
      2. 9.4.2 Fast first-page load/progressive enhancement
      3. 9.4.3 Instant user feedback
      4. 9.4.4 Soft navigation
      5. 9.4.5 Multiple micro frontends on one page
    5. Summary
  16. Part 3. How to be fast, consistent, and effective
  17. 10 Asset loading
    1. 10.1 Asset referencing strategies
      1. 10.1.1 Direct referencing
      2. 10.1.2 Challenge: Cache-busting and independent deployments
      3. 10.1.3 Referencing via redirect (client)
      4. 10.1.4 Referencing via include (server)
      5. 10.1.5 Challenge: Synchronizing markup and asset versions
      6. 10.1.6 Inlining
      7. 10.1.7 Integrated solutions (Tailor, Podium, ...)
      8. 10.1.8 Quick summary
    2. 10.2 Bundle granularity
      1. 10.2.1 HTTP/2
      2. 10.2.2 All-in-one bundle
      3. 10.2.3 Team bundles
      4. 10.2.4 Page and fragment bundles
    3. 10.3 On-demand loading
      1. 10.3.1 Proxy micro frontends
      2. 10.3.2 Lazy loading CSS
    4. Summary
  18. 11 Performance is key
    1. 11.1 Architecting for performance
      1. 11.1.1 Different teams, different metrics
      2. 11.1.2 Multi-team performance budgets
      3. 11.1.3 Attributing slowdowns
      4. 11.1.4 Performance benefits
    2. 11.2 Reduce, reuse... vendor libraries
      1. 11.2.1 Cost of autonomy
      2. 11.2.2 Pick small
      3. 11.2.3 One global version
      4. 11.2.4 Versioned vendor bundles
      5. 11.2.5 Don’t share business code
    3. Summary
  19. 12 User interface and design system
    1. 12.1 Why a design system?
      1. 12.1.1 Purpose and role
      2. 12.1.2 Benefits
    2. 12.2 Central design system versus autonomous teams
      1. 12.2.1 Do I need my own design system?
      2. 12.2.2 Process, not project
      3. 12.2.3 Ensure sustained budget and responsibility
      4. 12.2.4 Get buy-in from the teams
      5. 12.2.5 Development process: Central versus federated
      6. 12.2.6 Development phases
    3. 12.3 Runtime versus build-time integration
      1. 12.3.1 Runtime integration
      2. 12.3.2 Versioned package
    4. 12.4 Pattern library artifacts: Generic versus specific
      1. 12.4.1 Choose your component format
      2. 12.4.2 There will be change
    5. 12.5 What goes into the central pattern library?
      1. 12.5.1 The costs of sharing components
      2. 12.5.2 Central or local?
      3. 12.5.3 Central and local pattern libraries
    6. Summary
  20. 13 Teams and boundaries
    1. 13.1 Aligning systems and teams
      1. 13.1.1 Identifying team boundaries
      2. 13.1.2 Team depth
      3. 13.1.3 Cultural change
    2. 13.2 Sharing knowledge
      1. 13.2.1 Community of practice
      2. 13.2.2 Learning and enabling
      3. 13.2.3 Present your work
    3. 13.3 Cross-cutting concerns
      1. 13.3.1 Central infrastructure
      2. 13.3.2 Specialized component team
      3. 13.3.3 Global agreements and conventions
    4. 13.4 Technology diversity
      1. 13.4.1 Toolbox and defaults
      2. 13.4.2 Frontend blueprint
      3. 13.4.3 Don’t fear the copy
      4. 13.4.4 The value of similarity
    5. Summary
  21. 14 Migration, local development, and testing
    1. 14.1 Migration
      1. 14.1.1 Proof of concept and building a lighthouse
      2. 14.1.2 Strategy #1: Slice-by-slice
      3. 14.1.3 Strategy #2: Frontend first
      4. 14.1.4 Strategy #3: Greenfield and big bang
    2. 14.2 Local development
      1. 14.2.1 Don’t run another team’s code
      2. 14.2.2 Mocking fragments
      3. 14.2.3 Fragments in isolation
      4. 14.2.4 Pulling other teams micro frontends from staging or production
    3. 14.3 Testing
    4. Summary
  22. index

Product information

  • Title: Micro Frontends in Action
  • Author(s): Michael Geers
  • Release date: September 2020
  • Publisher(s): Manning Publications
  • ISBN: 9781617296871