Welcome to Manning India!

We are pleased to be able to offer regional eBook pricing for Indian residents.
All eBook prices are discounted 40% or more!
Micro Frontends in Action
Michael Geers
  • MEAP began July 2019
  • Publication in April 2020 (estimated)
  • ISBN 9781617296871
  • 350 pages (estimated)
  • printed in black & white

An excellent starting point to understand how to introduce micro frontends in your projects.

Potito Coluccelli
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.
Table of Contents detailed table of contents

Part 1: First steps with micro frontends

1 What Are Micro Frontends?

1.1 The Big Picture

1.1.1 Systems & Teams

1.1.2 The Frontend

1.1.3 Integration

1.1.4 Shared Topics

1.2 What problems do Micro Frontends solve?

1.2.1 Faster feature development

1.2.2 No more frontend monolith

1.2.3 Be able to keep changing

1.2.4 The benefits of independence

1.2.5 The downsides of micro frontends

1.3 When do micro frontends make sense?

1.3.1 Good for medium to large projects

1.3.2 Works best on the web

1.3.3 Productivity vs. overhead

1.4 Who uses micro frontends?

1.4.1 Where micro frontends are not a great fit

1.5 The scope of this book

1.6 Summary

2 Loosely Coupled

2.1 Introducing The Tractor Store

2.1.1 Getting started

2.1.2 This books example code

2.2.1 How to do it

2.2.2 Dealing with changing URLs

2.2.3 The benefits

2.2.4 The drawbacks

2.3 Integration via iframe

2.3.1 How to do it

2.3.2 Layout coupling

2.3.3 Interactions

2.3.4 Error scenarios

2.3.5 The drawbacks

2.3.6 When do iframes make sense?

2.4 Summary

3 Deeper Integration with AJAX & Routing

3.1 Integrating via AJAX

3.1.1 How to do it

3.1.2 Not self-contained

3.1.3 Scoping styles and scripts

3.1.4 Progressive enhancement

3.1.5 Declarative loading with h-include

3.1.6 The benefits

3.1.7 The drawbacks

3.1.8 When does an AJAX integration make sense?

3.1.9 Summary

3.2 Routing via a shared web-server

3.2.1 How to do it

3.2.2 Request routing

3.2.3 Route configuration methods

3.2.4 Infrastructure Ownership

3.2.5 When does it make sense?

3.3 Summary

Part 2: Micro frontend integrations

4 Server Side Integrations

4.1 Integration via Server Side Includes (SSI)

4.1.1 How to do it

4.1.2 Better load times

4.2 Dealing with unreliable fragments

4.2.1 The flaky fragment

4.2.2 Integrating the "Near You" fragment

4.2.3 Timeouts

4.2.4 Fallback content

4.3 Tuning for performance

4.3.1 Parallel loading

4.3.2 Nested fragments

4.3.3 Deferred loading

4.3.4 Time to first byte & streaming

4.4 A quick look into other solutions

4.4.1 Edge Side Includes

4.4.2 Zalando Tailor

4.4.3 Podium

4.4.4 Which solution is right for me?

4.5 The good and bad of server-side integration

4.5.1 The benefits

4.5.2 The drawbacks

4.5.3 When does server side integration make sense?

4.6 Summary

5 Client Side Integrations and Communication

5.1 Wrapping Micro Frontends using Web Components

5.1.1 How to do it

5.1.2 Wrapping your framework in a Web Component

5.2 Communicating between Micro Frontends

5.2.1 Parent to fragment

5.2.2 Fragment to parent

5.2.3 Fragment to fragment

5.2.4 Dos and don’ts of communication

5.3 Style isolation using Shadow DOM

5.3.1 Creating a Shadow Root

5.3.2 Scoping styles

5.3.3 When to use Shadow DOM

5.4 The good and bad of integration via Web Components

5.4.1 The benefits

5.4.2 The drawbacks

5.4.3 When does client-side integration make sense?

5.5 Summary

6 Unified Single-Page App

6.1 App shell with flat routing

6.1.1 What’s an app shell?

6.1.2 Anatomy of the app shell

6.1.3 Client-side routing

6.1.4 Page components

6.1.5 Contracts between app shell and teams

6.2 App shell with two-level routing

6.2.1 Implementing the top-level router

6.2.2 Implementing team-level routing

6.2.3 What happens on a URL change?

6.2.4 App shell APIs

6.3 A quick look into the single-spa meta-framework

6.3.1 How single-spa works

6.4 The challenges of a unified single page app

6.4.1 Topics you need to think about

6.4.2 When does a unified single page app make sense?

6.5 Summary

7 Universal Integration

8 What Integration Fits My Project?

Part 3: Real-world micro frontends

9 Asset Loading

9.4 Summary

10 Performance is Key

11 Coherent User Interface

12 Migration Strategies

13 Integration Testing

14 Inside the Organization

About the Technology

Gone are the days of web UI being simply built with HTML and CSS. Modern web frontends are complex and require the same care in design and implementation as back-end services. The micro frontends approach tackles those issues by extending the principles of microservices to frontend development. With micro frontends different teams can work effectively on a large software system. The application is divided into multiple independent slices — from the database right up to the UI. These different frontends are then integrated using standards such as web components into a single user-facing frontend. Thanks to the smaller scope of a micro frontend, teams can then deliver features faster, upgrade more easily, and make their own choices about their technology stack so they’re always using the right tool for the job.

About the book

Micro Frontends in Action teaches you how to put the theory of micro frontends into practice. Frontend expert Michael Geers teaches you with a complete ecommerce example application that illustrates how a large-scale business application can adopt the micro frontends approach. You’ll learn to integrate web applications made up of smaller fragments using tools such as web components or server side includes, how to solve the organizational challenges of micro frontends, and how to create a design system that ensures an end user gets a consistent look and feel for your application. When you’re done, you’ll be able to better distribute your team’s skills and resources to deliver quality software quickly and flexibly.

What's inside

  • Applying integration strategies with iframes, AJAX, server-side includes, web components and the app-shell approach
  • Optimizing for performance and asset delivery strategies
  • Designing coherent user interfaces
  • Migrating to a micro frontends architecture

About the reader

For intermediate web developers, team leaders, and software architects.

About the author

Michael Geers is a software developer specializing in building user interfaces. He has written software for the web since he was a teenager. In the last few years, he has worked on various customer projects with verticalized architectures. He shares his experiences on this topic at international conferences, in a series of magazine articles, and runs the site micro-frontends.org.

Manning Early Access Program (MEAP) Read chapters as they are written, get the finished eBook as soon as it’s ready, and receive the pBook long before it's in bookstores.
MEAP combo $49.99 pBook + eBook + liveBook
MEAP eBook $19.99 $39.99 pdf + ePub + kindle + liveBook
Prices displayed in rupees will be charged in USD when you check out.

placing your order...

Don't refresh or navigate away from the page.

FREE domestic shipping on three or more pBooks